User Guide

 

Making the Form Background Transparent

Making the Form Background Transparent

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.

Send Comment

20 Comments...

  • RoadSonny

    when i do this it just keeps trying to save and wont allow me to click publish

  • matthewpaul93

    None of these work for me. Trying to add the form to a Wordpress site. I can only change the frame to transparent (which doesn't show as transparent on the site). I can't change the background to transparent at all. Why is this such a difficult thing to do?

  • kescheren

    None of these options work. This is very frustrating. This should not be a difficult thing to do.

  • fox2748

    .supernova {

    background: transparent !important;

    }

  • kindlingmediaproductions

    So using the css code you provided gets rid of all the background, how do i just get rid of the forms page background? not the part if the form frame? the editor doesn't seem to want to do this. if you go to this link you will see all the white background covering up the background image. how do i get rid of all the white, so it's just the purple form on top of the background? thanks. here is the link: http://freeweek.transformpyoga.com/

  • infookdesignby

    @media screen and (min-width: 480px) {
    .supernova .form-all {
    border: 1px solid rgba(0, 0, 0, 0);
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
    }
    }


    Just replace with zeros

  • bakhodirkhon

    My form is transparent and now how can I make it so that when the client fills in the form, the form should stay transparent at all? Thanx.

  • joeri5

    sorry about last link try this one, it shows how to change the background to transparent deleting this bit http://imageshack.com/a/img910/9258/fkGJVL.png

  • joeri5

    It was a pain at first but I discovered, eahch time you change something in designer the background goes back to background color #ffffff just delete that bit in PREFERENCES before going to design pallet picture: http://es.tinypic.com/r/dqruw3/9

  • ldsplaylists

    I have set my background to transparent about 100 times, and it still shows up as white on my website.

  • denisealicea

    It suddenly stopped working again. I tried editing and adding all of the above mentioned.

  • jottydotty

    It's worked for me to put "transparent" in, thank you.

  • hbcreative

    Same issue as blacktiemultimedia. I believe the HEX color chooser must've updated and no longer allows you to type in Transparent. Any suggestions?

  • blacktiemultimedia

    I tried following the instructions above, but when typing "transparent" (without the quotes). I can get as far as "transp" then when I type the a (or anything after that) it just switches it back to #000000.

    Any suggestions please.

  • LdyBgSkrGrl

    How do I change the properties of the text boxes? I'd like to create a frame, and have the background be either transparent or grey.

  • Profeester

    I tried three options found in the forum. But I failed.
    -This form is not available for this domain.-
    Please help me to solve the problem.

    see Google site:
    https://sites.google.com/site/chicossfa/

  • cglass

    Worked. Thanks

  • bmccrea

    Thanks. That worked perfectly.

  • jreh


    new JotformFeedback({
    formId: "12132950385",
    buttonText: "welcome to jotform",
    base: "http://www.jotform.com/",
    background:'#08FCF4',
    fontColor:'#050000',
    buttonSide: "top",
    buttonAlign: "right",
    type:2,
    width: 700,height: 500});

  • Sohul Mukarram

    JotForm Support

    I tried three options found in the forum. But I failed. All the time the background shows white #FFFFFF.

    Whene I make the change to transparent and look for preview is seems allright.

    But when ever I put in my google website the background becomes white.

    Even

    I tried with the source code, deleting bacground colour, But unfourtunatelly google donot allow the source code. So I have to put it through insert>More gadgets>by URL.................But the background is white.

    Please help me to solve the problem.



    Regards

    Sohul Mukarram