Hello,
I have added a container with a bg color to the form, and the padding is just fine on the first page of the form, but goes away on the subsequent pages. I can't seem to locate the CSS target for the multi-page wrapper/container to add the same padding on these pages.
Any info is appreciated.
Thank you!
Can you post a link to your form so we can see what you have going on?
Sorry I'd rather not if we can help it.
I basically want this CSS applied to every page on the multi page form:
body .gform_wrapper {background:#dbecf8!important;
-webkit-border-radius: 5px!important;
-moz-border-radius: 5px!important;
border-radius: 5px!important;
padding-right:15px!important;
padding-left:20px!important;}
I just need to know what I should target to have this affect the multi-page steps/pages in addition to the first form page (Previous|Next)
There is one form wrapper that persists throughout all of the pages so your CSS rules applied to that wrapper should work across all of the pages as well unless something else is influencing it. Without seeing your form ourselves, there's only so much we should tell you.
You might want to target the form wrapper by the unique ID rather than the class so it only applies to the one form and not all of your forms. Also, you shouldn't need the !important declarations unless you've already applied a border style to the .gform_wrapper class elsewhere and need to override it.
Here's an example. You would replace the "XX" with the actual ID of your form.
[css]
body #gform_wrapper_XX {
background:#dbecf8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-right:15px;
padding-left:20px
}If that's not working for you, then we'll need to see the form to help debug from there.
Ok, thank you for the reply.
I actually intended for the bg to be on all forms - so targeting the ID is a good suggestion; just not what I'm after.
So if this wrapper applies to all multi-page forms too, then there must be something conflicting.
One of the forms can be found here.
It'd be neat if you had a confidential form section that would allow me to post a url and keep it private between posters & admins here.
Thank you
I checked your form in 3 different browsers and am seeing the blue background color (#DBECF8) that's applied to the form wrapper does persist through the different pages as intended. Are you having problems with it in a specific browser?
Also, you can password protect your form page and send the login via our contact form if you need in the future.
Yes... the blue bg does persist but the padding on the top of the form is nonexistent on the multi-page forms.
If you tick a box & go to the next page you'll see the top of the bg has no padding above the form title....
My question was about the padding, not the bg showing up. :)
Your question was about locating the correct wrapping element to target with CSS and apply properties so yeah, the .gform_wrapper is correct. As it turns out, that's not the issue at hand anyhow. You don't have any padding applied to the top of the form, so what you're seeing on the first page is a break tag that's being inserted before the form title. That break tag doesn't appear in subsequent pages so you're seeing what appears to be a padding difference.
That extra break is apparently coming from your theme or another plugin somewhere. It doesn't exist in the normal form markup. You may need to test for conflicts to find out where it's coming from.
http://www.gravityhelp.com/documentation/page/Testing_for_a_Theme/Plugin_Conflict
For now, you can hide that break tag with some CSS then apply top and bottom padding to the wrapper element.
[css]
body .gform_wrapper a.gform_anchor+br {
display: none;
}