Remove classes from a field when displaying it on a user input step

When fields are displayed on the user input step they will have the same classes as when displayed as part of the main form. This means if the field uses the CSS Ready Classes to position fields side by side the fields will also be positioned side by side on the user input step. If a field was given the gf_hidden or gf_invisible classes to hide the field the field would also be hidden on the user input step.

The good news is that if you don’t want a field to use the same classes when displayed on the user input step you can use the gform_field_css_class filter to remove them. Here’s an example showing what the code you would add to your theme functions.php file would look like:

add_filter( 'gform_field_css_class', 'remove_ready_classes', 11, 3 );
function remove_ready_classes( $classes, $field, $form ) {
    // Check if 'gravityflow' is present in the classes
    if ( strpos( $classes, 'gravityflow' ) !== false ) {
        // Classes to remove
        $ready_classes = array(
            'gf_left_half',
            'gf_right_half',
            'gf_left_third',
            'gf_middle_third',
            'gf_right_third',
            'gf_inline',
            'gf_hidden',
            'gf_invisible',
        );

        // Remove the ready classes from the field's classes
        foreach ( $ready_classes as $ready_class ) {
            $classes = str_replace( $ready_class, '', $classes );
        }

        // Trim any extra spaces resulting from replacements
        $classes = trim( $classes );
    }

    return $classes;
}