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; });