How to transparent forms


Hi everyone, 

Can anyone help with a simple way to make the background of a from transparent?

It’s for a newsletter signup, so only teo fields (name and email).

Thanks 😉


12 replies

Set the opacity to 100%.  

Hi Joe, 

I simply cant find that option when it comes to forms? 

Userlevel 7
Badge +3

Hi Kristian, 

You need to put your form into a box element.
Then you’ll be able to set the opacity of the box element like Joe suggested above. 

Best,
Hristian

Hi Hristian, 

Thanks for the quick reply :) 

How would i do so? It seems like it’s not a quick drag and drop task.

Thanks! 

Userlevel 7
Badge +3

Hey Kristian, 

It is a drag and drop task. 

The box element is the 2nd one from the top in your element’s panel. (see screenshot below). 

After that, you pick up and drag/insert your form into that box element. 

You can style the box element with border, opacity, etc. 

Best,
Hristian

Hi 😉

Thank you, but it seems like it’s only the box that is affected by the opacity slider - not the form background? 

Userlevel 7
Badge +3

Hi Kristian, 

My bad. I thought you wanted to encapsulate your form with a transparent box/background. 

If you want the actual fields to be transparent, you’ll need to tweak your CSS. 

&nbsp; #lp-pom-form-10 .lp-pom-form-field input.text {&nbsp;<br />&nbsp; &nbsp; background: transparent;<br />&nbsp; }<br />

Best,
Hristian

Example: 

EDIT: Make sure you change the #lp-pom-form-10 ID to the appropriate one on your page. 

Thank you very much! 

Works great 😉

Thank you for that!

Userlevel 7
Badge +3

No problem. 

I’m glad I could help. 

Just be careful with this since it would make your form less noticeable. 

Best,
Hristian

Hi Hristian!

I added this CSS (along with at the beginning and at the end) on my landing page today and it’s not working. Is there something else I need to tweak besides changing the element ID?

Userlevel 7
Badge +3

Hi @gpan,

What exactly did you add to your page?

The script above seems to have been broken when Unbounce switched platforms hosting this community.

Generally speaking, your script shouldn’t have any &nbsp; in it.

If you can share your page, we might be able to figure it out.

Best,
Hristian

Reply