How to Replace the Legend Tag with Div in Gravity Forms

Gravity Forms is one of the most powerful form builder plugins for WordPress, but sometimes its default HTML markup might not align with your project’s design or accessibility requirements.

By default, Gravity Forms uses the <legend> tag inside fieldsets for radio fields, which can be tricky to style or control in some cases. If you want to replace the <legend> tag with a <div> element, here’s how you can do it using a simple WordPress filter.

🧩 Why Replace <legend>?

• <legend> can behave inconsistently across browsers.
• Some CSS frameworks or designs don’t handle <legend> well.
• Replacing it with <div> allows more flexible styling and layout control.
• Styles are being affected because the fieldset and its inner elements require a custom layout.

🔧 The Code

Add this code to your theme’s functions.php file or in a custom plugin:

add_filter( 'gform_field_content', function( $content, $field, $value, $lead_id, $form_id ) {
    if ( $field->type === 'radio' ) {
        // Replace <legend ...>...</legend> with <div ...>...</div>
        $content = preg_replace_callback(
            '/<legend([^>]*)>(.*?)<\/legend>/is',
            function( $matches ) {
                return '<div' . $matches[1] . '>' . $matches[2] . '</div>';
            },
            $content
        );
    }
    return $content;

}, 10, 5 );

📌 Notes

• This change only affects the radio field types.
• You can modify the code and add more field support.
• It doesn’t modify the form functionality — just the markup.
• Always test after applying this code to ensure styling and behavior remain as expected.