Hiding Empty Fields in WPForms Entry Preview

Would you like to hide empty fields from the Entry Preview in WPForms? This can help create a cleaner, more focused preview by showing only the fields that contain data.

In this tutorial, we’ll show you how to use a custom code snippet to remove empty fields from the Entry Preview in WPForms.

Adding the Code Snippet

To hide empty fields from the Entry Preview, you’ll need to add a custom code snippet to your site. If you need help adding custom code, please see our tutorial on adding code snippets.

Add the following PHP code snippet to your site:

/**
 * Filter the entry preview fields to hide empty fields.
 *
 * @link https://wpforms.com/developers/hiding-empty-fields-in-wpforms-entry-preview
 *
 *
 * @param array $fields    The entry preview fields.
 * @param array $form_data Form data and settings.
 *
 * @return array The filtered entry preview fields.
 */
function wpf_hide_empty_entry_preview_fields( $fields, $form_data ) {
    foreach ( $fields as $field_id => $field ) {
        if ( empty( $field['value'] ) ) {
            unset($fields[$field_id]);
        }
    }
    return $fields;
}

// Add the filter to apply the custom function.
add_filter( 'wpforms_entry_preview_fields', 'wpf_hide_empty_entry_preview_fields', 10, 2 );

This snippet uses the wpforms_entry_preview_fields filter to modify the fields displayed in the Entry Preview. The code loops through all the fields in the Entry Preview and for each field, it checks if the ‘value’ is empty. If a field’s value is empty, it removes (unsets) that field from the array. After the loop it complete, it returns the modified array of fields, which now only contains fields with values.

And that’s it! You’ve now hidden empty fields from your WPForms Entry Preview. This creates a cleaner, more focused preview that only shows fields containing data.

Would you like to learn more about customizing the Entry Preview in WPForms? Check out our tutorial on showing entry preview fields in WPForms.