CSS Not Applied to Field Labels (font-family)

  • Profile Image
    rachelconnors
    Asked 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

  • Profile Image
    Syed
    Answered 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
    rachelconnors
    Answered on May 21, 2015 at 02:18 PM

    THANKS SYED!!! LIFESAVER ;)

  • Profile Image
    Syed
    Answered on May 21, 2015 at 02:19 PM

    You're welcome Rachel :)

    Let us know if you need any further assistance.

    Thanks!

  • Profile Image
    rachelconnors
    Answered 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
    Syed
    Answered 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
    rachelconnors
    Answered 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
    Syed
    Answered 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,