Customize Your Form Using Custom CSS Codes

October 6, 2021

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-image:url (‘http://www.site.com/image.jpg’);

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 {
background:transparent;
}

Remove the Spacing Around the Form

.jotform-form {

padding:0;

}


Make Form Background Transparent

.form-all {

background:transparent;

}


.form-all {

background:transparent;

}


Change the Header Background Color

[data-type=”control_head”]{background-color:#FFCC66;}



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: http://pastebin.com/raw/UJV3nGf5

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.

Was this guide helpful?
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:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments: