Optimize checkout form design

Contributors

@andreea-macoveiciuc-content-expert


Business Benefits

Increase conversions by removing friction and offering a smooth customer experience.


Sort fields from easiest to hardest to fill out when designing forms to get shoppers to commit and reduce abandoning purchases rates.

Start with the easier fields. For example, name and email.

Pre-fill information for shoppers by adding autofill, autoformat, copy/paste functionality, and suggestions to make their checkout process simple and easy.

Check with your web developer to ensure your website is properly set up to support these functions.

Clearly indicate which fields are required or optional and explain why required fields are necessary.

For example, mark required fields with a red asterisk or (required) and include small questions marks next to them that bring up a small pop up explaining why they’re necessary when shoppers hover their mouse over them.

Create visual alerts that automatically highlight fields that have been missed or incorrectly filled out and explain what the issue is.

Set your alerts to highlight fields immediately after they’re incorrectly filled out or if shoppers try to continue to the next step without completing the required fields. This feature is built into most forms available on popular ecommerce platforms, but reach out to your web developer if you’re not sure how to implement it.

Ensure that expiration date formats on checkout forms match those used by credit cards (month/year), to avoid confusion.

Keep names and phone numbers as single fields.

Multiple fields with specific requirements, like entering two words for Name and 10 digits for Phone number tend to result in field-level errors and frustrate shoppers trying to complete their purchases. Having fewer fields also makes it easier for shoppers using mobile devices or smaller screens.

Use linear, single column forms instead of spreading forms over multiple columns.

Single column forms are easier and quicker for shoppers to complete, especially if they’re on a mobile device.

Use radio buttons instead of multi-select dropdown boxes.

Forms with multi-select dropdown boxes interrupt user flow and take longer to complete. Radio buttons require less input and maintain user flow, meaning shoppers can complete them quicker and with more confidence.

Show the number of checkout steps and keep users on the same page for all steps to avoid interrupting the checkout process.

  • Give shoppers the option to edit their account and payment information without interrupting or leaving the checkout process.
  • Display Edit links next to fields such as address, account information or payment method to prevent users from leaving the checkout process and abandoning the cart.

Use text links and subtle text instead of prominent coupon code fields to minimize cart abandonment rates.

For example, use text links saying Got a coupon? or something similar over something obvious like Enter your coupon code here. Shoppers who already have a coupon will be looking for a way to enter it anyway and won’t need an obvious field.