How to Make the Form Background Transparent

March 26, 2024

Making your form’s background transparent is the easiest way to blend your forms into your website’s design.

Youtube Embed Poster: s0EQETZxXQo

Inside the Form Builder, you can change your form’s background using the following methods:

Form Designer

The easiest way to change the transparency of your form is through the Form Designer.

  1. Click the Form Designer icon in the top-right part of the Form Builder.
How to Make the Form Background Transparent Image-1
  1. In the Colors tab, click the Form Color box.
  2. Click the X icon from the color options shown in the Form Color box.
How to Make the Form Background Transparent Image-2

Pro-Tip

You can also type “transparent” in the Form Color box to change the form background’s transparency.

  1. Please don’t forget to click the Save button to save the changes.

Advanced Designer

If you’re a wiz in form design, the advanced designer offers more advanced styling options, including the form background color.

  1. Open the Form Designer as shown in the steps above.
  2. Click the Advanced Designer button from the Colors tab.
How to Make the Form Background Transparent Image-3
  1. Under Color Scheme, click Frame and toggle its transparency using the slider. Do the same for the Background.
How to Make the Form Background Transparent Image-4
  1. Make sure to click the Save button on the left side of the page to apply the changes.

Custom CSS Codes

We recommend this method if you want to give everything a go, including removing the shadow and border of the form.

  1. Open the Form Designer.
  2. Under the Styles tab, scroll down to the Inject Custom CSS box, and paste the following CSS code:
.supernova, .jotform-form, .form-all {
background-color: transparent !important;
}
.form-all {
box-shadow: none;
border: none;
}
How to Make the Form Background Transparent Image-5
  1. As usual, please make sure to click the Save button to apply the changes.

See also:

How to Adjust the Opacity of a Forms Background

If you have any questions, suggestions, or feedback, kindly post them in the comment box below. You can also contact us by creating a support ticket.

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:

  • Daphephaktory - Profile picture
  • RoadSonny - Profile picture
  • matthewpaul93 - Profile picture
  • kescheren - Profile picture
  • fox2748 - Profile picture
  • kindlingmediaproductions - Profile picture
  • infookdesignby - Profile picture
  • bakhodirkhon - Profile picture
  • joeri5 - Profile picture
  • joeri5 - Profile picture
  • ldsplaylists - Profile picture
  • denisealicea - Profile picture
  • Erida Prifti - Profile picture
  • Francisco Ocasio - Profile picture
  • davidslavick - Profile picture
  • SNC - Profile picture
  • stresslesscomputing - Profile picture
  • idiaap - Profile picture
  • adhocergo - Profile picture
  • tcaininco - Profile picture
  • autobizchris - Profile picture
  • jura04 - Profile picture
  • jasonsweet - Profile picture
  • panecea - Profile picture
  • NKJINC - Profile picture