JotForm User Guide / Advanced Features /

How to Inject Custom CSS Codes

How to Inject Custom CSS Codes

Jotform gives you a wide variety of ways to customize how a form is rendered. An example of customization can be found on this guide: Customize your Form using Custom CSS Codes. In this guide, you'll learn how to inject a custom CSS codes to the form.

Video Instruction


Please follow the steps below:

1. In the form builder, click the Design icon.


2. Click on the CSS tab, and paste the code in the "Inject Custom CSS" area.


3. Make sure to click on the Save button.


Having difficulties with the custom CSS? Please let us know in the comment box below or heads up to our support forum and create a new post explaining your issue.

Send Comment

116 Comments...

See all comments
  • park14jobs

    was trying to figure out how to resize the picture uploaded to 2 x 2 inches???? seems the pdf editor is has no options to do this at all, btw its a resume to fill up an application. everytime i got an email the picture is too big for pdf version.

  • Sharmili

    The header image ( image.header)is not compatible in the mobile view. Please help me

  • rgannon

    Looks like it did the trick..... Thanks

  • Rick

    How can I change the color of the text and lines. Different widgets appear to come with different default colors. I understand where I need to type the CSS code but what code do I write? Thanks

  • TonyaB88

    its not showing up still . Im trying to use the simple Pay pal form with this

  • bondapp147

    Our forms require some financial data (in currencies). The UX will be enhanced if we insert commas between thousands (ie. instead of a home purchase price of 1000000; it displays as 1,000,000). Can you assist? I still need these to be used in calculations so can't use the widget, it will need to be a css solve.

  • sbarbara

    Hi,
    i want to capitalize the first word of my options. How can i do that?
    For example:
    option 1 "uppercase" "lowercas"
    opton 2 TEST choose this options
    Can you help me?
    Thanks

  • RT

    I want to change the color of the dropdown menu field, to match the color of the option chosen in the options list. Do you have any idea how to do this? I'm clueless!

  • RIDENGO

    I'm using the Date Reservation form. however, once someone picks a day. No one else can use that day. I need to be able to have many date reservations for the same day.
    Can you tell me how to fix this issue.

    thank you
    Brenda Sarconi
    Ride N Go

  • bayviewboom

    is that the best place to put custom css for the fixed 'feedback' button? (i mean, the button that opens the form, not the form itself.)

  • RIDENGO

    I developed a job application, while sending out to be completed a message shows up with an error message. where do I change the setting on that..

    Also, how you do I change the clear the form.. the written items are removed but not the circle.
    Please help
    Thank you

  • lynnephelps

    I too would like to know how to reduce the top margin of my JotForms. I can't see the answer below, it is restricted.

  • mrggarrettp

    The custom CSS injection option isn't available for Single Question forms. All my Single Question Jotforms have way too large of a top margin. How can I fix them?

  • pennpotter

    It worked perfectly. Thank you!

  • Mariedyth

    I am looking to customize the widgets in my form, to match the font family and style that is used in the rest of the form, how? Can you please provide a sample? TIA!

    https://form.jotform.com/90725876053160

  • Linda Collura

    My form does not populate the phone number after it's been published.

  • TygrScott

    The only tabs I have are "Themes" and "Custom" no CSS

  • mcduey

    I need to remove prices and "free" from our page. This was done but it didnt seem to stick

    https://www.jotform.com/build/90274545431253

  • ajp4990

    I am trying to put Hebrew text in my form in a few places. Here is the html I have for a Hebrew keyboard. It does not seem to work.




    Hebrew Keyboard






    field_name ="text"; // name of default field

    // set name of selected field
    function set_field(fld) {
    field_name=fld;
    }

    // put selected letter in preselected field
    function Put_letter(f,v) {
    f.elements[field_name].value+=v.charAt(0);
    }
    function Put_space(f) {
    f.elements[field_name].value+=" ";
    }
    // remove letter from preselected field
    function Remove_letter(f) {
    var s,j;
    s="";
    j=f.elements[field_name].value.length;
    for (i=0; i

  • silaturahim

    Hi, How can i make integration between driving distance widget to form calculation ? as if once the distance calculated, it's show ing at the form calculatioin? please help. how?

  • nicolassoong

    Hi, I'm using the table option to get the answers from my client but how do I limit the entry to only values ? For eg. Minimum 0 - Maximum 2 for individual cells?

    Please help! thank you.

  • nicolassoong

    Hi, i have copied the submit code into the css part. However, it doesn't seems to show the submit button at the end of the page. Please help. Thank you.

  • KYBach

    I'm trying to create a PayPal link to collect an application fee for my form. I've tried every option on your site with no success. Can you help? Thanks!

    Kentucky Bach Choir
    Marlon Hurst
    Richard Sowers

  • abennet4

    am aware of how to edit custom CSS. What I need to know is how to copy a complete form style settings, theme and inject it into another form? All theme/style settings

  • 8BATest

    I am trying to print out the blank fillable form so that I can have people write in their answers. I need the font to be larger since the default is tiny. When I insert the CSS that you have suggested:

    @media print {

    .form-label-top, .form-label-left, .form-label-right {

    font-size: 16pt !important;

    }

    }

    Nothing changes -- even though I've saved it.

  • MadeshGowda

    I want to remove last name tab, how to do that

  • calin_caligrafik

    Is this up to date? I don't see 'styles' and 'css' in my form editor drawer. Or is this available only on paid plans?

  • EvaHolm

    Hello
    Can any of you help me with the css function text transform? I would like to transform input from all text fields to first lower cases and then capitalize to avoid inputs in all caps.

  • FuturisticInfinity

    Can anyone help me with css code i picked a multi option for my form but i really need the option to be in USD currency when i come through to my spread sheet. Is this possible? All help will be appreciated
    Thanks

  • jimedington

    I got the code to work, BUT I'm having issues getting copied/pasted data to format.

  • itsabary

    Where do I find a CSS section in the Designer?

  • HussainAlbarakaty

    If I want to custom one field, how can I find the selector ?

  • jmh_jmh

    Editing form CSS is not there. Are you going to fix it and if yes, when?

  • vmalinski

    Hey Guys,
    This button to see custom CSS is not there anymore :(
    Has anyone figured out where we can now add custom CSS to Jotform....
    I just spent the last hour trying to figure it out.

  • lisahumbert

    Can you help me get rid of the grey color in the questions that have a input grid?

    Thank you!

    https://www.jotform.com/build/82256333706153?iak=931841542fc4ee3f6e0cd024a32a4481-6669cfa3d2e96047

  • lisahumbert

    How do I change the color of the basic Input Table and the font color?

    Thank you,

    Lisa.Humbert@bridgefinancialstrategies.com

  • georgie_marques

    Hi,

    I want to use the preview before submit widget but would only like the preview to show the fields that have been filled rather than a preview of the entire form. Is this possible?

    https://form.myjotform.com/81614570741556

  • talents

    I can't find the CSS tab.. did you change the design?

  • alphataumedical

    This is not possible in my form https://www.jotform.com/build/81982792368474. I would like to change the direction of the form going from right to left.

  • Nathan_Higgs

    I am not understanding. I want the customer to be able to edit their entry incase of an update or a incorrect form that was created.

  • Nathan_Higgs

    I just want them to be able to edit their content they put into the form. Not the form itself.

  • Lijn58

    I want the filled in names to appear automaticly in capitals. How do I do this?

  • illumin8nz

    I would like for customers to select their array of multi-choice selections that reflect their design requirements and then, I would like those selections to determine which design options that are available for them...

    i.e. when their floor area is large and they want really nice feature lighting, the cheaper design options become unavailable...

    How would I do this? Would I do this with CSS Coding?

  • adawson64843

    i just want to make the form answer spaces longer to that all of the name that ill be putting in them will show and am not sure how to do that

  • flydiscount

    how to change the height of the form

  • danringer

    I am using your forms to collect sales information. How do I get the numbers to show up with commas and/or add currency $

    ie: $156,688 vs 156688

  • misdmaverick

    I copied a form template which uses the submit button to send to paypal. I need this to change to just submit the form data to the already defined email addresses (notification and email of user filling out and submitting the form. How do I change it to stop sending to paypal? I have never used CSS or PHP, so I though it was a defined function/widget/etc. I could choose. Thanks.

  • Caloykokoy

    not working :(

  • enzojacinto

    When i put Image Upload Preview appear the image on screen. Its possible or exit the same stuff but for videos?
    What exist dont show the videos on screen just appear the link of video.

    Thank you

  • stevieboy63

    hi new here,

    to auto capitalize simply
    click on your name field
    properties
    advanced
    expand field details at the bottom - find the field ids
    should be like #input_1 or similar
    close box
    go to form designer (paint roller icon)
    choose css
    then paste into
    1
    #input_1{text-transform:capitalize;}
    etc for each name field you want first letter capitalized
    bingo!