Using Gravity Forms ‘gform_square_card_style’ PHP filter

by

The gform_square_card_style Gravity Forms PHP filter allows you to customize the appearance of the Square field in your form by passing CSS-like properties and values.

Usage

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

Parameters

  • $default_styles (array): An array that contains CSS properties and their values. Property names and values should match the inputStyle documentation here.
  • $form_id (int): The current form ID.

More information

See Gravity Forms Docs: gform_square_card_style

Note: This filter was removed from the Square Add-On and is no longer supported. From Gravity Forms Square Add-On version 1.7, the look of the Square field can be managed via the gform_square_card_details_style filter.

Examples

Change card details field background and text color

This example changes the card details field background to black and text color to white.

add_filter('gform_square_card_style', 'change_style', 10, 2);
function change_style($default_styles, $form_id) {
    $default_styles['backgroundColor'] = '#000000';
    $default_styles['color'] = '#ffffff';
    return $default_styles;
}

Change card details field font size

This example changes the font size of the card details field to 18px.

add_filter('gform_square_card_style', 'change_font_size', 10, 2);
function change_font_size($default_styles, $form_id) {
    $default_styles['fontSize'] = '18px';
    return $default_styles;
}

Change card details field font family

This example changes the font family of the card details field to Arial.

add_filter('gform_square_card_style', 'change_font_family', 10, 2);
function change_font_family($default_styles, $form_id) {
    $default_styles['fontFamily'] = 'Arial, sans-serif';
    return $default_styles;
}

Change card details field border color and width

This example changes the border color of the card details field to red and border width to 2px.

add_filter('gform_square_card_style', 'change_border_style', 10, 2);
function change_border_style($default_styles, $form_id) {
    $default_styles['borderColor'] = '#ff0000';
    $default_styles['borderWidth'] = '2px';
    return $default_styles;
}

Change card details field border radius

This example changes the border radius of the card details field to 10px.

add_filter('gform_square_card_style', 'change_border_radius', 10, 2);
function change_border_radius($default_styles, $form_id) {
    $default_styles['borderRadius'] = '10px';
    return $default_styles;
}