The Modern Marketing Blog covers the latest in marketing strategy, technology, and innovation.

Digital marketing: 6 steps for online form design

Designing a successful form is really about solving a fundamental problem. Most people don’t like to fill out forms. However, those of us in the digital marketing space need them to do this so we can learn more about them. The question is: how do we persuade a customer to complete a task that can be time-consuming, confusing, and unsatisfying?

If you’re creating the form, your job is to create an experience that’s quick, intuitive, and pleasant. You want to make this interaction easier for users while still getting the information that you need. There are many ways to do this. Even implementing a couple of small changes in your next project can lead to big gains in completion and customer satisfaction.

1. Goal and requirements

A form interaction depends on two things: asking a customer to input information and then getting her to submit this information. In order to do this well, it’s critical that the whole team is aligned on goals and requirements before the project begins.

When you’re starting a form project, ask the a few basic questions before you get started. Have you and other stakeholders defined the goal? What is the purpose of the form? What action do you want the user to take? What information do you hope to get about your customers?

2. Input fields

Once you know your goal and requirements, you should determine what specific data you’re looking to collect. These often begin as a list of form fields that include things like name, email address, contact information, and preference questions.  In addition to identifying the

In many cases, fewer the inputs you have, the more likely it is that the form will be completed.  A majority of sign-up forms use 3–5 input fields; some use as few as two. If you find you have many more than that, it might be good to prioritize the list of inputs, and even reexamine your project goals. You don’t want to overwhelm users with a lot of fields if it gets in the way of form completion.

[caption id="attachment_7790" align="alignnone" width="400"]This simple form has 7 fields, 4 of which are required. This simple form has 7 fields, 4 of which are required.[/caption]

3. Layout

There are many ways to approach form layouts. They can range from a single column of fields to a multi-column, multi-page interaction. This is fine —requirements and content can dictate different layout approaches.

The key thing in planning a layout is to create a clear sense of order and progression. You never want to leave the customer guessing about what she needs to do next. Tactics like numbered steps, logically grouped fields, and reduction of unnecessary elements help to create this order.

For many basic forms, a single column of stacked fields can be an effective design pattern. It’s easy to scan and adapt more easily for smaller screens.

[caption id="attachment_7789" align="alignnone" width="400"]Form with a single column layout. Sign-up form with a single column layout.[/caption]

4. Labels and type

Labels identify the purpose of a form field. As with layouts, there are various ways to approach form field labeling. Positioning, typographic styles, and usage are considerations for fine-tuning the form.

Label position is an important factor to consider. It impacts the width and height of the layout columns, as well as how users will read the form. There are a several options, including above the field, to the left, or within the field itself. I prefer to place the label above the field. It tends to save space, adapt better for small screens, maintain visibility, and create a consistent rhythm.

Type styles like size, weight, and color can be used to establish a visual hierarchy among labels and other form text. This helps users scan and enter information without having to think too hard.

[caption id="attachment_7792" align="alignnone" width="400"]This form uses top-aligned labels for easier scanning and layout flexibility. Notice the difference in type styles between the label and the input text. This form uses top-aligned labels. Notice the difference in type styles between the label and the input text.[/caption]

5. Calls-to-action

A well-designed form should have a clear primary call-to-action. This drives the user to complete the task. In many cases, this is to submit the form or continue to the next step. It’s best to make the main button one of the brightest and most dominant elements in the layout.

It can also be useful to provide a limited set of secondary calls-to-actions. These can provide users with other choices to keep users from abandoning the page. Secondary calls-to-actions are usually functional buttons with actions like “cancel,” “back,” or “reset.” Secondary buttons should use a more neutral color so that they don’t compete with the primary buttons.

It’s good to limit the number of tertiary buttons and links. The goal of the form is to get a user to complete a task. Links to other experiences can compete with the main action and distract users before they have a chance to do what you’re asking them to do. If tertiary buttons are necessary, it’s good to treat them as light text links.

[caption id="attachment_7794" align="alignnone" width="535"]The form appears in a lightbox and has only three buttons: submit, cancel, and close. The color and placement of the main button gives it dominance over other elements. The form appears in a lightbox and has only three buttons: submit, cancel, and close. The color and placement of the main button gives it dominance over other elements.[/caption]

6. Feedback

Providing users with feedback is an essential consideration for form design. Feedback can be described as messages that help a user complete the form more easily. It includes things like confirmation pages, hints and examples, and live inline validation. Good feedback should be anticipate common questions or errors, and provide information during the process to help users without impeding them.

Confirmation pages are a basic best practice for providing feedback. They inform the user that she has completed an action and describe next steps, often with additional calls-to-action. Confirmation pages can also be used for errors, though this is often better achieved with validation.

Form validation is a method of providing live feedback on a form as the user enters information. Validation rules set parameters for a field, and then display an inline error message if a parameter isn’t met. Using a friendly, conversational tone with these error messages can help make the experience seem more human.

[caption id="attachment_7796" align="alignnone" width="502"]This form uses in-line validation. If a required entry is skipped or formatted incorrectly, it displays a friendly error message when the users moves to a new field. This form uses in-line validation. If a required entry is skipped or formatted incorrectly, it displays a friendly error message when the users moves to a new field.[/caption]


By implementing these tactics, you can help make your form a pleasant experience for your customers instead of a hassle. And when making any design decision, remember it’s always good to test different ideas and make incremental improvements. Sometimes small changes can have big gains.

What tactics have worked well for you?

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha

Integrated Cloud Applications & Platform Services