Customize Your Form Using Custom CSS Codes

May 10, 2022


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

.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

.supernova, body {
    background: none;

Make Form Background Transparent

.form-all {
    background: none !important;
    box-shadow: none;

Remove the Spacing Above the Form

body, .form-all {
    margin-top: 0;

Change the Header Background Color

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

Change the Subheader Text Color

.form-subHeader {
    color: #00b000 !important;

Change all the Sub Label Color

.form-sub-label {
    color: #ffb21d;

Change the Highlight Effect Color

.form-line-active {
    background: #ccffcc;

Change the Form Required Star Color

.form-required {
    color: cyan !important;

Align Form to the Left

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

Contact Jotform Support:

Send Comment:

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