Making the Form Background Transparent

Last Update: November 27, 2016

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

Currently, there are three ways to change your background color.

Method 1: Changing the settings in your "Preferences"

1. Click the "Preferences" in the form builder.



2. Click the "Form Stypes" tab

3. In the Background input, type "transparent" (without the quotes)



4. Lastly, click the "Save Changes" button to save the changes


Method 2: Using the new Form Designer Tool

You can use our new Form Designer Tool to change the background color of the form or its frame.

1. Click the "Designer" button in your form builder.



2. Under the "Design" tab, you can change the background color of the page or the frame of the form in the "Color Scheme" option:



3. Make sure to click the save button to apply the changes.


Method 3: Injecting a custom CSS code.

1. In the Form Designer Tool, click the "CSS" tab.

2. Paste this custom CSS code in your CSS textarea.

.supernova, .jotform-form, .form-all {

    background-color : transparent !important;

}



3. Click the save button to apply the changes.


For additional information check out these guides:

How to Adjust the Opacity of a Form's Background

How to Compensate for IE's Lack of Support for Transparent PNGs


How did you do? Easy enough, right? Please share any difficulties you may have had,  your suggestions or your ideas in the comments section below.


20 Comments...


   
Sohul Mukarram (July 19, 2011 at 06:37 PM)

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


   
jreh (August 10, 2011 at 06:34 PM)


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});


   
bmccrea (November 12, 2011 at 03:33 AM)

Thanks. That worked perfectly.


   
cglass (November 29, 2011 at 09:13 PM)

Worked. Thanks


   
Profeester (February 29, 2012 at 10:13 PM)

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/

View Answer


   
LdyBgSkrGrl (January 05, 2013 at 03:39 PM)

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.

View Answer


   
blacktiemultimedia (February 11, 2013 at 12:36 PM)

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.

View Answer


   
hbcreative (February 13, 2013 at 03:31 PM)

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

View Answer


   
jottydotty (February 26, 2013 at 06:35 AM)

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


   
denisealicea (December 10, 2013 at 12:47 PM)

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

View Answer


   
ldsplaylists (January 31, 2015 at 03:40 PM)

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

View Answer


   
joeri5 (January 21, 2016 at 04:26 AM)

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


   
joeri5 (January 21, 2016 at 04:31 AM)

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


   
bakhodirkhon (April 25, 2016 at 09:47 PM)

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.

View Answer


   
infookdesignby (May 16, 2016 at 03:18 PM)

@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


   
kindlingmediaproductions (June 10, 2016 at 07:19 PM)

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/

View Answer


   
fox2748 (July 06, 2016 at 07:33 AM)

.supernova {

background: transparent !important;

}


   
kescheren (July 12, 2016 at 08:38 PM)

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

View Answer


   
matthewpaul93 (August 11, 2016 at 10:23 AM)

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?

View Answer


   
RoadSonny (October 12, 2016 at 11:01 PM)

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

View Answer


Send Comment