Need Help with Custom CSS for Section Background in Gravity Forms

Get Help
, ,
1

Hello Gravity Forms Community,

I’m working on a project where I need to visually distinguish a group of fields within a form by giving them a different background color. I understand that Gravity Forms utilizes a grid layout, which has been a bit challenging for me to work with in this context.

Here’s what I’ve attempted so far:

  1. I inserted an HTML field at the beginning and end of the section I want to customize.
  2. In the first HTML field, I added <div class="custom_panel"> to create a container.
  3. In the final HTML field, I closed the container with </div>.
  4. I’ve also tried to establish a container using only HTML fields.

However, these methods haven’t produced the desired effect. It seems that my custom CSS class isn’t impacting the background as I hoped.

Could anyone guide me on how to effectively group a set of fields under a section and apply a custom background color using CSS in Gravity Forms? Any tips or insights on how to navigate the grid system in this context would be greatly appreciated.

see the screenshot please.

2

Hi Benjamin. The section field is just a field once you add it to a form. It does not create a true section of fields that you can apply a style too.

The hack of adding an opening div before the fields and a closing div after no longer works with the HTML validation that is built in.

You have a couple options.

  1. Use a multipage form, and style each page background differently if you need to
  2. Use something like the JetSloth collapsible sections plugin:
    Gravity Forms Collapsible Sections - JetSloth

It does give you a different way to present the sections, and does give you a begin and end section break to work with.

If you have any other questions, please let us know.

3

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