Insert this script into functions.php in your WordPress theme (be cognizant of the opening and closing php tags) to allow field groups in Gravity Forms. The script will create two new field types - Open Group and Close Group. Add classes to your Open Group fields to style your groups. Note that there is a stray (but empty) <li> element created. …

gravity-forms-field-groups.php

<?php
/*
Insert this script into functions.php in your WordPress theme (be cognizant of the opening and closing php tags) to allow field groups in Gravity Forms. The script will create two new field types - Open Group and Close Group. Add classes to your Open Group fields to style your groups.

Note that there is a stray (but empty) <li> element created. It is given the class "fieldgroup_extra_li" so that you can hide it in your CSS if needed.
*/
add_filter("gform_add_field_buttons", "add_fieldgroup_fields");
function add_fieldgroup_fields($field_groups){

    foreach($field_groups as &$group){
        if($group["name"] == "standard_fields"){
            $group["fields"][] = array("class"=>"button", "value" => __("Open Group", "gravityforms"), "onclick" => "StartAddField('fieldgroupopen');");
            $group["fields"][] = array("class"=>"button", "value" => __("Close Group", "gravityforms"), "onclick" => "StartAddField('fieldgroupclose');");
            break;
        }
    }
    return $field_groups;
}

// Add title to the Field Group fields
add_filter( 'gform_field_type_title' , 'field_group_titles' );
function field_group_titles( $type ) {
    if ( $type == 'fieldgroupopen' ) {
        return __( 'Open Field Group' , 'gravityforms' );
    } else if ( $type == 'fieldgroupclose' ) {
        return __( 'Close Field Group' , 'gravityforms' );
    }
}

add_filter("gform_field_content", "create_gf_field_group", 10, 5);
function create_gf_field_group($content, $field, $value, $lead_id, $form_id){
    if ( ! is_admin() ) {
        if(rgar($field,"type") == "fieldgroupopen"){
            $content = "<ul><li style='display: none;'>";
        }
        else if(rgar($field,"type") == "fieldgroupclose"){
            $content = "</li></ul><!-- close field group --><li style='display: none;'>";
        }
    }
    return $content;
}

// Add a CSS class to the Field Group Close field so we can hide the extra <li> that is created.
add_action("gform_field_css_class", "close_field_group_class", 10, 3);
function close_field_group_class($classes, $field, $form){
    if($field["type"] == "fieldgroupclose"){
        $classes .= " fieldgroup_extra_li";
    }
    return $classes;
}

add_action("gform_editor_js_set_default_values", "field_group_default_labels");
function field_group_default_labels(){
    ?>
    case "fieldgroupopen" :
        field.label = "Field Group Open";
    break;
    case "fieldgroupclose" :
        field.label = "Field Group Close";
    break;
    <?php
}

add_action("gform_editor_js", "allow_fieldgroup_settings");
function allow_fieldgroup_settings(){
    ?>
    <script type='text/javascript'>
        fieldSettings["fieldgroupopen"] = fieldSettings["text"] + ", .cssClass";
        fieldSettings["fieldgroupclose"] = fieldSettings["text"] + ", .cssClass";
    </script>
    <?php
}
?>

Thanks Daniel - this is a lifesaver....I'm using your code because all other solutions to the problem of the HTML block auto-closing tags does not work (at least not with the most current version of GF as of today) and I needed to create fieldsets for my form.

I do have one question though.....how would I modify this to have the Open Field Group item display it's label? I'd like to be able to use the field Label as a pseudo-legend tag instead of having to add an HTML block. I'm not a programmer, but capable of following clear instructions. :-)

Thanks!

Thanks - this is a great addition - should be part of Gravity Forms!

Just to help others, the way I used this feature was to enter a Custom CSS Class into each of the Field Group Open elements on the form called 'gfield_group', and then add a CSS rule into custom.css as follows:

.gfield_group {
padding: 20px;
border: 2px solid grey;
background-color: #efefef;
}

Then just insert a Field_Group_Open as the first field in a group and a Field_Group_Close as the last.

This will style all groups the same. If you want different styles, just change the Custom CSS Class on the Field Group Open element and create the corresponding custom css.

Hi this is really nice, would it be possible to add the functionality for allowing the users duplicate the particular group field when filling the form has the need arises.