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 CSS 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.


Please follow the steps below:

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


2. Click on the STYLES tab, scroll down a bit 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

132 Comments...

See all comments
  • premroong

    ฉันสามารถสร้างปุ่มพิมพ์เอกสาร และพิมพ์เป็นไฟล์เอกสาร PDF ได้หรือไม่

  • guru6t9

    how to display in superscript in single choice entry?

  • JavierV100

    Hi.

    How can I populate specific hours. Example only the following hours 9:30, 11:00, 1pm, 3pm, 4pm.

    Thank you

  • jamie.hannath

    Hi,

    I want to use the 'Conditions' functions to hide options available on a drop down box but I don't appear able to. My first drop box is 'Line/Area' so options are 'Line 1', 'Line 2', 'Line 3' etc. My next drop down box contains all my assets/machines so example 'Metal detector', 'Conveyor', 'Labeller' etc. When I select the line/area I want all the machines/assets that are not in that area to be hidden from the drop down box. I understand I can create different drop down boxes for each area then hide all the ones that are not relevant but then when the data is exported into google sheets it leaves empty gaps everywhere.

    Any help would be appreciated!

    Thanks Jamie

  • Karen

    I’ve used one of your standard forms but don’t know how to change the date from French to English once published and also selection months to English rather than French? How am I able to get the questions formatted so doesn’t cut off letters too? If I have to upgrade or pay a one off fee to get these corrected happy to do so. As reallly like your site/app. This is all relatively new to me. Thank you Karen

  • davidakoontz

    I do NOT see a "Styles" tab on the properties page (like shown in example above) - why?

    I'd like to add the ability to force text into upper case.

    Maybe this should be a feature of the Input Mask e.g. AAAA -> mask for upper case.

  • iklansajadisini

    Hallo please widget html telpon support to applikasih html

  • Kalyan Ram

    Hi
    In the attached form, I want to make PPS Number a numeric and text field. Unable to change it,
    I have used an existing 'email address' field. It always says to enter a valid email address.
    Any help would be appreciated.
    Regards
    kalyan

  • Bhare

    I'm trying to add CSS code for each of the answers for the "Non Sport Specific Scholarships. I've tried entering code for the first one, but nothing is appearing. Are you able to help me get the first one set up to include the following content:

    Established with the Western Colorado University Foundation to perpetuate the memory of William Charlesworth, a 1954 graduate of Western. To provide financial assistance to student-athletes pursuing majors in mathematics or related natural sciences.

    ELIGIBILITY:
    • Major: Pursuing a math or science major
    • Need: Demonstrates a need for financial assistance
    • Athletics: Demonstrates an interest and is active in organized athletics
    • Year in School (after completion of current spring semester): Incoming freshmen accepted to Western to Seniors are eligible; preference given to incoming freshmen
    • Residence: Preference given to applicants from Delta County, the Western Slope of Colorado, and Colorado.
    • Other: Preference given to applicants whose study time is limited by family obligations or the need to earn income.

    SELECTION COMMITTEE:
    Chaired by the chairman of the Department of Natural and Environmental Sciences, includes a representative from the Athletic Department appointed by the Athletic Director, and a representative from the Mathematics Department.

    AWARD:
    $1,100 for 2020-2021
    Depends on fund availability

    Thanks!!!

  • Lrichmond

    I have entered the code as outlined, however, it is not changing my form. Please see form at https://form.jotform.com/Lrichmond/clone-of-room-rental-fee---occc and let me know what I have done wrong.

  • stevekjrs

    I want to add value in a field and want to make it by default and should not be editable

  • CaliServices

    Hi,

    There is no "Styles" tab in the version I have.

    It has the major headings "Color", "Image","Video" and "Layout". Then sub headings "Themes" and "Custom".

    I cannot find an CSS box in any of these but I may be looking in the wrong place.

  • gahoppe

    Where is the "styles" tab? In the form designer I only see "color, Image, Video, Layout" options... there is no "Styles" area to input css as there is in the picture above?

  • KromahStudio

    How to add CSS for to date and time so that people are not able to book the same hours in the same date??

  • SMART_GENGE

    How to customize quantities with half?

  • HRCCo

    HI
    How i can move text bot only in Arabic from left to right ?

  • robynlawton

    After following these instructions fully, the field input width is still the same after pressing save. Do I have to go out of the form or refresh for this to take place. The current size of the input field is too small to fit names, phone and email when the form is printed. https://www.jotform.com/build/92967230251861

  • 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?