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

    Change the submit button font line height and other styles

    Asked by stringtheorist on June 26, 2016 at 05:31 AM

    How can I change the line height of the text on this button? I've tried using the Designer edit functions but line height always stays the same.

    https://eu.jotform.com//?formID=42885325372359

  • Profile Image

    Answered by flashim on June 26, 2016 at 07:46 AM

    Line height is the distance in pixels between 2 lines. Please check with the following image.

    You can edit the css as 

    .form-submit-button {

        margin-right : auto;

        line-height : 30px;

        font-size : 30px;

    }

    Let us know if this is what you are looking for. Thanks!

     

  • Profile Image

    Answered by JasonBa on June 26, 2016 at 09:58 AM

    In addition to my colleague's answer try to insert this CSS code. This will minimize the submit button height.

     .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {

    height: 44px !important;

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    You can change the value if you want.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 26, 2016 at 10:13 AM

    Please check out my colleague's solutions and let us know how it goes.

    Regards!

  • Profile Image

    Answered by stringtheorist on June 26, 2016 at 10:50 AM

    Thanks. I've tried these solutions and made some progress but the buttons still don't look right. I want all the font formatting to be the same. Please view these pages to see the errors:

     

    https://form.jotformeu.com/52683543918364 (font should be bold; button should be narrower)

    https://form.jotformeu.com/42885325372359 (line height is wrong)

    https://form.jotformeu.com/52683607053355 (line height and button width are wrong; font should be bold).

     

    I am also having difficulty integrating the Khand Google font of the buttons. This font appears in the editor but not in the live versions. Can you advise?

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 26, 2016 at 11:11 AM

    You have so many CSS codes injected in your form for the submit button field. Some of them are having conflicts and some are not properly declared which creates errors on the editor. So I went ahead and fix the submit buttons for you. 

    I have also added your custom Google font - Khand.

    The default font size on the CSS code is 30px, feel free to change it according to your preference. It is found on the injected CSS codes - bottom part.

    Kindly check your forms now and let us know if you need anything else.

    Regards!

  • Profile Image

    Answered by stringtheorist on June 26, 2016 at 01:08 PM

    Many thanks!

  • Profile Image
    JotForm Support

    Answered by Mike_G on June 26, 2016 at 01:11 PM

    We are glad that the solution provided by my colleague worked for you. Should you have any other questions or concerns, please feel free to contact us anytime.