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 in this guide: Customize your Form using Custom CSS Codes. In this guide, you'll learn how to inject custom CSS codes into the form.

1. In the form builder, click the Form Designer 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.

Related Guide: How to Inject CSS Codes to Widgets.

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:

Send Comment


See all comments
  • Hire_Horatio


    I'm trying to make the "input Table" column width wider so the dropdown looks better, but it says it can only be done with a CSS code and I don't see the CSS option on my Form Builder

  • kellydunleavy1979

    Hi my name is Kelly I’m having dramas filling out this phone my phone number is 0423 876 388 and my email address is

  • radiotendadeabraao

    como colocar estilo css no campo
    para cpf000.000.000-00

  • rickswenson2

    products 3,4,5 of my current form d not show the item subtotal field, even though I have selected YES on the tab in the edit field.

    2nd problem, I am writing this form on my desktop computer, but the images for the products are not scaled large enough on the mobile phone.

    The CSS script someone sent to me, which I entered, does not seem to be "doing the trick"

    Please assist. Thanks.

  • Jules

    I stumbled into your site while searching CSS and like what you offer. I enjoy playing with CSS and would certainly be interested exploring how I can use your integrations

  • 5kamalini5

    Hi there,
    On the Element 'Appointment', instead of giving the user the possibility of choosing a time, I would like to give them the possibility of choosing a slot. We'd have 6 slots available per day, and only Mondays would be available, so 6 slots per Monday. This means that they would pick a Monday and choose from slot 1 to slot 6. Would that be possible?
    Thank you!
    Kind regards,

  • steskw

    i want to divide the row into small boxes. How to do that?

  • 4WARDS

    Is custom css only an option for payed plans?
    My free plan doesn't show a field to edit anything.


  • jgraham606

    Is there a way to do an on hand inventory?

  • assets55ltd

    Is it possible to reset some questions (but not others). If a user changes the "Assets Category" on my form I'd like to make the "Critical Impact" field back to "Please Select".

    Can I do this through CSS? I've never written in CSS but am willing to give it a shot if you can guide me.

    I've read all of the queries below and none have anything which can be adapted.


  • Prabhubaa

    How to change the colour of the text and background of the Fancy Large Input Widget
    CSS or any other way?
    What should be the CSS Code and Where to paste it to activate it.

  • Calkins

    2 questions:
    1) Is there any way to remove the powered by Jotform from the bottom of my form?
    2) Can I change the color of the submit button? Thanks

  • Darlington_Kasumba

    CSS wont update table.


    I added css for the th but it wont take effect

    Same applies for the checkboxes

  • nirradreltub

    thank you! I entered div#cid_176 {
    margin-top: -23px !important;
    div#text_128 {
    margin-top: -33px !important;
    div#text_125 {
    margin-top: -29px !important;
    however none of the spacing changed. I tried it in two forms. Hmmm.

  • teresa.meza

    I need help making the Gift Registry Widget product field longer. I don't know which CSS code to use to do this. I have enough information in these fields that I need the product information to be twice as long.

    Thanks for any help!

  • Salema01

    How do I add a new Project code number or a new account number to our forms? We have a new Project code number that needs to be added.

  • georgias714

    Thank you so much!

  • Mendell_Gosnell

    How can I change the color of the header without changing anything else.
    I did change the color but once this is done, the format of the boxes below gets completely

  • bestforms

    Hello, how to remove the background and frame of form!? Thank you!

  • monti.united.experts

    Hi there
    I wanna ask about how to make my all my form's elements alignment from right to left ( for Arabic language forms ) put in mind I would like to have all my label to be from right to left as well

  • chapchap

    Is it possible to add hyperlink in spreadsheet widget cell?

  • 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


    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


    I would like to design this form

    Chicken with Filling
    (And then Filling type and QTY)
    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

    I"m using the address field for my form (here:, 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?


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

    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 ?

  • RCSD81

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

  • 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

    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 ?