How to Change the Styling of the Stripe Credit Card Placeholder

Updated:

Introduction

Would you like to change the styling of the Stripe Credit Card form field placeholder text with WPForms? Using a small PHP snippet and also custom CSS, you can easily change the style of the placeholder text. In this tutorial, we’ll walk you through each step.

By default, the field that you enter your credit card with is styled with some default styling.

default styling for Stripe Credit Card field

Please note that this snippet will only be applied to the Stripe Credit Card form field when using the Credit Card Field Mode from the WPForms Settings Payments tab is set to Card Element.

from the Payment tab in WPForms settings, remember to make sure the Card Element is selected for the Credit Card Field Mode

To learn more about this option, please see this useful guide.

Creating the form

We’ll begin by creating a new form and adding a Stripe Credit Card field to the form.

create your form and add a stripe credit card field to your form

If you need any help in creating this type of form, please check out this documentation.

Once you’ve added the field to the form, select the field and click Field Options, then click the Advanced tab and place some Placeholder text inside the Name on Card Placeholder Text.

add placeholder text to the field

Adding the snippet

In order to change the styling of the placeholder text such as font-size, color, font-family, etc, we can just add a little PHP to our site.

If you need help in adding snippets to your site, please see this tutorial.

/*
 * Update placeholder text styles on Stripe Credit Card form field
 *
 * @link https://wpforms.com/developers/how-to-add-change-the-styling-of-the-stripe-credit-card-placeholder/
 */

function wpf_dev_stripe_card_field_style( $element_style ) {
	
	$element_style = [
		'base' => [
			'iconColor' => '#b95d52',
      		'fontFamily' => 'Roboto, sans-serif',
      		'fontSize' => '16px',
			'fontWeight' => '100',
			'backgroundColor' => '#f6f6f6',
			'::placeholder' => [
        		    'color' => '#b95d52',
				    'font-family' => 'Roboto, sans-serif',
				    'font-size' => '16px',
				    'font-weight' => '100',
			]
		],
	];
	
	return $element_style;
}

add_filter( 'wpforms_stripe_api_payment_intents_set_config_element_style', 'wpf_dev_stripe_card_field_style', 10, 1 );

For a full list of all object properties, please see this documentation.

Now, you’ll see the styling of the Stripe Credit Card field has changed.

now the styling of the stripe credit card field has changed with the snippet

Styling the placeholder text

The above snippet will only style the actual Card Number field, if you want to style the placeholder text to match, you’ll need to add some CSS.

If you need help in adding CSS to your site, please see this tutorial. 

input.wpforms-field-stripe-credit-card-cardname::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #b95d52 !important;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 100;
    background-color: #f6f6f6;
}

input.wpforms-field-stripe-credit-card-cardname::-moz-placeholder { /* Firefox 19+ */
    color: #b95d52 !important;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 100;
    background-color: #f6f6f6;
}

input.wpforms-field-stripe-credit-card-cardname:-ms-input-placeholder { /* IE 10+ */
    color: #b95d52 !important;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 100;
    background-color: #f6f6f6;
}

input.wpforms-field-stripe-credit-card-cardname:-moz-placeholder { /* Firefox 18- */
    color: #b95d52 !important;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 100;
    background-color: #f6f6f6;
}

Now the name field styling matches the number field styling

And that’s all you need! Would you like to also send metadata through to Stripe? Take a look at our article on How To Send Metadata to Stripe Payments.

Tagged:
Still stuck? How can we help?
Last Updated on Nov 17, 2023