Adding Custom Fieldsets to Gravity Forms

Fieldsets are important in ADA compliance because they help tell screen readers that a group of fields belong together and can share a label. This enhancement makes it easier for those using screen readers to use your site and navigate your forms, and you certainly don’t want to give anyone any obstacles in using your site! Now, what if you’re using Gravity Forms to create your forms? 

Gravity Forms allows you to add certain grouped fields that will automatically add a fieldset around them. These are fields like Address, Name, and other combined information. This can be helpful, but it also can be very restrictive. You must choose fields that are certain field types and only have a maximum amount. It is true that you can modify the title of a “name” field – such as “middle name” – to identify it as accepting an email address, but you’ll lose Gravity Form’s built-in verification of that field type. 

There is an available option in Gravity Forms to add your own HTML onto the form, but this does not work as expected when adding a fieldset. Let’s say you want to wrap 3 fields within one fieldset on your form: “Name, Email, and Website”. If you add the fieldset prior to the Name field with the custom HTML option, that actually ends up within a <div> of its own prior to the appearance of the Name input. Browsers will read this as an unclosed element and simply close it themselves. They will come across your closing element that you’ve added with custom HTML after the Website field and simply ignore it as erroneous data. 

Ending up like this:

The best way to handle this conundrum is to use Gravity Forms’s available filters to interrupt WordPress’s display of the data and allow us to insert our own HTML prior to the starting input and after the ending input. If you need more information about WordPress’s hooks that include filters and actions, you can read more here (https://mickeybuckno.com/2023/06/wordpress-hooks-the-difference-between-actions-and-filters/).

To insert a custom fieldset into a specific place on a form, this is the code we’ll use:

The first line of code states that we’re going to use Gravity Forms’s filter, gform_field_container to modify the output of the form fields. To learn more about this filter, check out the Gravity Forms documentation here (https://docs.gravityforms.com/gform_field_container/). Within the documentation, you will see that you have the ability to run this filter only on a specific form by adding an underscore and the form’s ID after the filter title. My form’s ID for this example is 139, so we are adding the filter gform_field_container_139 and telling WordPress to run the function my_field_customfieldset() with it. It is important to note that this function will run on each field for this form, so we will have to specify which fields we want modifications to run on.

Our first field, “Name,” has an ID of 1. This is an auto enumerated value that corresponds to when the field was added to the database and not the numeric order that it appears on your screen. You can find this by selecting the field and then inspecting the Field Settings in Gravity Forms’s menu to the right of the form layout.

In our code, we’re creating a custom HTML fieldset and telling Gravity Forms to output that fieldset just prior to the rendering of everything involved in the field with the ID of 1. I would like to point out here that I made an array of the class names for the sake of readability. This is definitely not best practice, and will add additional load time to rendering. It’s only there so you can read the code a bit better right now. You will notice that I have added a custom class to the fieldset, your_info_gfield that can be styled independently of the other fieldsets. All of the other classes in this array are the standard Gravity Forms fieldset classes.

This custom fieldset will appear outside of our field’s <div> container, which will prevent the browser from assuming that it’s an unclosed element and allow it to render properly. Our function, my_field_customfieldset() accepts the 6 variables that are passed to it by Gravity Forms, which includes $field_container. This variable is essentially the HTML for the input field and what can be modified when it’s returned by the function. Therefore, if we set our fieldset and return it prior to the $field_container variable, it will display as fieldset and then the entire field and its container. The other 5 variables passed to the filter can be used to further modify the $field_container variable if desired.

Now, in order to close the field, we will need to find the ID of the last field to be contained in the fieldset the same way that we did with the first. Our last input’s ID is 5, as I added and removed fields that were unneeded before this field. This is an example of why you can’t assume the ID of the input and must be certain you’re setting it correctly. You will see that this last field is returned in reverse order from the opening of the fieldset, where it provides $field_container and then the ending tag for the fieldset element, </fieldset>. This ensures that your fieldset is wrapped around the 3 fields we have specified before.

It is important to note that all of these ID numbers need to match the fields correctly. If you use a different form with a different ID, you will no longer have this custom fieldset available. If you add another field that’s meant to be inside the fieldset at the end, you will have to change where your function closes the fieldset element. It is definitely possible to take the above code and start your own plugin that would provide a useful GUI for these actions, so don’t be afraid to do so!

I hope that this article helps you ensure that your Gravity Forms are ADA compliant and that you’re constantly thinking about ways to help your websites stay accessible!