Customize Your Form Using Custom CSS Codes

May 10, 2022

Update

Let’s create fantastic forms with the 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

form-background-image-min.png
.supernova {
background-image: url('{image_url}');
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;
}
body {
background: none;
}

Replace {image_url} with your background image’s URL.

Make Page Background Transparent

form-page-transparent-background-min.png
.supernova, body {
background: none;
}

Make Form Background Transparent

form-transparent-background-min.png
.form-all {
background: none !important;
box-shadow: none;
}

Remove the Spacing Above the Form

form-remove-margin-top-min.png
body, .form-all {
margin-top: 0;
}

Change the Header Background Color

form-heading-background-color-min.png
.form-header-group, [data-type="control_head"] {
background-color: #c9daf8;
}

Change the Subheader Text Color

form-sub-heading-color-min.png
.form-subHeader {
color: #00b000 !important;
}

Change all the Sub Label Color

form-sub-label-color-min.png
.form-sub-label {
color: #ffb21d;
}

Change the Highlight Effect Color

form-active-line-color-min.png
.form-line-active {
background: #ccffcc;
}

Change the Form Required Star Color

form-required-indicator-color-min.png
.form-required {
color: cyan !important;
}

Align Form to the Left

form-margin-zero-min.png
.form-all {
margin: 0;
}

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: