Custom CSS Landing page, form is not appearing when published


#1

I’ve created a landing page with custom css to replicate the look and feel of our website. Now when I add a form the submit button is visible when I publish the page, however the form fields are not visible. I have tried bringing the form to the “FRONT” in the editor, however it seems the form is stuck behind the back layer.


#2

Hey Mike, that’s a tough one to answer for sure without seeing the page itself. Can you either post your page URL here, or, if that’s inappropriate for your page, can you open a support case by sending this in to support@unbounce.com?


#3

Thanks Carl, here is the page, sfw:
http://go.webcollaboration.com/big-id…


#4

Hey Mike, just digging through your page a bit. Seems to be something associated with this stylesheet:

http://mercurygrove.com/wp-content/th…

Looks like it’s conflicting with our own layout CSS, as soon as I disabled it, your form was visible. It contains mostly layout rules, not formatting, other than perhaps a background image that you should be able to specify in the Unbounce editor. Can you remove that one and still get the look you’re after?


#5

Hi Mike,

THe stylesheet you are including:

http://mercurygrove.com/wp-content/th…

Contains the following rule:

.clearfix { clear: both; width: 100%; font-size: 0px; line-height: 0px; visibility: hidden; margin: 0; overflow: hidden; }
.clearfix:after { content:"."; }

We use a css class named .clearfix on a number of elements but we use it in a different way. The rule on your stylesheet is setting the visibility to hidden and this is why the form is not showing. You could override this by adding the following into the Manage Styles dialog but there may be other conflicting rules that continue to cause problems.

.lp-pom-form-field.clearfix,
fieldset.clearfix {
visibility: visible;
}

.lp-pom-form-field.clearfix:after,
fieldset.clearfix:after {
content:"";
}

Justin


#6

Thanks Justin, I’ll try this.