How to Customize the Credit Card Field


Would you like to customize the credit card field? You can easily change the look of this field. For example, we’re going to style the credit card field to be on a single line. In order to do this, we’ll need to use a little CSS to have each field display inline.


You’ll first need to create a form and add the field to your form.

If you need any help in creating an form, please see this documentation.

create a form and add the field

The Card Number, Expiration Date, and Security Code fields have default styling that sets the Card Number on one line and the rest will fall onto the next line.

default styling for the credit card field

Adding the CSS to customize the field

Now it’s time to add the CSS so that we can get all three fields on one line.

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

  display: flex;
  justify-content: start;
  flex-wrap: wrap;
.wpforms-field-authorize_net .wpforms-field-label{
  width: 100% !important;
.wpforms-field-authorize_net .wpforms-field-row.wpforms-field-large, .wpforms-field-authorize_net .wpforms-field-row.wpforms-field-medium, .wpforms-field-authorize_net .wpforms-field-row.wpforms-field-small {
    width: 260px;
    margin-left: 10px;
div.wpforms-container-full .wpforms-form .wpforms-field-row:nth-of-type(1) {
    margin-left: 0;

The width:260px; is a variable width that you may want to change to meet the needs of your specific layout. You can always test this by changing it to various other widths until you find the one that looks better on your page.

With this CSS we’ve now customized the field to have all fields on a single line.

customize the field using CSS to display these fields on a single line

And that’s all you need to customize the form field. Would you like to also send through the address with the payment? Check out our tutorial on How to Send an Address Through to Payments.