Order Form Template and Best Practices

If you do not have a sharp looking order form that follows best practices, you are leaving money on the table in a big way.

Spending a little time optimizing your forms can be the most important optimization work you can do for your entire sales funnel.

You will want to test these frequently, but overall these practices do get better results for people who use them more often than not.

We will be going over the critical elements of an order form, different types of order forms you can use, as well as specific design practices that can take your sales page to the next level.

Elements Of An Order Form

There are items on a sales form that you simply cannot do without. Some are obvious, while other may not be. Either way you’ll want to take a look at the list below, take a look at each item, and see how they fit into the order form.

Contact Information

Here is where people enter their, well, contact information. The fields you want to have are:

• First Name
• Last Name
• Email Address

Shipping Information

Notice how we called this section “Shipping Information” instead of “Billing Information”. Whenever possible throughout the order form, you want to phrase as much as possible as the customer is receiving something, not parting with something.

The fields you want here are:

• Street Address
• City Name
• State
• Zip
• Country (if selling outside the US)

Quantity & Credit Card Form

This depends on your product. This can actually be a number of options, ranging from size (for clothing), color, shape, and so on.

However, if you’re promoting a quantity deal, you will want to make sure that you have a mid-level selection as highlighted in yellow with words in red saying “Most Popular!” or something to that effect. Draw the eye away from the lowest selection whenever you can.

The fields you want here are:

• Quantity/Option Select
• Credit Card Payment Form

Call to Action Button

This is where the magic truly happens.

Once the customer clicks that button, a sale is made. Hallelujah!

To make this scenario much more likely, never EVER have the word “Submit” on your button. Very few people want to submit to anything, ever. Instead make it read like what the customer is thinking, like: “Yes, send me my 3 bottles of X”

Also, make sure it stands out from everything around it with its color.

There are some items you want to include under the button to make it even more effective:

• Timer (to elicit FOMO)
• Credit Card logos (for trust; meaning they are more likely on a secure site and their card information is safe.)

Product Info

Here is where you are reminding your customer what they are getting when they buy from you.

Here are the elements to place on the side, next to the order form so they can see this as they’re filling out the order form:

• Product Image
• Descriptive title
• Bullet point descriptors (reminder of what they’re buying, and why)

Order Form Variations

Standalone Order Forms

Standalone order forms are forms that you typically see in any sort of product purchase from a single page, a big ecommerce site, and so on. It’s by far the most common order form you will see online.

2-Step Order Forms

In simple terms, you have an order form that works in two stages.

In the first stage they enter in their shipping information and click the continue button. Stage two is when they actually enter in their credit card information.

But here is the magic: when they click the button after they fill out their shipping address, it elicits a “yes” from the customer, and it’s much easier at this point to keep the momentum going.

Sometimes they are right on the product page, so the customer can order the product right then and there, without going to a completely different page.

A 2-Step order form comes as a template within ClickFunnels, the software we use to build our sales pages, as well as the rest of the pages in our sales funnels.

Best Practices

Again, if you aren’t following best practices, you are leaving money on the table. Without further ado, let’s dive into these sales page best practices.

Less Is More

The more fields you have for the customer to fill out, the less likely they will finish it. The best thing you can do is to streamline the form by getting rid of as many fields as possible.

In a case study from Unbounce, an 11-field contact form was replaced with a 4 field version, and the form completions jumped by 160% with the quality of the submissions staying the same.

In another test, a 5-field form outperformed a 9-field form by 34%. There was also on drop in data quality or lead quality.

In fact, Baynard Institute found that 27% of online shoppers that ended up abandoning their cart did so because the checkout process was too long and complicated.

Of course, keep the form fields that you definitely need for your business, and you may require more data than another business (especially true for B2B companies). But if you’re not 100% sure you need it, most likely the answer is that you don’t.

Single-Column Beats Multi-Column Forms

You can have a page that is two-column, but it flows better when the form itself flows vertically. Single-column forms are typically easier to complete. You can simply use the other column to include information about the product, testimonials, and so on next to the order form.

Communicate Errors Clearly

Every now and again, users will make mistakes on your order forms. How you handle error messages when those mistakes happen will greatly affect the user experience.

Make sure your messages are clear and help the customer clear up those errors with as little effort as possible. If possible, make the error messages inline, meaning they are located at the form field where the error is taking place (and not at the top of the page; especially for longer forms)

