Making the Form Background Transparent

September 15, 2021

If you want your forms to blend with your site’s design seamlessly, making the background transparent is the simplest way to achieve it. Here’s a quick tutorial to show you how to do so.

There are three ways to change your background color.

Method 1: Changing the settings in the FORM DESIGNER

1. Click the blue FORM DESIGNER icon on your Form Builder.

2. Go to the COLORS tab.

3. On the FORM COLOR section, type “transparent” (without the quotes). The color in the box on the right of the input should turn into checkered grey and white.

Alternatively, you may click the transparent color icon.

4. Then click the SAVE button.

Method 2: Using the ADVANCED DESIGNER page

1. On that same section of the FORM DESIGNER, click the ADVANCED DESIGNER button at the bottom.

2. On the DESIGN tab, you can change the background color of the page or the frame of the form in the COLOR SCHEME section.

3. Make sure to click the SAVE button on the left side of the ADVANCED DESIGNER page to apply the changes.

Method 3: Inject custom CSS codes

1. Still on the ADVANCED DESIGNER page, go the CSS tab this time.

2. Paste these custom CSS codes:

.supernova, .jotform-form, .form-all {
  background-color: transparent !important;

3. As usual, ensure you will click the SAVE button to apply the changes.

For additional information check out these guides:

How to Compensate for IE6s Lack of Support for Transparent PNGs

How to Adjust the Opacity of a Forms Background

Comments and suggestions are welcome below. If you have a question, post it in our Support Forum so we can assist you.

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.