Whether it’s a purchase, signing up, or a survey, one needs to put some information into a form. Customers have to take time out of their day and fill in the requested information they’ve definitely entered hundreds of times before – name, surname, phone number, email, address, payment card, the list goes on.
Users naturally find this step quite monotonous and annoying, but the torture begins exactly when they deal with a poor form design. A poorly-designed form may result in website abandonment and low conversion rates, as frustrated users won’t be back to the troublesome pages.
The form design influences the overall user experience, as follows a good form design enhances UX and boosts conversions. That’s why it’s important to provide your customers and corporate website users with the best form design, therefore urging them to choose you over and over again.
Great web form design shows that you treat your customers, appreciate their time, and want your brand to be helpful, professional, and enjoyable to work with. So how to design forms?
First of all, let’s examine the basic elements of design forms:
- The structure or form layout encompasses the order of input fields and logical connections between them providing a seamless and intuitive user experience.
- Input fields are the fields designed for user input; they are text fields, password fields, and various checkboxes.
- Field labels are the definitions applied to the corresponding input fields.
- The action button is an ending operation of submitting the input information.
- Feedback helps users to find out the results of their inputs, either by accepting the form or rejecting it because of possible errors.
Above mentioned elements are obligatory components, while forms may also include the optional ones:
Woorise is the easiest way to create lead generation landing pages, forms, quizzes, surveys, viral giveaways and popups to help you grow your business from a single platform. Explore templates
- Validation stands for automatic information check.
- Assistance is an explanation of how to fill out the forms.
A form is a mediator in the interaction process between the user and the app. Thus design form should provide a consistent and coherent experience to the user and make it as enjoyable as possible to work with the app. All the components should be implemented properly, but how to do this?
There are some form design principles and practices to take into consideration in order to make your design form shine! Web design form examples are provided. Let’s dive into best forn practices tips & tricks.
1. Greet your respondents
Before presenting users with queries welcome them and communicate the purpose of the form straightforwardly. It’s a perfect chance to make a good first impression and put the interaction process on a friendly tune.
Have a look at ALUXION contact form:
The form begins with the greeting of the visitor. Another point of this form page design is the line of being thankful to the user, showing that the brand treats the user’s time. Also, such an introduction demonstrates the brand’s professional approach. That’s exactly what a good first impression is.
2. Apply less information
To ease the process of interaction use less information in your design forms. Ask only the most relevant and important info about the users. For instance, there is no need to ask their preferred dishes or names of their pets, do it only if it is relevant to your specific form requests. Be simple and straightforward. It boosts the completion time and reduces the risk of a user’s irritation.
Apple definitely knows how to do this:
Apple sign-in form is extremely simple, as it supposes the user to fill out only two fields – Apple ID and Password. The design form adheres to the rule of asking for less information thus facilitating the sign in process.
The clear and smooth design uses no sophisticated elements and contributes to the overall simplicity that Apple promotes on every platform of its presence. No muss, no fuss.
3. Use a single column design
Multiple-column designs might distract the user’s attention, thereby the completion time is increased. It’s better to apply a single column design. That will ease the filling out process, as the responders will allocate their attention successively furnishing the fields from the top to the bottom.
Have a look at this form field design:
Spatulah registration form is quite simple and easy-to-navigate. All the queries are placed into one single column. The design is bright and kind of animated. It’s simple and not distracting, but at the same time an eye-catching form example indeed.
4. Arrange fields into semantic groups
If your specific queries don’t fit properly into the one-column design, you can reorganize them correspondingly to their meanings. Dividing fields according to the semantic groups promote consistency and logical order of the questions. Escaping the massive stream of queries, users will more easily manage the form.
Braintree contact form is a great example of an efficient semantic arrangement:
Responders read the information by portions and clearly understand what to fill out in this or that field. They do not have to spend much time completing the form, as the logical arrangement of the information promotes simplicity and helps users to digest the content.
5. Mark optional fields if there are few of them
As a rule, there are more mandatory queries than optional ones. For instance, if 5 fields out of 7 are obligatory to fill out, then there is no sense to mark all five. It’s better to indicate 2 optional fields, escaping over furnishing the form.
Yelp has only one optional field while others are obligatory to fill out. Marking the optional field instead of those 5 mandatory is a good decision, as the entire form looks clean and nice:
6. Adopt mobile-friendliness
As half of the overall traffic comes from mobile phones, it’s quite reasonable to make it possible for mobile users to fill out the form with the same comfort as for desktop users. User-friendly design allows you to gain trust from a vast audience.
Have a look at Apple sign-in form accessed by a mobile user:
It’s a good example of a responsive form design. It’s extremely important to provide all users with a good experience, regardless of what device they use – be it a laptop, tablet, or a mobile phone.
Besides, there is one more useful function to adjust if you want your form to be user-friendly. Enable the ability to switch to the next form field. It is a good alternative to the constant clicking on the necessary line. It’s time-saving and quite handy.
7. Label fields properly
Labeling each field goes without saying. The question is how to label a field? The main rule is not to hide a label while answering, so the respondent will not lose the content. If there is enough space use them outside the input field on the left side, if not – you can put labels on the top of the field. Also, labels can be put into the field, but the point is to make them visible at the moment the user types.
Omada Health contact form design uses labels outside the field:
Thus the user will not lose the point and will know for sure what content to type in each input field.
8. Employ pre-fill and auto-detect
The point of the good design form is to facilitate the filling out process. Employing pre-fill and auto-detect functions you help your customers and save their time. If you already know some information then fill it automatically. For instance, the user’s city and the country are being easily detected via IP or geolocation.
Braintree contact form automatically detects the country via the user’s geolocation:
9. Use on-brand imagery
Assuming you’ve put substantial time and effort into creating a strong brand image for your site, it’s ideal if your contact form follows the theme. Otherwise, people could be confused and experience a sense of disconnect.
The contact page for The Walt Disney Co. draws people in by using an immediately noticeable header image. It features a black and white photograph of Walt talking on the phone with a happy and open expression on his face. There’s also a Donald Duck figurine partially visible near the bottom of the picture.
If a person scrolls down from there, they see categorized groups of links that go to the right contact forms. Whether someone needs to get in touch with a specific Disney park, has a media inquiry or wants to make a donation, links to forms for doing all those things and more appear neatly organized below the image.
Using such a prominent picture in the header of the forms page works well here because it helps set the tone The Walt Disney Co. undoubtedly wants to achieve. The welcoming image on Walt Disney’s face helps encourage site visitors to reach out with their concerns, comments or questions.
When you get involved with choosing pictures for a form, think about whether a selection would support your brand image and ideals. If not, keep searching for a better option. The Walt Disney example shows how much power a picture can have. However, if an image seems distracting or ill-suited for the form, it won’t strengthen your brand.
10. Always explain why and what for if you ask for specific data
If you need some specific information, always explain the purpose of the query. This is a way to gain trust and credibility among the responders. Otherwise, they are not likely to share their confidential information.
Look at the way how Bestbuy explains why it needs your email:
11. Use input constraints for each field
Input constraints are min and max length, the format, use of specific symbols (numeric, alphabetic, alphanumeric) in diverse fields. Input constraints significantly decrease the number of mistakes and wrong data.
PayPal sign-up form puts a constraint on alphabetical symbols in the mobile number field. The user has no way of filling the letters or some other symbols except numerals. It helps to avoid inappropriate data:
12. Align text to the left
Aligning the text to the left is a matter of mere physiology – it’s natural to read from the left to the right. Thus, the user’s eyes don’t have to jump across the page to get the necessary data. Also, it lowers the amount of time needed to complete the form.
The text is aligned to the left at Merriam-Webster register form:
13. Use autofocus and enable autocorrect
Autofocus is another useful tip that helps the users to fix their attention on one field, without losing the point. Autocorrect, in its turn, helps to avoid unintentional mistakes and allows users not to retype the information.
Chanceupon contact form uses more than just autofocus. The form consists of multiple fields but the point is that they are all clickable. The user only needs to make a choice and click on the preferred field, instead of typing. As the user clicks on the field it becomes yellow. The enabled function provides users with a consistent and enjoyable experience and eases the process of form filling.
14. Use inline form field validation
The best way to notify the respondents about the mistake and make it evident is to highlight the field and show the error inline. Some services show the mistake only after the form is complete. It’s quite reasonable to notify the users right after they answered the question and allow them to correct the error right away.
Take a look at Walmart inline validation:
15. Reduce repetitive actions when possible
Creating an outstanding form also involves thinking ahead about how to streamline a person’s experience. E-commerce merchants often do that by urging first-time guest shoppers to sign up as registered users. The site typically populates the registration form with content that people recently inputted when placing orders. Doing that makes them more willing to complete the fields, given that many of them already include the required information.
Another possibility is to let people accomplish several things simultaneously. NPR did that when designing a form that site visitors use to sign up for its newsletters. Since the organization has so many, it made the most sense to create an option that allowed registering for several at once.
The only field people fill out contains their email address. Before submitting the form, though, visitors select checkboxes to indicate which newsletters they want to receive. Besides the top section showing the featured newsletters, people can scroll down to see all their options.
This example also does an admirable job of offering transparency. The form tells people how frequently the newsletters come out and lets them see samples before signing up within the box for each option.
Think about what you could do to decrease how much time people spend providing information to you when designing a form. Many will eagerly give details to you — especially when getting something in return for doing it. However, they’ll appreciate it if you do what you can to minimize the effort required to interact with forms.
16. Be clear in your error messages
It’s important to provide users with a precise explanation of what went wrong. Avoid general messages like “Error 999” or “Please, try again”. The point is to indicate the mistake as precisely as possible so that responders would easily correct the wrong data.
For instance, this is how Amazon provides the user with an explanation of what went wrong:
17. Enable complete button only when the form is completed
Activate the next-step-button only when the users have responded to all mandatory fields and there aren’t any errors. This will keep the responders focused on the queries and will not let them miss something important. Otherwise, you had to spend your time reviewing completed forms and sorting the ones that were filled incorrectly.
18. Take users to different forms based on needs
No matter the nature of your business, visitors will come to your website for a variety of things. That’s why having a form field that says “Your comment” may not be specific enough.
The alternative is to design the form to generate different fields based on how someone responds to an initial question. BrokerNotes, a site that helps people find stockbrokers, takes this approach with its contact form with excellent results.
Notice how the first question on the form includes a drop-down menu. People can use it to get more specific about the nature of their queries. Once they make a particular selection, additional form questions appear based on what they chose.
Check out the progress bar at the bottom of the form, too. Many people appreciate a general idea of how long it will take to complete the questionnaire. The bar updates with each page of questions a person answers, helping them estimate when they’ll be done.
Consider using this approach, especially if the questions people ask generally fall into several distinct categories. The BrokerNotes form has an “Other” option for people’s needs that don’t match what’s on the list. If people choose it, they see a “Message” form field next and can type into it. In all other cases, the form fields following the first choice relate to what the site visitor indicated they need.
19. Apply real-time feedback
Don’t make the users wait for an email letter with the feedback, instead, give it to them right after the form is filled. Waiting for results too long might be quite irritating. What is more, the longer your website users wait for the feedback, the more confident they are that something went wrong and you didn’t receive their inquiry.
20. Give people expected response times
Another best practice for forms is to tell people the average time they’ll need to wait for a response. Providing that information allows them to decide whether using this method is the best option to get their questions answered. Airline brand jetBlue does that with a form appearing at the bottom of its contact page.
The date range provided in bold text clarifies that people should not expect near-immediate results. However, other options for getting assistance appear above the form on this page.
The airline first provides some links to topic-based help pages related to the questions people ask most often. From there, they can start a chat with a representative or find the right phone number to call for their region.
However, as the “Share a Concern” header indicates, the form works best for people who want to raise complaints. jetBlue representatives do not intend for travelers to use it for urgent needs. Interestingly, the contact form includes an “I’m traveling within 48 hours” checkbox, even though the paragraph above the fields instructs people to use other methods to get fast help.
If you go with this approach, look at your current customer service metrics and figure out how quickly your team can realistically get back to people. Saying they can expect a response in 23-48 hours sounds great, but your company must be able to uphold that promise.
21. Strike the right tone
It’s also ideal if your form matches the tone used in the rest of your website. Additionally, it should be appropriate for your business. If your company is a doctor’s office or a bank, using a lighthearted tone is probably not the best choice. However, using a bit of humor can sometimes win people over if it supports your overall company brand.
For example, Nebular is an agency that helps clients design engaging marketing content, ranging from virtual reality experiences to iPad games. Its contact form example shows that you don’t always need to stick to a formal tone.
The part at the top assures that even if you’re so upset as to throw tomatoes, the company will put them to good use. It also bears mentioning the tagline is “100% chance of awesome.” That gives the “Awesome Message” field a double meaning. The word matches the company’s desired hip tone, plus strengthens its brand messaging.
This form also follows a best practice with the use of contrast. The white-hot pink color scheme makes it easy for a person to verify they type the right details into each field. Nebular’s decision to make the fields and font large also aid readability. As you select which tone to use, don’t ignore or forget to implement other best practices. A form should ideally include several at once rather than just doing one thing well.
22. Make accessing assistance straightforward
The impulse to seek help from a fellow human when needed comes naturally to people. However, they often forget that the answers they require may already be available elsewhere. Your form could also include links to resources that could help people get help without submitting a form.
Pet supplies company Chewy implemented that best practice by linking to the “Frequently Asked Questions” section in the text above the fields. Notice how the form also refers to visitors as pet parents, which aligns with Chewy’s brand voice.
Other companies suggest that people look on managed forums to see if other customers asked the same questions and already got them answered. You want to emphasize that filling out a form is one of many ways to get help — but perhaps not the fastest.
One downside of this form that actually reduces accessibility is that it requires a person to have an account with the site before using it. Avoid following that strategy, if possible. Some people may have questions they want answered before they decide to become customers. You don’t want to give the impression that people have to work too hard to get assistance.
23. Specify what people get for registering
Many of your customers will offer details that can help you cater to their needs. You’re most likely to get the best results by telling people the precise benefits they’ll get from engaging with your form and providing accurate information.
Ella’s Kitchen is a company that provides foods for babies and toddlers who are being weaned off milk. The company offers a contact form that parents can use to get tools that boost their chances of success in what otherwise may seem like a daunting task.
The form is more extensive than most others covered here. It includes questions about cooking preferences and what someone most often looks for when shopping for baby food.
However, the company tries to make it worthwhile for people by describing what they get for their time. The top of the form highlights the four things someone will receive after registering. Such a design choice makes it more likely they’ll scroll down and start entering content into the fields.
If you’re going to require more than a minute of someone’s time for them to complete a form, telling them they’ll get “exclusive perks” or “member-only previews” may not be enough to interest them. The Ella’s Kitchen approach gets the relationship off to a strong start with clarity rather than vagueness.
24. Don’t forget about the thanks page
The thanks page is synonymous with the welcome page. Employing these two pages you provide your customers with a consistent experience and again show your professionalism. Thank You page is the last step in your conversation with clients and it’s your last chance for building a long-term relationship with them.
So our advice is to take your time and create a Thank You page with the content and design you can be proud of. And don’t forget to complement it with a special discount or gift to turn your clients into your regular customers.
25. Clarify the required fields for your form
A well-designed form also tells people which fields they must fill out and which are optional. Some visitors may think it’s sufficient to provide their name and a comment when that’s not the case. They become frustrated if the form doesn’t submit because they failed to provide all the information a company requires.
Ninth Wave is a company that offers an open banking platform for sharing permissioned information. Its form uses asterisks to confirm that people must enter data into every field to successfully submit their information. That’s a widely utilized choice that provides friction-free experiences when interacting with forms. This example catches attention without becoming too distracting.
26. Call to Action (CTA)
Almost all web forms include CTA (call-to-action) buttons of various kinds. It can be “Learn more”, “Contact us”, or “Sign up” buttons. The more clicks on your CTA button – the higher your chances to gain new leads or customers. By clicking the CTA users are presented with a design form.
That’s why it’s crucially important to design the call-to-action button. First of all, a CTA should be placed in an easy-to-spot location and be eye-catching. The button should look nice enough to grab the visitor’s attention.
Netflix uses vivid red CTA button:
The CTA button is extremely visible and digestible. All important issues on the landing page stick to the one color that attracts visitor’s attention immediately. That’s the purpose.
27. The design and some additional tricks
Choose an appropriate pleasant color palette and appealing fonts. While designing the form, do not forget to stick to the overall web platform design to maintain consistency. Good looking forms have more chances to attract visitors and convert them into customers.
Your design form should be as comprehensible as possible. That’s why try not to employ some complex and sophisticated design elements. It’s better to keep it simple and design a form in moderation. But it doesn’t mean that you should deprive your form of a compelling image and reject any creative ideas that can help you to gain the user’s attention.
Let’s have a look at one of the examples of well-designed forms:
El moderne
It’s a booking website. The contact form is extremely simple, but it has some peculiarities. All the data presented is framed into one cohesive letter sample. It’s a great decision as it sticks out from the common form pattern and provides the users with an exceptional and enjoyable experience.
Another way to succeed is to make your design form interactive and engaging by applying various images or short animations. This will turn the monotonous process into some kind of story the user goes through.
Look at this form design inspiration idea:
Save Green by Minh Pham
This project is a great example of excellent interactive design forms. The essence of the project is to save trees from felling. On the website, the bear tells the visitor his story and asks for help. Thus the user feels some kind of belonging while surfing through the website. That’s how interaction works. The use of appropriate and engaging animation can greatly enhance the user’s experience.
Another good web form design is created by Rostislav Achilov.
This fancy gym app form consists of two modes – Register and Login. While users switch between these forms, the animation on the left changes correspondingly. This design decision is extremely entertaining, engaging, and highly motivating.
Conclusion
Undoubtedly, the website’s first objective is to adopt a good website design. When visitors go to your site, the design is the first thing that drives their attention. If they are satisfied with its usability and functionality, they will probably search for ways to contact you.
That’s where the design form comes into play. If the design form is inconvenient to use and incomprehensible, visitors are likely to abandon the idea and skip the website. That’s why it’s crucial to make your form comprehensible, digestible, and easy-to-use.
With the help of these practices, you can transform the monotonous and annoying activity of filling the form into an entertaining discovery. It’s a great chance to provide your visitors with a seamless experience and gain their trust so that they will decide to become your customers.
