Using Gravity Forms ‘gform_square_card_details_style’ JavaScript filter

The gform_square_card_details_style Gravity Forms JavaScript filter allows you to customize the appearance of the Square credit card details input in a form.

Usage

gform.addFilter('gform_square_card_details_style', 'your_function_name', 10, 2);

Parameters

  • styleObject {Object} – An object containing CSS selectors, properties, and values. Selectors, property names, and values should match the documentation here.
  • formId {int} – The current form id.

More information

See Gravity Forms Docs: gform_square_card_details_style

Examples

Change card details field background and text color

This example changes the background color of the card details field to black and the text color to white, only for a form with an ID value that matches myFormId.

gform.addFilter('gform_square_card_details_style', function(styleObject, formId) {
    if (formId === myFormId) {
        styleObject.input.backgroundColor = '#000000';
        styleObject.input.color = '#FFFFFF';
    }
    return styleObject;
});

Increase font size in the card details field

This example increases the font size in the card details field to 18px for a form with an ID value that matches myFormId.

gform.addFilter('gform_square_card_details_style', function(styleObject, formId) {
    if (formId === myFormId) {
        styleObject.input.fontSize = '18px';
    }
    return styleObject;
});

Change card details field border color and width

This example changes the border color of the card details field to blue and the border width to 2px for a form with an ID value that matches myFormId.

gform.addFilter('gform_square_card_details_style', function(styleObject, formId) {
    if (formId === myFormId) {
        styleObject.input.borderColor = '#0000FF';
        styleObject.input.borderWidth = '2px';
    }
    return styleObject;
});

Add a box-shadow to the card details field

This example adds a box-shadow to the card details field for a form with an ID value that matches myFormId.

gform.addFilter('gform_square_card_details_style', function(styleObject, formId) {
    if (formId === myFormId) {
        styleObject.input.boxShadow = '0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)';
    }
    return styleObject;
});

Add padding to the card details field

This example adds 10px padding to the card details field for a form with an ID value that matches myFormId.

gform.addFilter('gform_square_card_details_style', function(styleObject, formId) {
    if (formId === myFormId) {
        styleObject.input.padding = '10px';
    }
    return styleObject;
});