Customizing Your Form Using CSS Codes

April 14, 2024

Aside from the built-in form designer, you can also customize your forms using CSS in the Form Builder. This guide contains a few examples of CSS codes that you can try or use on your forms. For applying CSS to your form, see Injecting Custom CSS Codes.

Youtube Embed Poster: v2apY6221Ro

Adding a Background Image to the Page

The following CSS code allows you to add a custom background image for your form.

A contact form with a lake cabin background
.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.

Note

Use a secure HTTPS address for the image URL to avoid mixed content blocking.

Making the Page Background Transparent

Useful for embedded forms, you can use the following code if you need your form to use your web page’s background.

A white contact form with gray and white checkered background
.supernova, body {
background: none;
}

Making the Form Background Transparent

The following code removes your form’s background and shadow making it flat and transparent.

A contact form with gray and white checkered background
.form-all {
background: none !important;
box-shadow: none;
}

Removing the Spacing Above the Form

The following code removes the extra space above your form which can be useful for embedded forms.

A side-by-side comparison of an embedded contact form before and after removing the space at the top
body, .form-all {
margin-top: 0;
}

Changing the Heading Background Color

Use the following code to change the background color of your form’s Heading elements.

A contact form with an arrow pointing to its "Contact Us" heading section with a bluish background
.form-header-group, [data-type="control_head"] {
background-color: #c9daf8;
}

Pro Tip

For color-related properties, you can use this color picker to generate your color’s hex value (e.g., #a1b2c3).

Changing the Subheading Color

The following code changes the text color of all your Heading elements’ subheaders.

A contact form with an arrow pointing to its green "We're available 24/7" subheading
.form-subHeader {
color: #00b000 !important;
}

Changing All the Sub Label Color

Use the following CSS code to change the color of all the sub-labels on your form.

A contact form with an arrow pointing to the orange "First Name" sub-label
.form-sub-label {
color: #ffb21d;
}

Changing the Highlight Effect Color

You can use the following code to change the background highlight on input fields.

A contact form with an arrow pointhing to the active Name field set with greenish background
.form-line-active {
background: #ccffcc;
}

Changing the Form Required Star Color

The code below changes the fields’ “required” indicator which is red by default.

A contact form with an arrow pointing to a cyan asterisk next to the Name field label
.form-required {
color: cyan !important;
}

Aligning the Form to the Left

Useful for embedded forms, you can use the following code to move your form to the left.

A contact form hugging the left side of the screen
.form-all {
margin: 0;
}

If you need help with customizing your form, feel free to contact Jotform Support.

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:

  • Angelfire07 - Profile picture
  • Monica - Profile picture
  • Keri Bergin - Profile picture
  • Shivani Argulwar - Profile picture
  • Araminta Romero - Profile picture
  • Karen Barbieri - Profile picture
  • syafiq MUHAMMED - Profile picture
  • Esteban Dido - Profile picture
  • CH - Profile picture
  • Ola Adel - Profile picture
  • Elizabeth - Profile picture
  • formularios cimei - Profile picture
  • MalyonCollege - Profile picture
  • Melinda S. - Profile picture
  • Melinda S. - Profile picture
  • Chamindha Anuruddha - Profile picture
  • Diksha Luthra - Profile picture
  • Terry Mirabella-Moran - Profile picture
  • Luciano - Profile picture
  • Luciano - Profile picture
  • Paula Renee Willhite - Profile picture
  • Winter Park Paws - Profile picture
  • Dalton  - Profile picture
  • Dena Manos - Profile picture
  • Lara - Profile picture