How to transparent forms

K

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

Hristian
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   in it.

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

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
G

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?

Hristian
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

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
E

Thank you for that!

K

Thank you very much! 

Works great 😉

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

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
K

Hi 😉

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

Hristian
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

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
K

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! 

Hristian
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

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
K

Hi Joe, 

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

Joe

Set the opacity to 100%.  

Reply


Terms & ConditionsCookie settings