![\"form-design-best-practices-1\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143413\/form-design-best-practices14.jpg\")
<\/p>\n<\/p>\n
Form design matters more than you might think.<\/p>\n
A poorly designed form can turn off prospects, whether you\u2019re asking them to sign up for your email list or buy your latest product.<\/p>\n
Web forms are used on nearly every website on the Internet, but some feature extremely poor design. If you don\u2019t want to fall into that trap, this article will teach you how to design forms<\/a> that boost conversion rates<\/b>.<\/p>\n Feel free to jump around if you\u2019re interested in a single a particular topic covered in this article:<\/p>\n A web form is an HTML element on a website that collects information from users<\/b>, transmits that information to the appropriate servers, and initiates any related follow-up. Web forms use text fields, radio buttons, checkboxes, and other elements to engage with users.<\/p>\n There\u2019s a web form on Crazy Egg\u2019s<\/a> home page. It asks visitors to insert their website URLs.<\/p>\n This web form only has one form field \u2014 a text field \u2014 but many forms have multiple fields for the user to fill in. You use forms to collect information, right? For instance, you might collect users\u2019 email addresses so you can send them marketing emails in the future.<\/p>\n According to Sumo, fewer than 2 percent of website visitors actually opt in to email lists<\/b><\/a>. The rest ignore your form.<\/p>\n We also know that people form first impressions in just 50 milliseconds<\/a>. That\u2019s way too fast to read your copy or take in your message.<\/p>\n Those first impressions are based on design and layout. \u00a0It stands to reason that good form design can influence conversions. Knowing that form design can hurt or help your conversion rate, how do you design better forms<\/a>?<\/p>\n Check out these 19 best practices that you can follow to convert more prospects into leads and more leads into customers.<\/p>\n Friction leads to poor conversion rates. The more obstacles you put in front of your prospect or lead, the less chance he or she will convert.<\/p>\n Consumers lead busy lives, so they won\u2019t take time to figure out a confusing form or to answer more questions than they think is necessary.<\/p>\n You need to know what causes friction for your specific audience. That\u2019s where A\/B testing<\/b><\/a> comes in handy<\/b>. Create two versions of your form, changing one variable, and review the results. Keep testing until you know the ideal form length and format.<\/p>\n Some common sources of friction include forms that:<\/p>\n Aesthetic appeal can influence your conversion rates. An unattractive or outdated form might give your visitors pause.<\/p>\n Everyone has a different idea of what beauty constitutes, but use your best judgment. On my own websites, I\u2019ve found that simple, clean forms with large fonts and few fields tend to work best<\/b>.<\/p>\n Again, though, A\/B test different designs with your own audience to see what works best for your target consumer.<\/p>\n Start A\/B testing right now!<\/a><\/p>\n Web forms that include unnecessary data collection can frustrate consumers. This is especially true after the GDPR launch<\/a>. Consumers don\u2019t want to provide more data than absolutely necessary.<\/p>\n When designing your forms, ask yourself whether you really need a specific field. For instance, when collecting email addresses, do you need the subscriber\u2019s name? Do you need to know where he or she lives or what he or she does for a living?<\/p>\n If not, leave it out.<\/p>\n I love multi-step forms <\/b>because they give the impression of simplicity. The same goes for multi-step checkout processes.<\/p>\n On my SEO Analyzer form, pictured above, the user fills out his or her URL. Then they\u2019re taken to another page where they can enter other information.<\/p>\n Here, they can enter up to three competitors for a competitive analysis. The process feels less overwhelming, though, because of the multi-step form.<\/p>\n Many people now use mobile devices to fill out forms. Since mobile devices, such as smartphones and tablets, have less screen space, it makes sense to use a single-column design.<\/p>\n If users have to scroll left or right to fill out the form, they might abandon it entirely.<\/p>\n On-page placement matters when it comes to form design. Where do your users most often click on the page? When do they stop scrolling?<\/p>\n You can learn this information by getting scroll maps and heatmaps from Crazy Egg<\/b><\/a>.<\/p>\n Using the data, you can decide where your form\u2019s headline and CTA<\/a> should go. From there, designing the form becomes far easier.<\/p>\n There\u2019s something to be said for investment. Once someone starts filling out your form, they\u2019ve mentally committed to it. They\u2019ve invested their time and effort.<\/p>\n Therefore, it makes sense to start with the easy stuff: Name, email address, phone number, etc. These are questions that require little thought. The answers might already be stored by the user\u2019s browser<\/a>.<\/p>\n You can then add more complicated questions.<\/p>\n Speaking of auto fill, you can also add auto-format to your forms. That way, if the user has information stored in his or her browser, the form automatically populates with the stored information.<\/p>\n This can even work for forms during the checkout process. These days, many consumers save their credit card information with Google. That way, they don\u2019t have to dig out the plastic every time they want to buy something.<\/p>\n Some forms prohibit the user from copying and pasting information. That\u2019s not a great strategy if you want to boost your conversion rate<\/b><\/a>.<\/p>\n The user might want to copy and paste information to avoid spelling errors and other issues. If you deny them that ability, they\u2019ll likely abandon the form.<\/p>\n The CTA is essential. It can mean the difference between conversion and abandonment.<\/p>\n Your call to action should appear on a button in the form. Instead of using the lackluster \u201cSubmit,\u201d consider getting more creative.<\/p>\n Conduct A\/B tests until you find the perfect CTA.<\/p>\n CTA button<\/a> color matters. No, a single color doesn\u2019t work better than every other color for every website, but it needs to contrast with everything else on the page.<\/p>\n In other words, it should draw attention to itself. You don\u2019t want your visitors to miss it. You can see this theory in action at clothing store lululemon<\/a>.<\/p>\n The blue color calls attention to itself and contrasts with the rest of the page.<\/p>\n A\/B tests are your best friend when it comes to form design. You\u2019ll never know what will work with your audience until you test.<\/p>\n Crazy Egg and other tools, such as Hello Bar<\/a>, allow you to run A\/B tests. They also automatically give you the results so you don\u2019t have to sift through reams of mind-numbing data.<\/p>\n In most cases, if a form field has an asterisk (*) next to it, it\u2019s required to submit the form. Without the asterisk, the user can decide whether or not to provide the answer.<\/p>\n Let people know in a bold way whether a field is required. Make the asterisk larger than the surrounding font size, for instance, or code it in another color.<\/p>\n It\u2019s happened to all of us. You\u2019re asked for your birthdate, phone number, social security number, address, or some other information with multiple elements. You have to put each element into its own box<\/a>.<\/p>\n The user has to click, tap, or tab to get to the next field. It wastes precious time and energy \u2014 and it can irritate your prospects.<\/p>\n Captcha emerged because of web form spam, which still exists today. However, you have to weigh the cons of spam against the benefits of keeping your prospects happy.<\/p>\n A Captcha adds another layer of effort to the form. If you ask me, more often than not, the Captcha isn\u2019t even legible<\/a>.<\/p>\n Which results in multiple failed attempts.<\/p>\n Your CTA can do more than attract attention. It can also steer your user toward the desired answer.<\/p>\n If you write your CTA copy in first person, your prospect reads it that way. He or she might think, \u201cWhy, yes, I do want to join,\u201d then fill out the form.<\/p>\n People often have questions before they fill out a form. If you offer alternate contact information or the opportunity to chat, you might pick up conversions you\u2019d otherwise have missed.<\/p>\n Here at Crazy Egg, we use EggBot. He\u2019s very useful \u2014 not to mention interactive.<\/p>\n See? He wants to help. Show your prospects that your form isn\u2019t the only way to get in touch.<\/p>\n When you have no choice but to use a long form, you can break it up into multiple sections and add a progress bar. Amazon<\/a> does this on a form where people can sign up to become Amazon Associates.<\/p>\n Users can track their progress<\/b> and know when they\u2019re almost done.<\/p>\n This is more a psychological ploy than anything else. If users think the form might be never-ending, they\u2019ll likely click away before they can finish.<\/p>\n Back in 2015, Time published an article that made a bold claim: \u201cYou Now Have a Shorter Attention Span Than a Goldfish.\u201d<\/p>\n It\u2019s since been hotly debated, but there\u2019s no denying that our attention spans are pretty short.<\/p>\n During form design, strive to remove as many distractions as possible. A reset button, which deletes all filled-in fields, provides visual clutter. It might even be confusing for users who aren\u2019t used to filling out web forms.<\/p>\n Initially, reset buttons were thought to provide users with comfort. Clicking that button sent a psychological signal that their information had definitely been deleted.<\/p>\n These days, however, users can manually delete their information quickly. It\u2019s also widely known that exiting from a form results in information never being sent. I have a few bonus tips for you today. Now that people use mobile devices to access the Internet more than 60 percent of the time, we need to optimize our forms for mobile in particular.<\/p>\n So, take a look at these mobile form best practices:<\/p>\n Forms aren\u2019t as obvious on mobile. Use a large font for the headline <\/b>as well as the CTA. Make sure the text on the page contrasts with the background so users can see it clearly.<\/p>\n Taps can be just as annoying as clicks. Reducing the number of taps reduces friction.<\/p>\n Ideally, you want one tap per form field, then a final tap to submit the form. Any further taps can irritate your audience.<\/p>\n Popups<\/a> don\u2019t work well on mobile. They\u2019re often oversized, so users have to swipe right or left to read all the text. Plus, they distract the visitor.<\/p>\n Instead, incorporate forms into the actual page design. If your web design allows it, you can use a separate form setup just for mobile devices.<\/p>\n Forms aren\u2019t just for transmitting information. They also allow users to find <\/i>information. Predictive search helps with internal search just like it does on Google.<\/p>\n Use search functionality on your website that supports predictive search. That way, mobile users don\u2019t have to tap as many letters to get to the search query they want to make.<\/p>\n Fast page speed matters when it comes to mobile UX. If anything, users have an even shorter attention span because they\u2019re often out and about.<\/p>\n If your form doesn\u2019t load or send quickly, users will often give up. You can run page speed tests<\/a> to learn where you currently stand.<\/p>\n If you get a low score, consider reducing image sizes and removing elements that might slow down your site.<\/p>\n Password confirmations are particularly annoying on mobile. Users have to go into their email accounts after exiting out of the browser. They might not even bother. Now that we\u2019ve covered form design best practices, let\u2019s look at some forms in action.<\/p>\n First, I really love the form at the bottom of Bouncex\u2019s<\/a> home page.<\/p>\n The contrasting colors are particularly engaging. Blue and orange complement each other, so they play nicely, but the orange stands out against everything else on the page.<\/p>\n The headline also stands out and highlights an excellent value proposition. The form isn\u2019t too long, and it uses autofill.<\/span><\/p>\n I also like the form on the Kajabi pricing page<\/a>. Kajabi offers a platform that allows entrepreneurs to create online courses.<\/p>\n The headline tells the user exactly what to expect. It\u2019s specifically related to the business\u2019s industry. Then you have a contrasting call to action that incorporates a value-added benefit. Plus, if you click on the sole field \u2014 email address \u2014 it autofills.<\/p>\n Next, we have the checkout form for one of Digital Photography School\u2019s<\/a> photography courses.<\/p>\n It has the progress bar at the top, which can allay anxiety, and if you continue through the process, the fields autofill. Plus, you have high-contrast CTAs, easy directions, and good use of headlines and copy.<\/p>\n Lastly, I want to take a look at a long web form. While they\u2019re not ideal, they can work if you use the best practices I listed above.<\/p>\n Pillow<\/a>, a short-term rentals website, has to use a long form to capture information about prospective landlords. It\u2019s very tastefully done.<\/p>\n The form is attractive and uses large fields. There\u2019s a high-contrast CTA button as well as the autofill option.<\/p>\n Form design isn\u2019t something you should take lightly.<\/p>\n With an extremely low conversion rate on forms like email opt-ins, you need all the ammunition you can get.<\/p>\n\n
What Exactly is a Web Form?<\/h2>\n
![\"form-design-best-practices-2\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143434\/form-design-best-practices22.jpg\")
<\/p>\n![\"form-design-best-practices-3\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143403\/form-design-best-practices10.png\")
<\/p>\n
\n<\/a><\/p>\nWhy is it Important to Have a Good Form on Your Website?<\/h2>\n
![\"form-design-best-practices-4\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143352\/form-design-best-practices6.png\")
<\/p>\n
\n<\/a><\/p>\nThe 19 Form Design Best Practices to Convert More in 2018<\/h2>\n
1. Reduce friction<\/h3>\n
\n
2.\u00a0Create a simply designed form<\/strong><\/h3>\n
3. Only add fields you need<\/h3>\n
4. Test multi-step forms against single-step forms<\/h3>\n
![\"form-design-best-practices-6\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143339\/form-design-best-practices2.png\")
<\/p>\n5. Use a single-column design to increase readability \u00a0<\/strong><\/h3>\n
![\"form-design-best-practices-7\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143426\/form-design-best-practices19.jpg\")
<\/p>\n6. Position your copy in the right places<\/strong><\/h3>\n
7. Start with the easy questions<\/h3>\n
![\"form-design-best-practices-8\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143347\/form-design-best-practices5.png\")
<\/p>\n8. Add auto-format<\/h3>\n
9. Allow copy and paste<\/h3>\n
10. Add a clear call to action message<\/h3>\n
![\"form-design-best-practices-9\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143431\/form-design-best-practices21.png\")
![\"form-design-best-practices-10\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143429\/form-design-best-practices20.png\")
<\/p>\n![\"form-design-best-practices-11\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143406\/form-design-best-practices11.png\")
![\"form-design-best-practices-12\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143423\/form-design-best-practices18.png\")
<\/p>\n11. The call to action button must have a contrasting color<\/h3>\n
![\"form-design-best-practices-13\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143442\/form-design-best-practices25.png\")
<\/p>\n12. A\/B test the call-to-action buttons<\/h3>\n
13. Indicate when a field is optional<\/h3>\n
14. Don’t slice fields<\/h3>\n
![\"\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143437\/form-design-best-practices23.png\")
<\/p>\n15. Avoid captchas<\/h3>\n
![\"form-design-best-practices-15\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143418\/form-design-best-practices16.png\")
<\/p>\n16. Guide your user to the right answer<\/h3>\n
![\"form-design-best-practices-16\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143408\/form-design-best-practices12.png\")
<\/p>\n17. Add contact information or a chat<\/h3>\n
![\"form-design-best-practices-17\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143421\/form-design-best-practices17.png\")
<\/p>\n18. Use a progress bar when there are too many fields<\/h3>\n
![\"form-design-best-practices-18\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143358\/form-design-best-practices8.png\")
<\/p>\n19. Never use a \u201cReset Form\u201d button<\/h3>\n
\n<\/a><\/p>\nForm Design Best Practices for Mobile<\/h2>\n
![\"form-design-best-practices-19\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143355\/form-design-best-practices7.jpg\")
<\/p>\nDon’t leave your user confused<\/h3>\n
Reduce the number of taps<\/h3>\n
Don’t use popups<\/h3>\n
Use predictive search<\/h3>\n
![\"form-design-best-practices-20\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143410\/form-design-best-practices13.png\")
<\/p>\nSpeed up your page<\/h3>\n
![\"form-design-best-practices-21\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143415\/form-design-best-practices15.png\")
<\/p>\nDon’t ask users to confirm their passwords<\/h3>\n
\n<\/a><\/p>\nGreat UX Form Design Examples<\/h2>\n
![\"form-design-best-practices-22\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143328\/form-design-best-practices1.png\")
<\/p>\n![\"form-design-best-practices-23\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143439\/form-design-best-practices24.png\")
<\/p>\n![\"form-design-best-practices-25\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/05\/25143345\/form-design-best-practices4.png\")
<\/p>\nConclusion<\/h2>\n