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

    How to change iframe embed form field's font styles

    Asked by tannercwc on October 06, 2016 at 02:23 PM

    Hi

    We have inserted an iframe embed form into the black bar on homepage, however we are unable to style all the form field fonts.

    We want all form fields i.e. dropdown, calendar, text input to be a consistent font-family, weight, color, how do we do that? We have tried in all the settings and the CSS section but nothing seems to be working.

    We are waiting to launch the site asap so a fast reply would be very much appreciated! :)

    URL: http://charonneruthglass.myshopify.com/ 
    FRONTEND PASSWORD IS: test

    Page URL:
    http://charonneruthglass.myshopify.com/

    font iframe embed form field
  • Profile Image
    JotForm Support

    Answered by Welvin on October 06, 2016 at 05:31 PM

    For the entire form, you have to inject the following custom CSS codes:

    .form-all {

    font-family: cursive !important;

    font-weight: 700 !important;

    color: #000 !important;

    }

    For the placeholders, you can inject the following:

    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */

    font-family: cursive !important;

    font-weight: 700 !important;

    color: #000 !important;

    }

    ::-moz-placeholder { /* Firefox 19+ */

    font-family: cursive !important;

    font-weight: 700 !important;

    color: #000 !important;

    }

    :-ms-input-placeholder { /* IE 10+ */

    font-family: cursive !important;

    font-weight: 700 !important;

    color: #000 !important;

    }

    :-moz-placeholder { /* Firefox 18- */

    font-family: cursive !important;

    font-weight: 700 !important;

    color: #000 !important;

    }

    Here's how: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    For the Checkbox in Dropdown and Date Picker widgets, you have to inject the following in the CSS area of the widget:

    body {

    font-family: cursive !important;

    font-weight: 700 !important;

    color: #000 !important;

    }

     

    Just change or add your own styles. 

    Let us know if you need further help.