Use Inline Form Field Validation

Similar to error messages, you want to communicate to a user whether their submission is okay or if they need to change something.

Inline validation is a great way to find, alert, and correct errors in real time. Instead of waiting until the customer hits the submit button to learn of their errors, they can learn right away what went wrong and fix them on the spot with no wasted time.

Order Fields from Easiest to Hardest Fields

When someone takes a small step or action toward something, they’re far more compelled to take the remaining steps to the finish line.

For this reason, you want to put the easiest stuff first (like their name and email) and finish off with the more friction-inducing steps (like credit card information).

Wait until later to introduce the tougher form fields like credit card information or anything exceedingly personal.

Also, if the customer’s shipping and billing information are the same, give the option to copy that information from that first field so they don’t have to re-enter it.

Make Typing Easy

Be sure to include autoformat, allow for copy/paste, allow for autofill, and so on.

The general guiding principle for form design is this: make things easier for the user.

Especially on mobile, this means limiting the amount of typing they need to do to complete the form. One way of reducing the amount of typing necessary is to automate as much as possible.

In short: use Autofill.

When designing forms and deciding on autofills, some questions you should probably ask are:

• Do you have any good defaults for this field?
• What’s the history available?
• Do we have any commonly used values?
• Can you use the browser of mobile features or settings to populate the field?
• Can you calculate the field (autofill the state based on the zip code, for example)?

Autoformatting is also incredibly important. This allows users to enter data (zip code, phone numbers, etc.) any way they want. It takes just a few lines of code to fix the formatting after they input it. Don’t allow laziness to destroy the user experience.

Indicate Whether Each Field is Required or Optional

Ask yourself if you really need all those optional fields. If you dig deep, you’ll realize that a lot of them may be unnecessary.

For example, what would be easier to fill out? 4 fields that have a dropdown for the title, one field each for first, middle, and last names; or have a “Full Name” field that takes care of it all in one shot?

Initially, you want to focus on what information is really necessary to get the visitors started. Make sure your visitors aren’t thinking to themselves “Why do they need this?”

But if you want optional fields on your form, be sure to mark them as such.

Name and Phone Number Should Be On One Field, Not Multiple

Instead of a first and last name field, you can have the entire name on one field. The same goes with phone numbers. Don’t have a 3-4 field entry for one phone number. Just one field will do the job.

Again, the fewer fields you have, the better. This is doubly true for mobile.

Offer Radio Buttons Over Dropdown Selection

Users that are slowed down by interrupting user flow, being hard to read, and needing fine mouse movement to get the job done, they will most likely move on.

If you have the chance to use radio buttons over a dropdown menu, absolutely do that (unless the number of radio buttons would just be ridiculous. like choosing which country you’re from).

Why? Because it makes the form faster to complete.

Don’t Make Coupon Fields Prominent

When people see a place to enter a coupon code, they usually go to Google to search for a coupon. Some actually never come back. Leaving the site to search for coupons is actually a common reason for shopping cart abandonment.

Instead of having a big place devoted to a coupon code, what you want to do is have a text link that says “Got a coupon?” and clicking on the link to show the input field. Text links aren’t very prominent so people will pay less attention to them.

Avoid Clear Fields Button

Literally no one who goes through the trouble of filling out the form will suddenly want to erase it. If they don’t want to fill it in, they can just leave.

Worse, if they click the button on accident, that will have wiped all of that information out and they will not enter it again.

Offer Field Focus for Mobile

If you have a form with multiple fields, the last thing you want is for users to get lost in the form. This is doubly true on mobile, as smaller screens give people less control over the entire form.

Therefore, make the input field that is being currently edited stands out and is focused on while they type their information in.

Don’t Mask Passwords

While it may seem like a security concern to show the password as the user types it in, it is far better for the user experience.

Usability tends to suffer when users type in passwords and the only feedback they have is a row of bullets. Masking passwords won’t actually increase security, but it will cost you business due to login failures.

If you still feel like you need to hide passwords, at the very least provide the option to show and hide the password as they’re typing it in.

Wrapping It Up

So now we have cover the 3 major topics on sales pages:

1. The building blocks of successful sales pages
2. The different spins you can take on a sales pages
3. Money-making best practices for build out your sales pages

Take what you learned from here, test it frequently, and you should get awesome results from your sales pages.

Are you utilizing your sales process to its fullest potential? Take our sales funnel quiz to find out.