Using Gravity Forms ‘gform_preview_styles’ PHP filter

by

The gform_preview_styles filter in Gravity Forms is used to specify custom styles to be enqueued on Gravity Forms preview pages.

Usage

add_filter('gform_preview_styles', 'your_function_name', 10, 2);

Parameters

  • $styles (array): An array of style handles to be enqueued.
  • $form (Form Object): The current form.

More information

See Gravity Forms Docs: gform_preview_styles

Examples

Enqueue a custom style on the preview page

This example demonstrates how to enqueue a custom style on the preview page:

add_filter('gform_preview_styles', 'enqueue_custom_style', 10, 2);
function enqueue_custom_style($styles, $form) {
    wp_register_style('my_style', get_stylesheet_directory_uri() . '/my_style.css');
    $styles = array('my_style');
    return $styles;
}

Enqueue multiple custom styles

This example shows how to enqueue multiple custom styles on the preview page:

add_filter('gform_preview_styles', 'enqueue_multiple_styles', 10, 2);
function enqueue_multiple_styles($styles, $form) {
    wp_register_style('custom_style1', get_stylesheet_directory_uri() . '/custom_style1.css');
    wp_register_style('custom_style2', get_stylesheet_directory_uri() . '/custom_style2.css');
    $styles = array('custom_style1', 'custom_style2');
    return $styles;
}

Conditionally enqueue styles based on form ID

This example enqueues a custom style only if the form ID is 5:

add_filter('gform_preview_styles', 'enqueue_style_for_form_id', 10, 2);
function enqueue_style_for_form_id($styles, $form) {
    if ($form['id'] == 5) {
        wp_register_style('form5_style', get_stylesheet_directory_uri() . '/form5_style.css');
        $styles[] = 'form5_style';
    }
    return $styles;
}

Enqueue a custom style based on form title

This example enqueues a custom style if the form title is “Contact Us”:

add_filter('gform_preview_styles', 'enqueue_style_for_contact_form', 10, 2);
function enqueue_style_for_contact_form($styles, $form) {
    if ($form['title'] == 'Contact Us') {
        wp_register_style('contact_us_style', get_stylesheet_directory_uri() . '/contact_us_style.css');
        $styles[] = 'contact_us_style';
    }
    return $styles;
}

Remove a default Gravity Forms style

This example removes the default Gravity Forms style from the preview page:

add_filter('gform_preview_styles', 'remove_gf_default_style', 10, 2);
function remove_gf_default_style($styles, $form) {
    if (($key = array_search('gravityforms', $styles)) !== false) {
        unset($styles[$key]);
    }
    return $styles;
}