What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Custom Jotform CSS Styling Request

    Asked by dylanwest2010 on June 23, 2017 at 10:20 PM

    Hello,

    I am considering upgrading to an annual plan before the end of the month. However, before I can do that I need to know if Jotform can provide a bit of custom CSS to one of my forms.

    I have three requests which I require before I can commit to an annual plan:

    1. I would like my 'Upload Image/Choose File' button to resemble the screenshot that I have attached. Basically, I would like to style the label above "Upload Image" to act and work as a button. I would like the height of the button to be equal to the height of each label.

    2. I would like all text that is inputted into each form to be indented (as seen in the 'Describe your work' label). Currently, besides the Describe your work label, all user entered text is not indented like the sublabel.

    3. Currently, there is a blue glow around each label when text is inputted into a label. I would like to remove this effect and offer no glow effect around the label.

    If you can provide these style edits to the Jotform, I will gladly upgrade to an annual plan.

    Thank you,

    Dylan

    Page URL:
    https://www.pixelempire.com/pages/start-selling-with-us

    Screenshot
  • Profile Image
    JotForm Support

    Answered by BJoanna on June 24, 2017 at 03:15 AM

    To be able to style upload button, you will first need to set Multiple Files option to YES inside of Upload Field setting and you can change Button Text to "Upload Image".

    After that add this CSS code to your form:

    #cid_20 div.qq-upload-button {

        width : 150px;

        height : 23px;

        color : black!important;

        background-color : #fff!important;

        padding : 5px!important;

    }

    #label_20 {

       display:none;

    }

    How to Inject Custom CSS Codes

    After that File Upload field will look like this.

    I have moved your other questions to separate threads and we will provide you an answers there shortly: 

    https://www.jotform.com/answers/1182481 

    https://www.jotform.com/answers/1182482