Need Help with Custom CSS for Section Background in Gravity Forms

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.

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.

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