JotForm User Guide / Advanced Features /

Customize Your Form Using Custom CSS Codes

Customize Your Form Using Custom CSS Codes

UPDATE: Let's create fantastic forms with Form Designer video course which allows you to generate beautiful form designs without knowledge of CSS!

First, you need to learn how to inject custom CSS on your form before you can start customizing your form using the CSS codes provided below.

Set a Background Image to the Page

.supernova {
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;}

Replace the URL with your background image.

Demo here

Make Page Background Transparent

.supernova {

Remove the Spacing Around the Form

.jotform-form {

Make Form Background Transparent

.form-all {

Change the Header Background Color

Change the Subheader Text Color
.form-subHeader {color:#2408FC !important;}

Change all the Sub Label Color
.form-sub-label {color:#FFCC66;}

Change the Yellow Highlight Effect Color
.form-line-active {background:#baffb9;}

Change the Form Required Star Color
.form-required {color: blue !important;}

Remove the Red Background on Error Messages
.form-line-error {background:transparent;}

Align Form to the Left
.form-all {margin:0;}
Preview Here

Instantly Create Two Column Layout on Shrunken Fields
.form-line-column {width: 50%;}.form-line-column:nth-child(even) {clear: left;}

Demo here

Make credit card fields in all payment integration mobile responsive

Copy the CSS codes here:

Demo here

If you can't find the CSS code you need for your form or if you need help with customizing your form, feel free to leave comments below.

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

    I would like to change the size of the image window. Right now, you click on the preview image and it opens an enormous window with my product image centered. I would like that product image window to be the size of the image.

  • shafikanordinn

    i’ve change the font. but when i want to fill up form, the font goes back to normal.

  • danilo.alves

    Alinhar o formulário à direita

  • megatype.publishing

    How do I make the form smaller?

  • giaktowns

    When my form is displayed on my website via computer/laptop, there is a lot of extra space at the bottom of the page below my form.. How do I remove the extra space..

  • qthird

    I would like the font of the last name and first name to be bigger

  • scherschel

    I'd like to hide the address information on the credit card form since it isn't needed to process the payment.

  • Terry_Ryan

    Some of the areas in my form, like the phone number and the reason for visit, you can't see when you are typing in the information. It looks like nothing is able to be typed in that area. But when I submit the form, I can see that there is text typed there. How do I fix this?

  • CCUinc

    I need a custom CSS to size the page when it opens to the form width so it does not open in a full page...

  • Emerald_Carrying_Co


    I have an Input Table in which I wish to control the width of the columns individually to avoid the user having scroll the table to the right to see the last field.

    I have the following field id's:
    #input_98_0_0, #input_98_0_1, #input_98_0_2, #input_98_0_3, #input_98_0_4, #input_98_0_5, #input_98_1_0, #input_98_1_1, #input_98_1_2, #input_98_1_3, #input_98_1_4, #input_98_1_5, #input_98_2_0, #input_98_2_1, #input_98_2_2, #input_98_2_3, #input_98_2_4, #input_98_2_5,

    and so on.

    I want set the width of columns 2,3,4 & 5

    Can you please help with the CSS code to do this ?

    Thanks in advance

  • clinical.adamspt

    Hello, I am in need of being able to customize the colors on the multiselect grid widget. Please provide the CSS code needed in order to do so. I only know who to change the color by changing the name of the font color to the HEX code I'd want. Thank you in advance.

  • ashley.eylenburg

    Hi, I'd like to add a button to my form which opens a separate URL in a separate browser window. I'd like to customize the buttom label. This is so a user can click the button to open a web page for recommendations before answering the next set of questions on my form. Thanks.

  • sfranklin977

    I have 11 checkboxes in one column layout. When I attempt to shrink the column, one of the checkboxes is immediately moved out of that column to a second column. I need to prevent that from happening so I can shrink that column in order to add a second column beside it with different checkboxes. Hope that makes sense. All of these checkboxes are mapped to a pdf document.

  • thegentledragonnetwork

    The form I have created, when inputting information is WHITE text on a WHITE background. I understand I can Inject Customer CSS code to change but what code???? Please help. Ready to send apart from this... Thanks.

  • ProgIntCSC

    Hi!... I'm trying to put BOLD in an specific label, how can I do it?... I don't want all the labels to appear bold, I just need an specific word of a label to appear in bold. My text is

    "1. Payment for class impartation or payment for group accompaniment"

    I want the number 1 to appear in bold and if possible in other color too. The label ID is #input_483

    Is there a way I can do this?... Thank you!

  • Prunera

    I have added Square Payment to my order form. It shows the total amount of the calculated order in the window with USD at the far right side. I would like to add a dollar sign in front of the number that get calculated in there, along with a comma for any amount over $1,000 and a decimal point before any change. Is there a way to edit the css code? (ps I am a total newb when it comes to coding)

  • NeilDep

    I would like to be able to hide the Producr Desciption box on my form. Is this possible?

  • LEGER_Sebastien

    Hello,on the free version, can we do this?There is no textarea to change the style...

  • tsgreen

    When I create the form and preview as it would appear on a phone, some of the fields are missing or the format is too far to the right to be read. Can you help me adjust this?

  • madison.skyline

    I am looking to figure out in the CC form how to add in a company name and email address as a required field for a customer to fill out

  • Holly Johnson

    Is there a way to add custom colors to the Rich Text Editor? I would like to allow our form builders to use our brand red rather than the generic red allowed for text color OR for fill color.

  • rdge

    How can you make the input fields and text of the input fields larger?

  • Adams_Andy

    I've been using the Form Calculation Widget (which is fantastic!) and I'd love to be able to keep the field visible while preventing the user from adjusting the numbers in that field.

    For instance:

    Item Price (filled in by user)
    Quantity (filled in by user)
    Subtotal (calculated from the users inputs above - BUT they can also type in a new number here)

    Here's a link to my form


  • candleman

    and also, i don't want a price showing on my products as i have different prices for different people. Can i hide that or at least make it not say free

  • candleman

    can i change the background of my product?

  • karissatattoo

    When I select a font, it does not stay when I hit publish?

  • wcmarrocco

    May I please have the css code to edit subheader font size?

    Thank you.


  • lshirling

    On my form I set up a table. The table looks fine but when I preview it you see 2 narrow fields below it. I don't know what they are but I would like to get rid of them.

    Thanks in advance,

  • etab

    I'd like to change the color of the section collapse header background. What is the code?

  • carlyhavard

    Hello, initially the form looked perfect but I have had a few dummy runs with friends and the feedback is mainly positive but on the mobile questionnaire some of the words have become misaligned, ie) drugs is now drug and the s is on the following line. Any advice would be fab. Also can you tell if the signature box is working? 1 of my friends had a problem with it. Thanks, look forward to your help. Best wishes, Carly.

  • eduddaguiar

    Bom dia!
    Na opção de layout cartão eu não consigo alterar a imagem de agredeciemento.
    Como posso alterar as dimensões da imagem?

  • selectpq


    I am using 'spreadsheet to form' but can't find a way to increase the textbox height to 42px.

    It is not an option in the Advanced Designer.

    Can anyone tell me the CSS code to inject? Or another way to do it?

    Thanks for any help. :-)

  • dawn.townsend

    On my jot form, I am trying to put my salon name in the body context on my covid-19 form. How do I do that?
    Thank you,

  • Cityimaging

    I would like to add a sub label to a widget please.

  • NicolCorcExpo

    I'm not sure if this is the right place to put this question, but it seems it might be. I use collapsible sections a lot and have often wondered if there is a way to, I'm guessing using CSS, to create nested collapsible sections? I'm thinking so that they'd look something like the images here:

    Further, is there a way to assign specific colors by section and/or level?


  • rugareruwodo

    Please help i want my form to use a font which is not listed under the font list.
    It is called Raleway

    what code do i need to use to change the whole form to do this.


  • info.balancedinvest

    I changed the form's CCS code, but when previewing the form it does not change the style I coded for. Any help would be appreciated!

  • LEDAGrants

    Hi, how would I add a block to the address element, for example if I wanted to add a block to ask about what parish they are located in. There seems to be no way to add it using the preset options so how could I code this in using CSS?


  • ChristChurchAnglican

    Hello, I need to change the colour of the background of the column labels. Can you please advise?


  • jmmi2757

    Sugerencias para mejorar y alguna pregunta:

    1º Cómo se puede cambiar fuente y tamaño de las cajas de textos donde escribe el cliente y no me refiero a estilo de las etiquetas.

    2º Al duplicar cualquier campo etc. debería ponerse también su tamaño igual no dibujarlo en formulario final, con un click debiera ser suficiente.

    3º Añadir páginas sueltas de formularios propios en otros sin tener que clonar todo o volver a poner campos uno a uno.

    4º Poder seleccionar en panel izquierdo (diseño) para duplicar campos en grupos grandes no individualmente.

    5º Ampliar los comandos de condiciones lógicas para adaptarlos a las necesidades.


  • DeMelksnor

    which CSS to add to the inventory widget to add options to the product?
    Now there's only one quantity selection field. I want to add a text description of the product. Sometimes I want to add an option to the product.

  • bintalrohjabar

    How To change Name in one Fields?

  • WayDigital

    how to validate if certain fields are filled and if some are not filled, flag.

  • Eklincoltd

    How can I make my logo visible after creation.

  • paulmarsh

    Hi i want to change the size of the input fields name, email, phone number they don't look great and also they are too small hope you can help. Thank you

  • assistenciasaudescs


    How can I change the language of the Appointments Element to Portuguese (Brazil)?

    Best regards

  • SevenKeysHomes

    I am using the widget Narrative Fields and want to make its template text the same as my form layout which is Arial 14. What is the custom CSS Code to do this?

  • sara_chejanovich

    Hi I would like to make some field on my form, to be defaulted to an X in red (to show where the customer has to sign on a particular page). I cannot find how to do so on CSS for my form.
    the field I am triyng to make it appear in a printed X red is #input_736

    My form is

    can you help me with this?

    Best Regards

  • anjarmath

    How can i customize my submit button?

  • cjadeltas1975

    How can I change a number format to a currency format such as $###.##? I've tried the text and the number elements with no luck.