How-to

– 9 min read –

August 2, 2019

How to make a checkout form in an online store

Inconvenient checkout forms influence conversion rate. If a user doesn't want to fill them in, they will simply close the tab and go to the competitor's website. To avoid losses, you need to create a correct checkout form. If it has already been created, you need to test and improve it.

What should be a checkout form

Availability. It is desirable that users are able to find it quickly. At the same time, don't do pop-up windows that appear independently and animate them. Everything flickering annoys and pushes away.

Small folded and link-shaped buttons perform well that open additional windows after a click. They are usually placed in the right-hand corner or on the contact information page.

Basket and checkout modules in an online store

Discreetness. The form should only gather necessary information and save it.

Data saving. All typed data are saved carefully even if a page is reloaded or a user closed a tab.

Built-in filling correctness check. The system should notify a user if some digits are missing in a phone number or a mail server domain is not specified. A share of potential customers is likely to close the page and go to competitors if at the end of a long form they receive an error message after clicking "Send".

Phone number correctness check on the site

Feedback helps customers clarify their issues with a vendor or receive their order confirmation. For that, you can send a letter with the order number and the estimated delivery date immediately after receiving an order.

What to consider when creating an order process

Every business is individual; therefore you should individually create each web form. However, there are general points:

structure;
input field;
caption lines;
action buttons;
checking/feedback.

The structure of a checkout form

If you sell a digital commodity, it is enough for a user to simply specify their email address. After that, they automatically get a variety of payment methods. Remove extra fields as not everyone wants to fill them in.

Remaining questions should be important and placed in a logical sequence; otherwise, a visitor will be confused.

How to form a structure:

Group related questions. There is the "Personal information" block with a name, last name, patronymic, and birth date; or the "Account information" with a login, password, etc.

Put down questions in a sequence. It is easier and quicker to fill in the fields located placed down in one column.

Input fields

In the input fields, users answer your questions, specify their password, and select the correct option from the list. There are various types of text fields. When testing a form, make sure you picked them up correctly.

Required and not required fields. It is desirable to mark required fields with "*" not to drop your conversion rate, and it is even better not to ask for insignificant data.

Required and not required fields in the form

If there is an option to fill in the fields "By default", you need to make sure that they are automatically filled in with the information about visitors. There should not be any mistakes as users themselves do not check the lines that are filled in automatically.

It is desirable that there are information input masks. For phone numbers specified by visitors, there should be brackets for the carrier code, spaces, and dashes between digits. Thus, there will be fewer mistakes made by potential customers.

A good checkout form requires minimum effort: customers should manage to switch between fields and edit them with a single keyboard.

It is better to highlight questions users are answering so that they do not lose track of them. You can set up any highlighting method or use autofocus.

Action buttons

Attention is paid to important actions. The "Done" or "Subscribe" buttons are highlighted with color not to confuse users. If there is the "Go back" button above the form for filling in, it is better to remove it from there as users can accidentally push it.

No buttons with several actions. It is better also to remove the "Reset" buttons as users can accidentally push them, too.

How to improve an online checkout form

Test its efficiency. Analyze how many steps users make when filling it in, on what stage they make most mistakes;

Сreate fields in the correct order. It is important for phone number fields to have brackets and dashes, and points or slashes for birth date fields;

Build-in hints in the fields. They should disappear as users fill the fields in.

Mobile checkout form

It is desirable to optimize a web form for mobile devices not to lose your audience. Applications are an ideal option. If you just launched your resource, try to reach for your audience in another way. For example, by quality adaptiveness to the mobile version.

What should be considered in a mobile form:

Significant questions. Requests to input an alternative address, email or a phone number are annoying. It is also inconvenient to read over questions and then type answers on a small screen. Three to five fields are usually enough: first and last names, phone number, payment method, delivery method, and address.

No "Personal information" and other blocks. Questions where a name, last name, and patronymic are typed in three separate fields, should be better replaced by one field.

Vertical aligning. It is more difficult to work with the horizontal aligning as some question can be easily missed. Besides, many users like going through all questions before they start to fill in the fields. It is much easier to do that with the vertical aligning.

Drop-down lists. They save screen space and facilitate the filling process.

The buttons "Confirm" or "Send". It is located at the end of all fields and is highlighted with color. Otherwise, potential customers may not notice it. At the same time, the button color should be unobtrusive, and the form itself should be motionless.

Adjusted scaling. It is done via the viewport metatag. If a form is accidentally zoomed-in, fields or buttons will not be lost on a page.

Fast loading. If the speed is low, make sure whether there are heavy images. Customers filling in the form are ready to place an order. It hurts to lose them because of technical difficulties.

Adaptive keyboard. If a text is typed in a field, the system should provide a keyboard with letters, and if a phone number is typed, there should be digits. Switching keyboards steals time from users, and the risk of accidental mistaken pushes is increasing.

To facilitate the process of placing an order, you should set up the address auto-filling, including the use of a user location. Thus, there will be even fewer user mistakes.

Conclusion

A checkout form is the most important element of a website. It directly influences the occurrence of the order information. Make sure you have considered:

the form structure;
input fields;
captions;
buttons;
feedback.

After a visual examination of a form, it is better to ask your colleagues to fill it in. This will help make sure that everything works correctly. Finally, to reach for potential customers placing orders from their smartphones, it is better to make a separate form for a mobile version.

This article is a part of Serpstat's Checklist tool

Checklist is a ready-to-do list that helps to keep reporting of the work progress on a specific project. The tool contains templates with an extensive list of project development parameters where you can also add your own items and plans.

Try Checklist now

Learn how to get the most out of Serpstat

Want to get a personal demo, trial period or bunch of successful use cases?

Send a request and our expert will contact you ;)

Rate the article on a five-point scale

The article has already been rated by 0 people on average out of 5

Found an error? Select it and press Ctrl + Enter to tell us