Customize Your Form Using Custom CSS Codes

Last Update: March 2, 2017

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 {

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


krecavd (March 19, 2011 at 03:15 PM)

I Want to Center All the Fields + I want to Add A Background Image for which the above code is not working

shopwisely16 (July 11, 2011 at 11:33 AM)

hello!!! so sorry to bother i still dont know how to use it... i just wanted to use my background like this..¤t=pretty-1.gif

thank you so much for the help.. :)

View Answer

Rich (February 05, 2012 at 10:26 AM)

Anyone know the CSS code for changing the color of the page break "Back" and "Next" buttons?

thanks in advance.

View Answer

sittercritter (March 01, 2012 at 03:55 PM)

You guys are great! I am told that the dollar sign and dollar amount (the prices) are so gray that older people and people with so-so eyesight cannot read the prices in my payment form. How can I change the size and color of the font for these?

View Answer

slam_tilt (March 26, 2012 at 05:49 PM)

I have a dark background colour on my page yet when ever I click in the field it turns the form white. How do I stop this from happening with inject custom CSS?

View Answer

FitchLegalGroup (April 01, 2012 at 04:33 AM)

Folks I insert the form embed script, save the page yet all I get is a small yellow box with the word script in it. I cannot get the form to present as it should. Please help

View Answer

claudio (May 14, 2012 at 11:44 PM)

I must say thank you for this very educational site, i know somebody learned a lot out of your blog thank you for sharing. meladerm

hdinwiddie (June 14, 2012 at 07:01 PM)

Hi. I have read a thread or two about changing the color of the header background and placing an image instead, and most closely to my question, is changing the color of the SUB-header font. What's I need to do, please, is to change the color of the font on the Header itself...not sub-header. I'm using the Pastel (gray header) theme/template; the font shows up a beautiful burnt orange color when editing the form, but, when I go to view it as a user would view, ONLY the sub-header is burnt orange the rest is dark gray. Please help. :-)

View Answer

YummyGarden (August 15, 2012 at 06:44 PM)

How do I change just the color of my form background? Right now it's a nasty pastel blue. :-(

View Answer

YummyGarden (August 15, 2012 at 07:08 PM)


I tried this and accomplished the desired result, but unfortunately now the question font turns gray and this color sort of blends in with my background. How do I keep the font from changing color whenever a required question is skipped? Or how do I change the color of the question text?


View Answer

YummyGarden (August 15, 2012 at 07:14 PM)

When my application opens, you can see the outside surrounding area outside of the form.. and it is all white. It doesn't really look professional. How do I change either the size of my form or the surrounding color?

View Answer

hawleysigns (April 02, 2013 at 10:15 AM)

Two things not covered here are how to css the form field labels, and how to css the states of the form field titles. (when you click in a field which is required the color of the text changes. Even if you target and change the color of the text it has a briefe 2 seconds where it clicks to the default color. How do you keep the text the same color regardless of :selected :active etc...?

View Answer

webulosity (April 29, 2013 at 05:56 PM)

Hi, can I use the css to change the dimensions of the answer fields - I would like to make the fields bigger so they are more visible on smart phones... Thanks in advance :)

View Answer

zeraph (May 07, 2013 at 06:04 PM)

For everyone with questions about specific changes they want to make in the CSS:

Use a Webmaster extension for Firefox or Chrome (Firebug, Webmaster Tools, etc)- Once this is installed, view your form ON your site and right click the element you wish to change, select "Inspect Element." This will show you what CSS is being used to style the element. That is what you want to override when you inject custom CSS. You can even play with the numbers to see what you like before you make changes.

Manthan (September 21, 2013 at 02:44 AM)

Any attractive one available for our store Oshopindia?


showmansh (December 15, 2013 at 02:46 PM)

how can I add a company logo to the top of the page, small gif image about 100 x 100 pics

View Answer

georgeb (December 20, 2013 at 10:09 AM)

How can I use the same color as the background image?

I imputed the css coding as shown above and it isnt doing anything.

View Answer

averis (February 05, 2014 at 06:56 PM)

I have developed a conference registration form and have it set to integrate with paypal for credit card payment only. I would like to have the redirect to paypal page open as a new tab on the browser so the registrant doesn't leave my website. How do I do this?

Also, I have the form set that a thank you appears when they register to pay by check, but how do they get a thank you after submitting the form if they go to paypal? Thanks so much.

View Answer

whizz_kid (March 13, 2014 at 01:18 PM)

