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.

Contact Support:
Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:
Contact JotForm Support: https://www.jotform.com/contact/

Send Comment

167 Comments...

See all comments
  • HatchingDragonsNursery

    Hi, I want to inject some css on my form, but I think that the form designer has a new appearance and I haven't been able to find where to do it. Could you please advise?

    Many thanks

  • margery.zeller1

    Perfect! Thanks so much!

  • chuntana_sa

    How to set width of each Text box in Configurable List Widget?

  • icochrane

    I have managed to set the column width but the setting applies to all table. So the first table is OK but the second table is not. How do I set the column widths in a specific table ?

    Trying to sort out the table widths has taken far to long for what is a very fundamental requirement. Easy to use apart from this one fundamental issue.

  • Crescog

    .form-textbox{text-transform:uppercase;}

    aplicar este código también cambiará a mayúsculas los correos electrónicos?

    quiero los demás textos en mayúsculas excepto los correos electrónicos

  • Ilona_ilona

    It worked on the form, however, when published I can see it. How can I remove "free" from the published version.

  • willem.nordeje

    HI

    I would like to design this form

    Chicken with Filling
    (And then Filling type and QTY)
    Ie
    Bacon & Cheese (Qty)
    Ham Cheese (QTY)

    Your help is valued

  • diegomtzm324

    How can I make the size of "TOTAL" bigger ?

  • Lillebergen

    How to remove the checkbox in the productlist (the one in front of the image)? This code does nothing :( I'm editing the "Pizza order form".

    .form-product-item input[type="checkbox"] {

    display: none;

    }

  • moshino0626

    I wanted to change the select column to the written style. How should I do it?

  • sohailakbar795

    Hi how can we hide back button in quiz so that user can not go back.

  • Martin_Lauren

    I'm trying to find this and even upgraded my plan thinking i needed to do that to do custom CSS to style my form to match my site but i still can't find this feature anywhere ,and all the CSS i'm trying to add to my form isn't working. please help

  • Silia

    hi I am trying to do a practice test with my form and it comes back with order ID is missing from my submission form?? How do I set this up please

  • MasortiOlami

    Hi,
    I"m using the address field for my form (here: https://form.jotform.com/201621949160048), but for the country drop-down field, i'm noticing that it's doesn't take on the same formatting as my other fields. I've managed to add CSS so that the background of the field box is the same gray, but how can i make it so the box size and font is like all of the other fields?

    Thanks,
    Tehila

  • vannson.nicolas

    Dear Staff,

    I would like to create a slider where I can add words on top of it such as bad for 0 and 10 for excellent. I would like also to personnalized the slider with a 0.1 step instead of 1. Is that possible ?

    Thank you

  • Hoerrner

    How do I increase the width of each of the fields, to the same width, to cover about 80% of the width of the survey?

  • Jo Ostlere

    Help - I’ve created a new form but not all the boxes are showing on the email after a client has submitted - how do I sort this?

  • lai0601

    How to create a question with eliminate choice? For example, registration of assignment topic. Once a respondent chosen an option, this option will no longer available for the next respondent to choose. Please advise. Thank you.

  • EMGuidance

    how do i increase the max length on the multiple choice header field

  • rickazrin

    I need help customizing this table so the width is smaller for the 2nd column than the third column. https://hipaa.jotform.com/201566757644161

    this is for the table with field unique name: pleaseIndicate

  • NakedPlanet

    Do I overwrite the existing CSS code with the one I wish to inject or add it to the coding that is already there?

  • primed_community

    Couldn't find an option in the css to change the color/line color/background color of radio button select circles. Any help?

  • KendalSnow

    Not all elements have STYLE tab, why not? I wanted to reduce the size of a paragraph text box...

    .form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input, .form-spinner input{

    width:200px;/* to increase the width of your Input table*/

    height:50px;/* to increase the height of your Input table*/

    But cannot inject it?

  • Dave4777

    I had done this before and it worked :) Now I have added some products and things collapsed and I tried adding it again, no result. Please help ?
    https://form.jotform.com/201087224720143

  • RCSD81

    Is there a way to add a CSS code into my form so that users can pick 2 dates within an appointment calendar?:

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

  • Noorcakesbakes

    How can I remove the area code from the Phone number element?

  • ramongrf

    Thank you.

  • cheryl33710

    what line do you want me to inject this code into?

  • Cwpmackays

    Hi,
    I have a list of subtotals values like 25.00, 50.00 , 35.00, 110.00 however some cells show the decimal points and others don't so I get 25.00 , 50, 35.00, 110 which doesn't look good when they are aligned vertically. As far as I can see all cells are set up identically, each using a calculation widget to build a value (basic addition and multiplication in all cases). How can I get them to always show two decimal places even if the decimal is .00 ?
    Regards

  • jwajibul

    Hello,

    Is there a form ,widget, or feature, that allows me to input a table with a dollar amount? Specifically, I would like to include income sources in one column and dollar amount in another column.

  • assistenciasaudescs

    Hello,

    How can I change the months language to Portuguese (Brazil) on the Appointment Element?

    Best regards

  • 01AMADA

    Como puedo insertar un contrato

  • GroWise

    Hi,

    I am using the Passage Test plugin and want to change the fill-in-the-blanks colour box. Is it possible??

  • shamusm

    Is it possible for the column width of each column in the Spreadsheet widget to resize based on the pre-populated data?

    For example, if Column A is pre-populated with 'ABCDEFGHIJKLM', then the column width is wide enough to fully display 'ABCDEFGHIJKLM'.

    Alternatively, is it possible to assign column widths to each column of the Spreadsheet widget?

    Thank you.

  • JeffBender

    Can you give me a CSS code to increase the font size of hoover text? THANKS

  • hr.zeejob

    I WANT TO USE TERMS AND CONDITION WIDGET AS A POPUP WINDOW FROM THE FORM.
    CAN YOU PLEASE HELP ME

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