Customize your Form using Custom CSS Codes

Last Update: November 18, 2014

UPDATE: Let's create fantastic forms with Form Designer video course!
------------------------------------------------------------------------------------------------

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


Setting Background Image to Your Form


You need to change the image's address.

.form-all {
background-image:url('http://www.site.com/image.jpg');
}


**You might need to add this just in case, so the background image won't be covered up by the field background**

.form-line { 
background: none;
}


Preview Here

(Incidentally, according to the official W3C document, quotes in image URLs are optional.)
----------------------------------------------------------------------------------------------------------------------------

Changing the Header Background Color

.form-header-group{
background-color:#FFCC66;
}

---------------------------------------------------------------------------------------------------------------------------

Changing the Sub-header Text's Color

.form-subHeader{
color:#2408FC;
}


---------------------------------------------------------------------------------------------------------------------------

Changing the First Name & Last Name Text's Styles

.form-sub-label{
color:#FFCC66;
}

 
---------------------------------------------------------------------------------------------------------------------------

Changing the Yellow Highlight Effect Color

.form-line-active {
background-color:#DF01D7;


---------------------------------------------------------------------------------------------------------------------------

Changing the Form Required Star Color

.form-required {
color: blue !important;
}


----------------------------------------------------------------------------------------------------------------------------------------------------------

Changing header and sub-header alignment

.form-header-group, .form-subHeader{
text-align:center !important;
}


---------------------------------------------------------------------------------------------------------------------------

Removing the Red Background on Error Messages

.form-line-error {
background:none repeat scroll 0 0;
}

---------------------------------------------------------------------------------------------------------------------------

Aligning Form to the Left

.form-all{
margin:0;
}

Preview Here

---------------------------------------------------------------------------------------------------------------------------

Removing the Page-Break Background 

.form-pagebreak {
   background: none; 
}


---------------------------------------------------------------------------------------------------------------------------

Rounding Text & Drop Down Corners

.form-all input,select {
border: 1px solid #b7bbbd;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 4px;
width: 140px;
}


Preview 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 a comments below.

You have already voted for this item. Your vote was: 1

23 Comments...


   
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..
http://s1027.photobucket.com/albums/y332/shopwisely16/?action=view¤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)

Hey,

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?

Thanks.

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?

Thanks
Manthan


   
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("http://fonts.googleapis.com/css?family=Oswald:400,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
http://www.jotform.ca/datahelpline/payment
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)

Hi,

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'),
local('CarroisGothic-Regular'),
url(http://fonts.gstatic.com/s/carroisgothic/v4/GCgb7bssGpwp7V5ynxmWy2IHn70NeZKJ0uStDo7Dza8.woff) 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


Send Comment