How to Customize the Authorize.net Credit Card Field

Overview

Would you like to customize the Authorize.net 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.

Setup

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

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

create a form and add the Authorize.net 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 Authorize.net credit card field

Adding the CSS to customize the Authorize.net 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.

.wpforms-field-authorize_net{
  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 Authorize.net field to have all fields on a single line.

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

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