This filter allows you to pass CSS-like properties and values to Square to control the look of the Square credit card details input.

For more information about which styles may be applied, check out the style reference in Square’s documentation.


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


  • styleObject {Object}
    An object that contains css selectors, properties and their values, selectors, property names and values should match documentation here.
  • formIdint
    The current form id.


Changes the card details field background to black and text color to white, only for a form that has 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;


See the JavaScript/jQuery section in this article: Where Do I Put This Code?


This filter was added in the official Gravity Forms Square Add-On version 1.7

Source Code

This filter is located in CardRenderer.getCardConfigurationStyleObject() in js/src/frontend/card-renderer.js.