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

    Styles messed in Form Designer

    Asked by serhouse on November 19, 2014 at 01:17 PM

    Dear JotForm team,

    I was trying to edit my form in the new Designer and it seems like the styles in the Form Designer and the Form builder interact somehow: either I can't make any changes to the element at all or changes occure to all elements of the same class instead of just one selected.

    I attached the screenshot of how my from looks like in the Designer and by the link you can see how it looks like live. As you can notice, fonts, button styles and fields widths differ and I can't fix it.

    For example, when I click on the green button and try to increase its height, simultaneously the upper button changes its height, which I don't want to. Or, anither issue, the text field width can't be changed at all.

    Could you please advice me on what the problem might be?

    Thank you!


    Page URL:

  • Profile Image
    JotForm Support

    Answered by Mike_T on November 19, 2014 at 03:08 PM

    Thank you for contacting us.

    To be able to increase the width of Text Boxes you will need to expand them first.

    When you click on the green submit button it opens the general Button Styles menu, so these styles do affect other buttons on the form.

    As a work around, you can set a specific height for the Upload button with the next CSS:

    .qq-upload-button {
    height: 25px !important;

    Please feel free to contact us if you need any further assistance.

  • Profile Image

    Answered by serhouse on November 20, 2014 at 12:11 PM

    Hi Mike and thank you for your reply!

    I managed to fix the width problem following your advice.

    Another question in the post was about the font size.

    Here's how it looks in the Designer:


    And here's what it looks like when embedded:



    Neither I can find a way to change the font size for hover text and sublabels.

    And I'll ask one more design related question right here:

    is it possible to make a visible sublabel for the phone field (the third field) just like for the upload button and also make the phone number mask (in this case +7 (___) __-__ ) always visible? I didn't find those options in the Form Builder.

    Thank you!


  • Profile Image

    Answered by Ben on November 20, 2014 at 01:33 PM

    Hi Sergey,

    I have moved your other two questions to a new thread where we would help you resolve them.

    This way we will avoid any confusion, but also as we are not able to reply to multiple issues per one thread. You will be able to find it here: http://www.jotform.com/answers/462160

    Now in regards to the font.

    I might be missing something, but to me they look the same. However when inspecting the code I see that you have 3 different fonts assigned to the .form-all class

    "Trebuchet MS"   
    "Trebuchet MS",​sans-serif

    Now, depending on which one you would like to use, you could set it as most important like this:

    .form-all {
        font-family: Verdana !important;

    Do let us know if that helps.

    Best Regards,

  • Profile Image

    Answered by serhouse on November 20, 2014 at 04:56 PM

    Hi Ben,

    thank you for your assistance, it has worked out.



  • Profile Image

    Answered by Ben on November 20, 2014 at 05:10 PM

    Hi Sergey,

    You are welcome.

    I am glad to hear that :)

    Do let us know if you have any further questions.

    Best Regards,