This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Privacy policy

Accept and continue

Report a bug

Cancel
177
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

1
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.
Checkout online form design
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
2
Discreetness. The form should only gather necessary information and save it.
3
Data saving. All typed data are saved carefully even if a page is reloaded or a user closed a tab.
4
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.
Successful order notification

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:
1
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.
2
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.
1
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
2
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.
3
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.
Input masks in the order form
4
A good checkout form requires minimum effort: customers should manage to switch between fields and edit them with a single keyboard.
5
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.
Questions in the checkout form

Tags

Tags or captions next to fields help customers understand how input fields should be filled in. Essentially, these are questions to users. They should not disappear after the fields are filled in. Especially if these questions are written right in the input line.

Don't use Caps Lock excessively. Each question should better start with a capital letter. Questions with every word typed with a capital letter perform poorly. These captions annoy and complicate reading.

Action buttons

1
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.
Action button in the checkout form
2
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;
Registration and order steps
С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;
Checkout form input fields
Build-in hints in the fields. They should disappear as users fill the fields in.
Build-in hints in the input fields

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:
1
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.
2
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.
3
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.
4
Drop-down lists. They save screen space and facilitate the filling process.
5
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.
6
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.
7
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.
8
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 at Serpstat
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

Share this article with your friends

Sign In Free Sign Up

You’ve reached your query limit.

Or email
Forgot password?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Awesome!

To complete your registration you need to enter your phone number

Back

We sent confirmation code to your phone number

Your phone Resend code Queries left

Something went wrong.

Contact our support team
Or confirm the registration using the Telegram bot Follow this link
Please pick the project to work on

Personal demonstration

Serpstat is all about saving time, and we want to save yours! One of our specialists will contact you and discuss options going forward.

These may include a personal demonstration, a trial period, comprehensive training articles & webinar recordings, and custom advice from a Serpstat specialist. It is our goal to make you feel comfortable while using Serpstat.

Name

Email

Phone

We are glad of your comment
Upgrade your plan

Upgrade your plan

Export is not available for your account. Please upgrade to Lite or higher to get access to the tool. Learn more

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
View Editing

E-mail
Message
Optional
E-mail
Message
Optional

You have run out of limits

You have reached the limit for the number of created projects. You cannot create new projects unless you increase the limits or delete existing projects.

I want more limits