How to change iframe embed form field's font styles

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

  • Profile Image
    Welvin
    Answered 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.