Creating different background color for bottom of the form

Hello first time posting here and new to Gravity and CSS newbie (mostly). Can only access this forum via iPhone. Won’t work on Mac desktop so unable to share screenshots. Using latest GF Forms with Elite license and latest Divi Theme.

Making a two part membership form using 2 sections:

Top Section: Local Chapter only membership with a Chapter Section field, Chapter membership radio buttons, Total, and personal name and address fields and payment fields (PayPal pans/or Stripe).

Bottom: National Membership. National only needs 1) a section header and 2) an HTML field with link to “national” URL to sign up on their site. No firm fields needed here.

I’m trying to visually separate bottom from top to encourage users to fill out our top part rather than leave form by clicking on the national URL.

Instead of using a divider between 2 sections, I’d rather use a darker background-color for the bottom part.

How can I do this? If only I could create a container div WITHIN the whole form wrapper that wraps both the “national” section head and national HTML fields.

Don’t see any GF fields that will do this. Under Appearance > Custom CSS I added a “national” class to both the National Section and National HTML fields. Then in my Divi page builder top of the page CSS, I added same background-color and padding to both .national classes. The bsckground color worked, but the padding didn’t show up at all. It didn’t expand the two field edges to visually “fuse” them.

Must be a way to add an element within a form, style that element, and then nest the section and html fields inside???

Worse comes to worse, I could remove national section entirely from form because it has no form fields to fill in, just text with URL but treasurer wants all of this in same form.

Lastly, how can a user fill out and print our form online so they can mail it to us with a check. Need to spec an under 8.5” wide print area. Our little non-profit doesn’t want to spend extra $ for Gravity PDF.

Anyone able to help me at all?

The Gravity Forms form is not divided into sections or divs, so you won’t really be able to do this with CSS (there is no element to target for any portion of the form.)

I will leave this open in case someone else can provide a workaround. Thank you.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.