5 Commandments for Designing Sign-Up Forms that Convert Like Crazy
Sign-up forms — It’s okay if you hate filling them. But their great conversion lift potential will make you love them soon enough.
While content and design are the two aspects that together make a good lead generation form that converts, in this article we will focus only on form design.
The key to a high-converting sign up form design is to find out ways that make your forms a breeze to fill in, rather than a cumbersome task. Here are the five commandments for designing sign-up forms that will convert like crazy:
1. Make Your Lead Generation Forms Stand Out
To make visitors fill out your form, it’s important that it is noticed by people on the site. If your sign-up form is easily missed by visitors, you’re leaving a lot of money on the table. So, here are a few design tweaks you can try to draw visitors’ attention towards your form:
a. Encapsulate Your Forms
Yes, add them to a container. This distinguishes your form like a window on a plain wall. See how Mindvalley implements this on their website:
b. Directional Cues
Notice the arrow in the above image that points to the form? It’s a directional cue to guide visitors’ attention to the form. People subconsciously follow the trail. You can also use images of people with their eyes looking at important elements, like form, headline, product image, or a testimonial to guide user flow on the page. An eye tracking study showed how directional cue from an image caused 84% more people to notice the product on a page.
c. Contrasting Call-to-Action (CTA) or Form Header
Of course, choosing the right colors that “pop out” on your form header and CTA can make it a lot easier for visitors to identify what they are expected to do on the page. Button color tests are probably the most common tests that are conducted to increase conversions.
2. Provide Targeted Forms
The more closer you can get to providing people exactly what they want, the better will be your conversions.
Your visitors’ intention to fill the sign-up form means that they are showing interest in staying in touch with you. So, you better take care of their specific needs, or this relationship may turn sour any time. You can see how This Old House, the home improvement website, offers the much-targeted options for their visitors to choose from, in their newsletter sign up:
Double kudos to this newsletter for also including the samples of each newsletter type.
Here’s another example of targeted newsletter sign-up from Jabong.com:
Collect targeted leads, send them messages that are most relevant to them, and see how it works for you.
3. Reduce Friction to Avoid Form Abandonment
Form-filling is the most boring thing ever! And even the smallest of things can make visitors take a hike. No matter how much value you’re providing in your eBook or free trial, if your prospects’ motivation levels are not extremely high, chances are they will take any excuse they can get and just leave the page.
If you want them to stay and fill the form instead, you will have to find out their pain points. Figure out ways to fix the smallest of things that annoy them. Here are a few ideas that can help you reduce friction and improve conversions:
a. Reduce Form-Fields
Lesser the work for your visitors, higher the conversions. Expedia removed the “Company” field from their forms which increased their yearly revenue by $12 million. Do you need any bigger proof than this?
Sign-up forms are the smallest form of commitment your prospects have finally agreed to give you. You give them a hard time in filling out that form and they will soon be gone.
Try to ask only the bare minimum here. Remember, you can always ask for more details later. Some companies stick to asking only the email addresses. They don’t even ask for names.
Striking the Right Balance Between Lead Quality and Lead Quantity
While having only one field might be a great idea to generate more leads, there’s a good possibility that this might mean that the quality of your leads might be compromised here. So, if your organization is spending a lot of time in lead scoring and sifting through the data to find the hottest leads that have the maximum conversion potential, it’s okay to consider adding a few more relevant fields to your form.
Dan Zarella of Hubspot analyzed over 40,000 lead generation landing pages and found that 3-5 form fields generate maximum conversions, like you see it in the graph below:
Don’t forget to notice that there is a steep fall in conversions between the 3rd and the 4th field.
Add an Open-Field to Improve Lead Quality (But Keep it Optional)
Besides adding 1-2 additional fields that help you refine your leads, adding one open field is also a great way to improve lead quality from your lead generation efforts. Just be sure to make it clear that this field is optional. Not everyone might be in a mood to write subjective answers.
It’s important to note that adding these fields might reduce the number of leads you might get, but if you do it right, it should lift conversions for the ultimate sales goal of your online business. You can see below that Hubspot adds the open-ended “Biggest marketing challenge” field in their forms to refine their leads:
Another thing you must not miss out here is progressive profiling used by Hubspot to reduce form-fields considerably. Otherwise, if you are filling up their form for the first time, they have around 10 mandatory fields to start with.
Kindercare, a US-based chain of child-care centers included an additional (but optional) open-field of “Comments or questions” to their lead-generation form and A/B tested it. This didn’t reduce the number of leads generated by them. But their sales team reported an improvement in lead quality.
That’s great! So, what if you include 12 fields in a form and mark only 4 of them as mandatory?
Don’t even think about it. An eye tracking study showed that sometimes people do not even see the required fields note, and may assume that they have to fill the entire thing. And even if you argue that everyone knows that asterisk with a field implies a mandatory field, still the first look at a lengthy form can be a turn off for a lot many visitors.
So, when looking out to cut down your form length, here are a few fields that you can consider removing:
- Name fields (In some cases, you can skip the name fields even if you are asking for credit card details. See point #1 here)
- Company Name
- Password/email id confirmation
- City/ State/ Postal code
- CV Code
Please note that these elimination of fields are just suggestions. In the end, you need to check how these fields make sense for your specific business model.
b. Don’t Be Too Restrictive
It is so damn annoying to get an error message repeatedly, especially when you know what to type in the input field but the format in which it has to be entered is too specific to get it right easily. See the specifications mentioned for the password in the example below:
Be a sport and cut your customers some slack here. Let them enter the password the way they want. If you’re concerned about account hacks, work hard on your back-end to ensure full security. Don’t make their work difficult, because you want to make your work easy.
And this is not just about the password field, requiring dates to be entered in a particular format, phone numbers to be broken down with 2-3 spaces in between. The fact that they are willing to give you their details should be enough for you.
c. Stop Using Captcha’s
A recent Moz article discussed how captcha’s have become real pain for user experience and are also killing conversions. Another study found out that if captcha’s are turned on, a company can lose out 3.2% of their total conversion rate. And for many companies, this might not be a small amount.
Animoto removed the captcha from their web app form which improved their conversion rate from 48% to 64%, which is a conversion lift of 33.3%.
Even after all of this, if you still think that there’s no way for you to rule out captcha’s from your site, maybe you can see if Honeypot captcha’s are a good alternative for you.
d. Add Social Proof
Visitors often have their apprehensions and they do not like to part with their personal information easily over the Internet. But they do like following the crowd. Your social proofs can rest their fears and make them more willing to give their information to you. See how Smashing Magazine pulls this off by mentioning their number of subscribers:
Pro Tip: People like to be in the know. What if they sign up and you bombard them with a series of annoying mails ever day? It is a good idea to tell them how frequently they can expect to hear from you. It’s even better if you can tell them the exact day (like in the above example it mentions Thursday), if possible.
e. Avoid Asking Sensitive Information at First, if Possible
Allied.com gets right to the point and ask only the questions that directly relate to their business. Because they didn’t ask for any personal information on the first interaction, most customers will not mind filling up the much-justified information requested by them.
4. Communicate Value
Just as headlines are important to communicate the value of a landing page, form headers are important to tell people exactly what they will get in return for the information submitted by them through the form. So, the font size of a form header should be a little larger than other text labels of the form.
Some quick, supporting bullet points that add more value to the offer is also a great way to improve conversions. After all, only when your customers’ perceived costs are less than the perceived value of your offer, they will be motivated enough to take action. Here’s a case study comparison image from Content Verve, where ]communicating value in easily readable bullet points increased sign up form conversions:
5. Form Layout and Other Design Concerns
Notice something weird about this form?
Yes, the form fields are not perfectly aligned and even the CTA button is placed distinctly away from the alignment of the form fields. A well-designed form should have the right alignment of the form fields and the button size should ideally match the length of those form fields. Here’s a good example:
Make sure that you have a large CTA button so that it gets the attention it deserves.
These might seem like minor things, but according to a Marketing Sherpa report, form logic and form layout are two of the five most important factors that impact website performance.
Fixing small user annoyances might not make much of a difference to your conversions, but they can definitely improve overall user experience and satisfaction. Listed below are some of these form design considerations, you can take care of:
a. It is preferred that the labels be placed above the input fields. If you choose to place them to the left of input fields, make them right-aligned.
b. Provide guidance labels or helpful links with fields that some people might not know the answer of. Don’t assume that they will know the answer. Pizza Hut provides a “Don’t know your zip code” link for their customers. Clicking on this link provides their visitors with drop-downs for their City and State. This might amaze you but a lot many people are actually unaware of their area zip code.
b. Show inline errors simultaneously with the input field rather than at the top of the page.
c. Don’t make them enter the same information twice. For example, if you ask them to enter a shipping address, provide them with a check box if their billing address is the same and if it is then pre-fill their billing address for them.
d. If you have a long-winding form even after removing all the fields you can, consider breaking it into 2-3 steps and show customers their progress. A commenter on this UX thread explains this perfectly:
A long form is incredibly tiring on a user, and poses problems of filled in wrong information and then having to fill in the entire form again. If you provide a storied step by step form, with a clue of what lies ahead, and maybe easy access to what the user has edited in the past, you’ll make filling in the form less of a drag, and more goal oriented. By making the form smaller, the user will feel like they’re accomplishing more, even if they’re filling in the same information. Don’t split up your form too much though, you’re also increasing the time it takes to fill in the form.
Test, Test, Test!
There’s no escape from testing. But you probably know that already. Once you have winning results, you can even use insights from one landing page to the other and AB test them to see if it works for you.