How to Make the Form Background Transparent

August 19, 2022

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

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

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.
  1. Under Color Scheme, click Frame and toggle its transparency using the slider. Do the same for the Background.
  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;
}
  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.

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:

  • Daphephaktory
  • RoadSonny
  • matthewpaul93
  • kescheren
  • fox2748
  • kindlingmediaproductions
  • infookdesignby
  • bakhodirkhon
  • joeri5
  • joeri5
  • ldsplaylists
  • denisealicea
  • bestfriend21
  • alpss
  • Erida Prifti
  • Francisco Ocasio
  • davidslavick
  • SNC
  • stresslesscomputing
  • idiaap
  • adhocergo
  • tcaininco
  • autobizchris
  • jura04
  • jasonsweet
  • panecea
  • NKJINC
  • lasercorp
  • BorgessHealth
  • marshalldonteds
  • ibnxradio
  • URI_JOT_Forms
  • Melih Sancar
  • keman1383
  • nicobach1
  • rubensrc
  • veliathamby
  • tknicholas
  • vinautomatic
  • StrawberryDesi
  • brdavadm
  • bizdata
  • jteamer
  • dmayhan
  • Wtfuck
  • RJSK
  • hachishears
  • MEGSSS
  • SouthPiedmontCC
  • norfolkmedia
  • Marie Kinsella
  • Asad Jameel
  • fish4red
  • VOMIChairman
  • Freebahamashome
  • bhanukaran
  • Carlojames
  • kwesijc
  • jennyjac
  • rcole75
  • LongwoodRCL
  • analogueteacher
  • ttrs
  • ttrs
  • chris.baldwin
  • jteamer
  • ritasridecom
  • ritasridecom
  • jteamer
  • tan.ee.xion
  • EngPaired
  • Lalionseyebank
  • joshlsullivan
  • Si Preston
  • tan.ee.xion
  • BasecampMM
  • eueealumnado
  • tzvikramer
  • felipe_sasa
  • Roberta-Anne Schmitt
  • DavidVerissimo
  • Phil
  • kigeder
  • sallyblambert
  • 1moreset
  • STFB
  • formulariovirtual
  • bbbadvert
  • Intekhab Hussain
  • Intekhab Hussain
  • markashton
  • Dave
  • kmt2011
  • slaterholme
  • Greg Brooks
  • rahul
  • Rahul
  • aytekin
  • verocom
  • vero comtois
  • puttingedge
  • jottydotty
  • hbcreative
  • blacktiemultimedia
  • LdyBgSkrGrl
  • Profeester
  • cglass
  • bmccrea
  • Sohul Mukarram