how do I change the fonts in the form to the ones in my website? My website is using this font pulled into the CSS: @import url(",700&subset=latin,latin-ext");

How do I get the same font on my jotform?

View Answer

datahelpline (May 09, 2014 at 11:11 PM)

here is my form linl
i am wondering if it is possible to change Security Code input type from text to password???

View Answer

Jiveghost (August 25, 2014 at 02:53 PM)

Hey there.
I have a column of many different 'Check Box' questions, each with 3 boxes to check.
When a question has an option 'checked' it naturally lights the question up yellow.

What I would like to do is keep the question lit up for as long as an option is checked. So if ten questions have boxes that are checked, all ten questions would still be lit yellow. And when/if the boxes are unchecked the question would lose its lighting.

Any help would be greatly appreciated.

View Answer

jmuskus (September 12, 2014 at 06:20 AM)


I entered the code above to remove the red background of the error message but it doesn't seem to have worked, this is the current code entered in the custom css box:

.font--face {
font-family: 'Carrois Gothic';
font-size: 16px;
font-style: normal;
font-weight: 400;src: local('Carrois Gothic'),
url( format('woff');
}.form-all {
font-family: 'Carrois Gothic';
font-size: 16px;
font-style: normal;
font-weight: 400;
.form-required {
color: black !important;
.form-line-error {
background:none repeat scroll 0 0;

Thanks in advance!

jmuskus (September 12, 2014 at 12:53 PM)

Me again! I changed the background of my header but the color does not reach right across the width of the form meaning the background color of the form also makes up part of the header... Can you help?

View Answer

IEHA (January 08, 2015 at 10:57 AM)

I am simply wanting to move my text boxes closer together vertically to mimic the address quick tool. Does this have to do with the "padding" I am seeing in the design tool? If so, can I adjust the padding of specific text boxes?

As a follow-up, is there a way to apply a CSS to a selected group of fields as opposed to individually or the form as a whole?


View Answer

Russ (March 15, 2015 at 12:42 PM)

How do I change the label sizes?

I am referring to the text box next to a radio button for example

View Answer

rlzolinas (March 16, 2015 at 02:42 PM)

What is the css code for changing the unique question text? Thanks in advance! The theme and text do not match the rest of my forms.

View Answer

CLLUWI (July 07, 2015 at 11:28 AM)

Hi I would like to remove the postal code field from the address box. How can I do that?

View Answer

camid01 (July 15, 2015 at 09:57 AM)

I would like to add multiple lines to the header.

View Answer

zubeida (August 01, 2015 at 01:34 AM)

I want to change the colour of the radio button (from blue) in the matrix.

View Answer

tlws (August 07, 2015 at 07:08 AM)

I would like to place the actual form (with the headings, fields, etc) at the top of the page (so there is no background or margin above it) but have not been able to figure out how to do it with the custom css.

In other words, I would like to add my own spacing above the form after I embed it.

View Answer

Paul Zucker (August 10, 2015 at 09:58 AM)


I am using the premade template payment form.

I would like to make a couple of changes within the form itself, but when I go to the form designer, it appears locked; I can only add fields above the form or below it (except for product fields which automatically go to the top within the form).

At the least, I would like to add text within the form (as a heading to a group of products).

At the most, I would like to add text fields - in order so that they may provide a shipping address, if different - within the form.

Is there a way to do either or both of these?

Again, I do not wish to add fields above and below the premade form - as I know this can be done - but within it.

Thank you,

Paul Zucker

View Answer

AdminRSCM (August 14, 2015 at 09:18 AM)

How to make textbox areas transparent with a line not a boxed border?

cccsdev (October 01, 2015 at 03:38 PM)

How to make a text box recognize currency? For example, if someone enters 50000...I need the output/result to be $50,000 or 50,000.

View Answer

Jay (November 20, 2015 at 06:00 PM)

I need any way to differentiate a field from the populated data info and the info entered by the user.
So that once a user has visited and changed any info that filed looks different from the other fields. Don't care if its background highlight, or Box Border color, etc... THANKS!!

View Answer

Pete (December 09, 2015 at 05:25 PM)

I am trying to change the colour of individual dropdown list options based on condition. What I mean is if a problem occurs in location 3 the word "location 3" in my location dropdown list turns red to tell me where the issue is, other locations remain black text.

View Answer

a2000 (January 13, 2016 at 10:16 PM)

Hi I need some help with the padding and margins. After i used the designer function and added the source code into my html page as well as upload the CSS files, there's now a huge padding above my form and a margin on the left where i'd like it to be aligned with my header.
Please help!

View Answer

Heather Scharding (February 29, 2016 at 12:04 PM)

How do I remove all of this grey color in these boxes. I have tried but it seems to want to default to a theme. I don't want that. I want everything to be white and then my lettering to be black. Here is the URL for one of the forms i put on my website:
here is the link to the form:

View Answer

testtrust (March 07, 2016 at 09:30 AM)


How do I change the color of tittle-texts and the phrase "Enter your address here" on the field?

I also need to add a small sample below the shape.


View Answer

thedesignlab (April 13, 2016 at 08:16 PM)


I need help trying to customise a sliders with calculated result. Im trying to change the layout like the slider_handle but cant for some reason.

View Answer

jwfieren (August 08, 2016 at 02:15 AM)

What is the css to change color input fields? I would like the color to be white and text to be black.
Thank you

View Answer

ORMTANewmarket (August 13, 2016 at 01:48 PM)

Is it possible to edit the header rows or columns in the spreadsheet widget? For example, rather than "A, B, C" along the top to rename them as "Name, Age, etc."

View Answer

scaoffice (August 16, 2016 at 04:37 PM)

You guys are brilliant! Thanks for the excellent cheat sheet.

Cubibot (September 16, 2016 at 02:35 PM)

Hello, can I put submit button at the right side of text box ? but same level , not lower !

View Answer

FinancialChange (November 01, 2016 at 10:57 PM)

I have created a sidebar using a text box with contact info like office hours but I want to make the remainder of my contact form beside it rather than below it. How can I change this?

View Answer

klebe bh (December 03, 2016 at 01:34 AM)

Very nice post you're sharing with us.

fittech (December 13, 2016 at 05:23 AM)

Any help regarding safari css? y for is working good on chrome but when I open it in safari the field alignments got disturbed.

How I add css for safari browser? Please tell with syntax.

View Answer

shadowcliff (January 24, 2017 at 06:43 PM)

Is there CSS I can use to alter the matrix found under Survey tools? I am trying to increase the size of the text box. Thanks!

View Answer

chefjeff (March 03, 2017 at 02:04 PM)

Anyone have a suggestion to target product images and force them to stay open or at a specified height in the current collapse functionality? Thanks!

View Answer

remman (March 16, 2017 at 09:42 AM)

I have a Long Text Entry Element in my form. I want to change the background colour of THE TEXT ONLY to yellow. Please help!!

View Answer

oliverpowell (March 17, 2017 at 09:08 AM)

Does anyone know how to change the list hover states of .form-autocomplete-list.

I've managed to style a few things, but I'm finding it impossible to inspect a dropdown to figure out what style sheet it belongs to.

It would be awesome if JotForm surfaced up all the hidden elements.

View Answer

ajp95 (March 24, 2017 at 07:31 AM)

I am trying to change the colour of the asterisk on my form as at present it is red on a red background. I have followed the instructions and managed to change it to white but it does not save the changes.

Are you able to help?

View Answer

GinaW41hl (April 14, 2017 at 02:39 PM)

Hi, can you tell me how to change the size of the font for the saved user input in the Matrix Dynamique widget? At the moment answers displayed after they Save and Add Row are very small. I want about 14 or 16pt and #ffffff . Thanks for your help.

View Answer

CapitalElectric (May 28, 2017 at 05:24 PM)

Using the configurable list widget, how do I make part of the list jump down to a new line instead of being too long for the screen?

View Answer

Gregor (May 30, 2017 at 03:37 PM)

Wie kann ich den Text vom "Submit" Button ändern?

View Answer

staceyvaughan (June 04, 2017 at 08:23 AM)

On my theme there are border lines separting the fields and I'm trying to make them black instead of white (you can't even see them on my form) Any help would be much appreciated!

View Answer

floorcosts (June 19, 2017 at 03:24 PM)

So with your CSS Form Designer, We can edit features of the widget, but can we add new ones?

For example: I want to change where the input is positioned on the sliding pricing scale. I want to put the number at the top instead of at the bottom...

View Answer

rotarywstg (July 17, 2017 at 06:16 PM)

Thanks for this article. I'd like to make the change the label in the terms and conditions widget but with no success.

Tried variations of

.label {
font-weight : bolder;
color: rgb(71, 71, 71);
font-family: PT Sans Narrow, sans-serif;

but no luck.

View Answer

Send Comment