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 CSS: Not able to edit the design of the upload field button and want to reduce some gaps

    Asked by tamsyn on March 24, 2016 at 05:32 PM

    Hello there!

    I've tried several times on my form "2016 Field Day Host Bio and Media Form" to apply custom CSS in the Designer to page break buttons, and to the color and positioning of the file upload widget button. In the designer, the changes appear to have taken place. I have ensured that I have saved my changes. But once I go to preview the form, or return to the form builder, the changes are gone.

    This has happened several times ... What's going on?

    For my file upload button, I want it to be center-aligned, colored with #f6b983, and the font color to be #9d3c22, bold, and either the same font I have used in my headers (IM Fell DW Pica) or "Chaparral Pro." I'd like a stroke around the button, in the same red code as the font, and no text shadow.

    There are other weird little issues as well: I can't seem to get those wide gaps at the top of each form page, before the first header, to disappear.

    Also, in my form preferences, I specified secondary label colors to be #9d3c22, but they haven't shown up. That's more of a minor point... stylistically, it would be nice, but I'm more flummoxed by why the custom CSS is not saving.

    Thanks for your help!

    tamsyn

    Screenshot
    showing up Form Builder label font color font Deisgner Custom CSS Upload field
  • Profile Image

    Answered by tamsyn on March 24, 2016 at 05:35 PM

    I wanted to share the screenshot of how this looks in preview, but couldn't seem to upload two screenshots with my original question. Here it is:

     

  • Profile Image

    Answered by victor on March 24, 2016 at 07:30 PM

    After reviewing your CSS code I noticed that you did not include the ID of the upload field.

    #cid_75 div.qq-upload-button {

        border : 2px solid !important;

        border-color : #9d3c22 !important;

        margin-left : 150px !important;

        margin-right : -150px !important;

        font-family : "Chaparral Pro", "myriad pro", Open Sans !important;

        font-size : 18px !important;

        font-weight : bolder !important;

        background : #f6b983 !important;

        color : #9d3c22 !important;

        text-shadow : none !important;

    }

     

    To reduce the gap you may insert the following code

     

    #cid_157 {

        margin-top : -50px !important;

    }

     

    #id_139 {

        margin-top : -50px !important;

    }

     

     

    Please let us know if this helps.

  • Profile Image

    Answered by tamsyn on March 25, 2016 at 05:07 PM

    Thanks very much, Victor! That worked. I also see that there's a difference between making a global change to all similar elements, versus just one specific instance of an object.

     

    Thanks for your quick response.

    Best,

    tamsyn