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

    CSS Not Applied to Field Labels (font-family)

    Asked by rachelconnors on May 21, 2015 at 01:23 PM

    Hi!

    For the form I created today, the CSS is not updating the font on the field labels when it's published:

    http://www.jotform.com//?formID=51404584344150

    For this form I created previously, the CSS applies the Montserrat font to the field labels. 

    http://www.jotform.com//?formID=50536595927164#design

    http://www.yellowleafhammocks.com/pages/hammock-apprentice-application 

    I copy-pasted the same CSS to the new form and it's not working on the field labels. 

    Is this a problem with the new form designer tool? 

    Can you help me figure out where the problem is so I can get my page published asap? Thanks so much!

     

     --Rachel

    font field labels family form designer new form JotForm problem
  • Profile Image

    Answered by Syed on May 21, 2015 at 01:44 PM

    Hi Rachel;

           I apologizes for this issue you're currently facing. I checked your form, tried to change some CSS Selectors, and it worked. Please inject the following CSS Code to change your font to "Montserrat" for labels. Review the following screenshot for confirmation.

    .form-all {font-family : 'Montserrat' !important;}

    .form-label { font-family: 'Montserrat' !important;}

    I hope this helps. Please let us know if you need further assistance on this, we would be happy to assist you further.

     

    Thankyou,

  • Profile Image

    Answered by rachelconnors on May 21, 2015 at 02:18 PM

    THANKS SYED!!! LIFESAVER ;)

  • Profile Image

    Answered by Syed on May 21, 2015 at 02:19 PM

    You're welcome Rachel :)

    Let us know if you need any further assistance.

    Thanks!

  • Profile Image

    Answered by rachelconnors on May 21, 2015 at 02:43 PM

    Sorry one more quick q -- is there a way to make sure this is applied to the Thank You message after submission? Would prefer to have it as consistent as possible!! Thanks!

     

    Rach

  • Profile Image

    Answered by Syed on May 21, 2015 at 03:14 PM

    Hi Rachel;

            I would prefer to use custom URL option and use Montserrat font there. Unfortunately, you can't use external font there in Thankyou page. But you can use external URL and use custom font. I have made a code block for you to use just for main purpose is to use font as it shown on form.

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    @font-face {font-family : 'Montserrat';font-style : normal;font-weight : 400;src : local('Montserrat-Regular'), url(http://fonts.gstatic.com/s/montserrat/v5/zhcz-_WihjSQC0oHJ9TCYAzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2'), url(http://fonts.gstatic.com/s/montserrat/v5/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}

    @font-face {font-family : 'Montserrat';font-style : normal;font-weight : 700;src : local('Montserrat-Bold'), url(http://fonts.gstatic.com/s/montserrat/v5/IQHow_FEYlDC4Gzy_m8fcmaVI6zN22yiurzcBKxPjFE.woff2) format('woff2'), url(http://fonts.gstatic.com/s/montserrat/v5/IQHow_FEYlDC4Gzy_m8fcnbFhgvWbfSbdVg11QabG8w.woff) format('woff');}

    .form-all {font-family : 'Montserrat';}

    .form-label { font-family: 'Montserrat' !important;}

    </style>

    </head>

    <body>

    <div style="text-align: center;">

    <h1><span style="font-family: 'Montserrat' !important;">Thank You!</span></h1>

    </div>

    <div style="text-align: center;"><span style="font-family: 'Montserrat' !important;"> Your request has been received. </span></div>

    <div style="text-align: center;"><span style="font-family: 'Montserrat' !important;">The Hammock Concierge will contact you within one business day.</span></div>

    </body>

    </html>

    Output:

    Let us know, how it goes.

     

    Thankyou,

  • Profile Image

    Answered by rachelconnors on May 21, 2015 at 04:03 PM

    Oh thanks Syed! I am not sure that will work on this page? 

    http://www.yellowleafhammocks.com/pages/contact-us

    Because I don't think we want to send them to a different page after submission? Can that pop up in the same section of the page as the original form?

  • Profile Image

    Answered by Syed on May 21, 2015 at 04:37 PM

    Hi Rachel;

             You're right we need to design thankyou page separately to send users after submission. But the requirement you mentioned above to display thankyou pop up in the same section of the page, then we need to stick with basic font size, Or we can use images if you prefer, let me know. Review the following screenshot on how we can accompalish this.

    Thanks,