A complete guide to modern website form design (with examples)

When it comes to building web pages or landing pages, it all boils down to this: Anyone visiting your website has a concrete reason for doing so. Whether they’re looking to make a purchase or get more information, they have a purpose.

One of the most important factors in helping the visitor fulfill that purpose is a website form. Forms are key in keeping website visitors happy and moving forward as a customer.

The form allows a wide variety of actions, including gathering information on a visitor through questions, making purchases, creating new accounts, applying for jobs, signing up for a demo or free trial, or contacting the company who runs the website. Forms are typically the vehicle in which a visitor completes their initial purpose of coming to a particular website.

Because the form is such an important part of a website, it stands to reason that the design of this form is important as well.

What makes up a website form?

In order to design a successful form, you first need to understand all the different pieces that make one up.

• Internal framework. Each form has a unique framework that dictates how it will appear to website visitors, how one question/field flows between the previous/next, and how the questions are structured.

• Instructions. If necessary, many forms will include a brief breakdown of how to navigate the form and fill out the fields.

• Form fields. These are the places in which a visitor can interact with the form, whether it is to type in a password, answer a question, or input any other data, they can do so within form fields that take on different configurations, including text boxes, buttons, and more.

• Buttons. Depending on whether you’re using a single-step or multi-step form, you may have different amounts of clickable buttons. When the button is pressed, a programmed response occurs, such as moving to the next page or submitting information.

• Internal autocheck. Website forms can only accept certain answers, symbols, character lengths, etc. So if the user inputs something invalid, an error notification will appear and draw the user’s attention to the suspect field, typically with a red text correction suggestion.

• Automated response upon submission. After the form is completed, an automated confirmation email is sent to the user to notify them that the form has been submitted – which could include next steps or a friendly message of thanks. It can also show that all data and answers were collected properly, or it could state that some fields still need some work.

Best practices

When it comes to website form creation, it’s easy to get ahead of ourselves. Companies often focus only on what the form will do (bring new leads, gain information, spread brand awareness, etc.) but neglect to strategize the design details.

What design pattern will suit your purpose best? And will it be the right fit for your likely visitors? Where should the form land on a webpage?

These questions and more need to be answered when creating a successful form. Here are some of the most important best practices to be aware of.

Column conundrum

Having a single-column form versus a multi-column form seems insignificant upon first glance. How different is it for a visitor to fill out a field horizontally instead of vertically?

Actually, there’s a huge difference. Mounds of research show that limiting forms to single columns increases the chances a user will not only begin the form-fill process, but they’ll also be less likely to abruptly quit out of frustration.

Don’t believe us? See for yourself.

The left image is a multi-column form. Notice how the user will have to jump from left to right awkwardly through the process?

The right image is a single-column form. As you can see, the user can move smoothly straight down the form from field to field.

Uncomplicated is key

In an ideal world, each form-fill would land us boatloads of information. But we are living in the real world, and in the real world, we take what we can get.

When we create a form, we need to keep it simple for our visitors. If the form prompts too many questions, is too complicated, or too lengthy, users are more likely to skip out. Find your sweet spot in terms of number of fields/questions and stick to it. Your number of conversions will be much higher as a result.

Categorize and group if possible

It’s jarring for a user to jump from one category to the next without a break when filling out a form. By separating fields and grouping them by their category, the form will flow smoothly for the user, moving them from things like ‘Account Details’ to ‘Payment Details’ rather than smushing them all together.

The form pictured above demonstrates this perfectly, categorizing similar questions together to make the fillout process more seamless and sensical.

Field/question alignment: lefty loosey

When constructing a form, you have the option of placing your text fields either left, center-left, center, center-right, and right.

Though you might have an aesthetic preference, it’s better to align them on the left side of the form. Research has shown that this makes it easier for users to read and complete the form.

Order in the form

A form looks and functions best when its fields are ordered sequentially. To do this properly, consider the potential visitor to the website. How would it best suit them to order the questions? This can usually be determined by applying common sense, for example, it would be illogical to ask for a person’s payment details before asking for their name.

Following that same logic, it also makes sense to place the easiest questions earliest in the form, and wait until the very end to ask harder ones. Think name and email before credit card number. You don’t want to overwhelm your visitors at the beginning with difficult questions, otherwise they might bounce thinking all of your questions will be that hard.

What’s in a name?

Giving your form a name is crucial, as it gives users concrete reason to fill it out. Without a title, visitors may not know the exact details behind the form or why they’re being prompted to fill it out.

Optimize for mobile

In recent years, website visits through mobile devices, such as smartphones, have increased considerably. Even some of the desktop users might have initially discovered your site on mobile before returning.

In order to not lose this significant portion of visitors who will want to fill out your form on a mobile device, make sure your forms are mobile-friendly and look/function just as well as on desktop.

Labels, Where art Thou?

We know that the field aligns perfectly on the left, what about the form field labels? When it comes to these, the consensus is much more nebulous. A case can be made for each placement, so we’ll lay out the pros and cons of each.

Left-aligned labels

As you can see in the above picture, left-aligned labels look a bit wonky. There’s something user-unfriendly about having the label before the field, and it tends to slow down the form-filling process. It also pushes the form farther right, which is problematic for users on smartphones.

Of course, if slowing the user down is your goal, left-aligned labels might be a valid choice. For example, if you’re asking for a phone number, you want the user to take their time to get it entered correctly.

Right-aligned labels

Right-aligned labels look better than left, simply due to the fact the label is closer to the field. This makes it easier on the user and should quicken completion times.

The problem comes from the aesthetic point of view, which is clearly unsettling. The labels appear to start out of nowhere, as if floating in the middle of the page.

Top-aligned labels

Top-aligned labels are the most visually honest and appealing. On top of that, they are proven to be most accessible to users and offer the fastest completion times on average. They also tend to save space on average, which is better for mobile.

An example of a traditional website form design done right

Let’s take a look at this form by streaming service Hulu, who specializes in offering personalized TV shows and movies for customers. Their signup form is something we feel is well executed. At the outset, it provides clear instructions explaining the form's purpose, and the top-aligned labels make it evident which information belongs in each field without wasting space.

Go beyond forms with interactive flows

If you want to have a fully-customizable, multi-step form with a mobile-friendly landing page, all drag-and-drop, then Heyflow is the ticket.

Heyflow is a revolutionary no-code platform designed to empower you in crafting dynamic flows, the next evolution of forms. Our customers on average see a 2.3x lift in their conversion rates with heyflows.

These flows transcend the traditional notion of forms by delivering interactive, engaging experiences that effortlessly transform your website visitors into valuable leads and satisfied customers. Impress your audience with intelligent functionalities and striking design elements. With Heyflow, you can even construct entire landing pages and tailored lead funnels.

Want to see it for yourself? Here are three examples of flows our customers built.

1. Rocket Mortgage

Rocket Mortgage created a seamless interactive flow with Heyflow to help users move through the mortgage rate calculation process. They minimized the input required from website visitors by using multiple-choice questions with pre-set options.

2. Forbes Home

Forbes Home keeps it short and sweet with this lead capture flow. As users are guided through the smooth interface, they can provide the relevant details needed for the project and are done in just a few clicks.

3. GetSafe

Lastly, let’s look at modern insurance company GetSafe. The flow they built helps website visitors identify their insurance needs. It incorporates smart calculators, allowing users to simply move sliders to specify precise numbers – instead of manually typing values into fields – making the experience much more user-friendly compared to a standard form.

If you want to try out Heyflow yourself, start your 14-day free trial now, no credit card required.