Designing Web Forms

It’s not you, it’s me

If a customer abandons filling out a form than most likely, it’s because of the form and the experience surrounding the process, not the customer.

Understanding your customer’s frustration

Have you ever used your phone to buy something online but the form is not compatible with your device, so you just give up? Or have you entered the same details a million times when applying for a job?

These are two common problems that users still experience with web forms. Time and time again, users are frustrated by the tedious task of filling out forms. When creating a form, many people fail to follow UX Design practices and think of their needs rather than the users’ experience.

According to Manifest, 81 percent of people have abandoned an online form after filling out the first section. For companies wanting to collect data, forcing users to fill out a web form has been a necessary evil. However, there are ways to create a seamless and even remarkable (yes, it’s possible) experiences with online forms.

Here are the dos and don’ts of designing web forms to help you create a form that users actually want to fill in.

The Dos

State your purpose

Give your form a clear purpose and make that purpose known to the user. Create a straightforward headline that avoids confusion, so when users enter the form, they understand why handing over their personal details is important for them — not the company.

Make it personal

Show that you’re a human and represent your brand by having a conversation with your customers. Using an online form builder like Typeform allows you to create a personalized and conversational experience with leads.

Give clear instructions

Create credibility and trust with your customers by keeping your language clear, concise and consistent. Break your form into categories or segments to give flow to your form and improve its readability. If you want a user to respond with one or two words, add a short-form field. If you want to capture more information, create a long-form paragraph section and encourage them to give a description or extra detail.

Predict answers

In certain sections, you may want to give a default value for a number, percentage or currency. For example, add a dollar value for a purchase order or limit the number value for credit card entries. To further predict the user’s answers, you can add helper text or popovers. Helper text gives context to a question and popovers provide more information without asking a lengthy question.

Enable autofill

Google’s Chrome Browser securely stores personal data, which speeds up the process of filling out forms. A user’s credit card details are stored in Google and according to Google’s VP of Chrome, enabling autofill can increase a form submission by 25 percent.

It’s time to put a stop to user registration. You can minimize a user’s barrier to entry by adding a social sign in with Facebook or Twitter. These social sites store user data and automatically populate it within a web form. This saves the user from entering their name and email when signing up for a subscription to a blog, product, service or trial.

Use dynamic fields

When creating your form, consider how a user might respond. Not all information or questions may be relevant to every user. For example, asking the question: “are you looking to buy a house?” with the proceeding question: “what price range is within your budget?” does not apply to all users. The second question does not apply to people who responded with a “no” to the first question. Creating a dynamic field would ensure that users aren’t filling out un-related information. For example, for users who responded “no” to the first question, you may want to end the form or take them to a related question like: “when will you be in the market to buy?”

Create a long-term relationship

Email opt-in tools like SumoMe’s Welcome Mat, Autopilot’s Proactive Headsup and ThriveLead’s list building plugin for Wordpress help initiate long-term relationships with customers. These tools create three necessary components for capturing information with web forms: presentation, offer and promise.

The Don’ts

Overcomplicate

Don’t overcomplicate your form by asking long-winded questions and adding too many choices. Make every word and every question count, ensuring each is aligned with the purpose of the form. According to Barry Schwartz in his book Why More is Less and The Paradox of Choice, too much choice creates anxiety and reduces the satisfaction with the choices people make. Choice overload results in people freezing and not making any decision because they fear of making a bad decision.

Be aggressive

While being aggressive may work for a sporting team, it doesn’t work when you’re trying to collect a customer’s personal data. Use language that welcomes and invites users to submit their information. The three percent opt-in rate that you may receive by being aggressive isn’t worth the 97 percent of people who don’t subscribe.

Overdesign

When you’re creating a form don’t forget about the structure and design. Take into account the user’s experience on desktop and mobile devices and ensure the ease of navigation no matter the size of the screen. Too many images and cluttered text can impede the navigation and confuse the user.

Collect unnecessary information

Don’t make your users fill out details you already have and don’t make them answer similar questions that offer no value to your company. Think about what you already know about your users and give them something in return for their information. For example, after receiving a name and email, you might give your user a subscription to your newsletter, a free trial to your product, access to a webinar or event tickets. Ensure there is always some type of exchange taking place.

Optimize for desktop only

According to OuterBox, in 2017 a third of users made purchases on their mobile device. If your form is not optimized for mobile, that’s a lot of revenue your business will lose. But it’s not just for eCommerce platforms. All industries must consider the mobile experience when designing forms, websites and even products.

Undefine user errors

If a user makes a mistake, there’s nothing worse than not knowing where it occurred. Highlight where the error occurred, so your users don’t fill out the entire form again. You can also show errors as they occur so the user can amend them straight away before proceeding to the next field.

Create intuitive web forms and continue that personalized experience with Autopilot’s automation marketing software. Learn more about how you can integrate Typeform or create a Proactive Headsup message within your customer journey.