VWO Logo
Request Pricing
Dashboard
Like this post?
Read our in-depth guide to Form Analytics
12 Min Read

6 Sign Up Form Examples For More Conversions [2020]

Marvellous Aham-adi
Marvellous Aham-adi
Marvellous Aham-adi is a freelance writer and content marketer. He teaches individuals how to start a profitable blog, improve productivity, and grow a brand using marketing at TheZeroed

Sign-up forms are an integral part of any website. Depending on the nature of your business, sign-up forms can be used for generating leads, collecting emails for your newsletter, and acquiring new customers. The problem is that a lot of businesses do not bother to optimize their sign-up forms for conversion.

Sign-up forms are still very valuable in generating leads for your business in 2020. A sign-up form is essential in growing a list of permission-based, engaged subscribers. It is also an important part of your customer acquisition and retention strategy. It is a useful tool that can be used across several marketing channels, including social media platforms as well as your blogs and websites. 

illustration of a sign-up form

If your sign-up forms are not optimized, you would be wasting a ton of opportunities to grow your business. 

To avoid investing your time, energy, and money in creating a sign-up form that won’t convert, I have compiled this list of examples. In this article, you will learn how to create sign-up forms that drive conversions and sign-up form examples that stand out from the pack in 2020.

Let’s get started.

Sign-up Form Best Practices To Follow To Increase Conversions

To generate more leads and drive conversions, you need to create email sign up forms that are eye-catching. There are a ton of distractions on the internet, and if you fail to capture the user’s attention in the first few seconds, you might end up losing that lead.

To help you increase your chances of grabbing visitors’ attention and getting them to take a specific action, follow these sign-up form design rules:

Increase the dimensions of your form fields

an example of a sign-up form within a newsletter

When creating sign-up forms, your main goal should be to improve the user experience as much as possible. Not all users on your site would make use of the tab button to move from one form field to the next. Some would make use of mouse clicks and touch screens to fill in their details. Ensure that the fields are visible so that they can easily fill in their details.

Avoid having two columns fields

illustration showing
one-column and two-column sign-up forms.

Your sign-up forms need to be optimized for both desktop and mobile users. The idea of a two-column field might make sense for desktop users because of the rectangular screen that can accommodate two columns. For mobile users, it would be difficult to use and would hurt readability. 

Having multiple columns can also confuse visitors when they are filling the fields. There is a big chance that users would skip a line or two when filling out a two-column field. This would delay the entire sign-up process and some users might get frustrated and just abandon the form.

Stick to four fields or less

screenshot of the sign-up form on tumblr

To increase the engagement you have on sign-up forms, it is important that you reduce the number of fields. More fields can lead to clutter. Studies show that forms with a limited amount of fields have a higher conversion rate[1].

bar graph showing the variation of conversion rates along with the number of form fields.

The image above shows that firms with less than five fields have 20 percent more conversions than the ones with a higher number of fields.

Limit your form to four fields or less. If the information isn’t important in converting a lead, remove it from the form. Stick to questions you really need to ask so that you do not create an unnecessarily long form. You do not need to ask a user to put in a phone number when signing up for an email newsletter. 

The majority of visitors do not want to spend minutes filling a sign-up form.

Avoid asterisks and confirm password form fields

I mentioned earlier that you should make your form fields as short as possible. If you follow this rule, you would not need to add those annoying asterisks that mark the fields that must be filled. If you only add important fields in your form, you would not need an asterisk to signify where the users must fill.

Also, avoid asking the user to confirm their password in a separate field. Instead, let the user see the password they chose in the same field goal by inputting a “show password” button.

screenshot of the form field for entering password

Pro Tip: Instead of asking the user to input both a username and an email address, let the email address be the username. This would shorten the number of fields the form would have.

Avoid complex fields and give clear instructions

an example of a complicated error message shown to the visitor on entering invalid data in the form field for password

Your sign up form should be clear and easy to understand. Avoid making use of complex fields that frustrates the users. Tell the users what to do as they fill the form, do not wait till they have made a mistake. Place clear instructions near the field so they understand what they have to do.

Your sign-up button should stand out and pass a clear message

Your CTA button is one of the most important parts of your sign-up forms. It should draw the user’s attention and drive them to take a particular action. Choose a bright color contrast from the form’s background color.

an example of CTA button within sign-up forms

When writing the copy of your sign-up button, make sure that it has a clear value proposition. Instead of using just a plain “sign up” or “download” button, use “claim your free trial” or “start your free demo”. The later copy clarifies to the user what they would get when they sign up.

Enable social media sign up

an example of a social media sign-up

You can also speed up the signup process by allowing users to sign up using their social media networks. Most users would opt for this option because it’s fast and user-friendly. It also helps since they don’t need to memorize new passwords again.

Offer an incentive to sign up

Offering an incentive is a great way to get people to sign-up. Research shows that when you offer an incentive, you can increase your sign-up conversion rate by up to 15%.[2]

graph showing that sign-up rates increase when an incentive is offerred to visitors

Instead of just asking the user to sign up, offer them an incentive that would make them want to give you their email. These incentives can be anything that you know would be valuable to the user. For example, you can offer them a discount price for your product if they sign up.
To create better incentives,  learn how to create a killer value proposition.

Avoid the use of Captcha

Captcha is a technology that helps differentiate a computer from a human user. If you have had to fill a form that makes use of captcha, you would know how annoying it can be.

screenshot of Captcha on the sign-up form

Even though the point of this tool is to reduce spam, it can be very annoying to real users. It is another additional step that adds to your form field. Most times, it doesn’t work in the first or even second try. After multiple captcha attempts, a user can get frustrated and leave your site. It’s best to avoid using captcha entirely. 

We have seen the design rules your sign-up forms should follow, let’s see some sign-up forms examples that stand out

Sign-up Form Examples That Drive Conversions

MailChimp

example of the sign-up form on the website of MailChimp

MailChimp is a good example of a great sign-up form. This sign-up form is clean, minimal and clearly shows the visitors what action they need to take. The chimp mascot is also a very good touch. It grabs the attention of the user and gets them interested in seeing more of the form.

Things to note from this sign-up form

The form only contains 3 fields. This ensures that the form is short and contains only important information.

They also give clear instructions on how to fill the form. Under the password form field, there is an outline on how the visitor would choose their password. As the user types and meets each password criteria, the bullet point fades. Not only does it improve the user experience, but it also saves them time. 

Another cool feature of the form is the call-to-action button. It would remain white until the user fills the form. When the user completely fills the form, it changes from the white disabled state to becoming active.

Nerd Fitness

example of the sign-up form on the website of Nerd Fitness

This sign-up form from Steve Kamb is an example of a sign-up form that converts well. While there are a lot of colors in the form, it works because it fits the overall theme of the nerd fitness brand. 

Things to note from this form

The form is straight to the point and has only one form field. All they need from you is your email address. Most people would be happy to give their email addresses. The lesser the information the visitor has to offer, the higher your chances of converting them. 

They also offer a free giveaway in the form of a book. This serves as an incentive for the user to give up their email address. The informal language used in the form’s copy also makes the sign-up process fun. 

The form also shows social proof. It shows that over 200,000 people have signed up before you. Statistics show that implementing social proof in your pages can improve conversions by 34%.[3]

Another good example of a sign-up form that uses social proof to its advantage is Single Grain.

example of the sign-up form on the website of Single Grain

In the sign-up form, they show some of the big brands they have worked with. By showing this, it improves their reputation and proves that they offer quality. Big brands would not work with them if they were not good right? 
Pro Tip: If you haven’t worked with big brands or have a thousand subscribers, you can use customer testimonials as a form of social proof. They are also effective in increasing the conversions of a sign-up form.

Google

example of the sign-up form for a Google Account

Google is a good example of a sign-up form that converts.

Things to note from this form

The sign-up form is neutral and does not have a ton of colors. It is easy on the eyes with a minimalist design and a clear user interface. The form fields are also short. Users are required to fill in just their first name, last name, username, and create a password. 

Similar to the MailChimp form, the users are given a helpful copy that gives instructions on how the users should fill the form. It also has the view password button so that you can determine if you have made any mistakes.

Note that on the side of the form, there is an image with a microcopy that reads “One account. All of Google working for you”. This is an example of a clear value proposition. It tells the user that when you create this account, you get to use all of Google’s amazing features.

Quicksprout

example of the sign-up form on the website of Quicksprout

If there is a signup form that stands out, its this form from Quicksprout. It doesn’t use the normal sign-up form that is on every website. Instead, it uses a URL entry. Before they ask a user for any information, they first offer them value. 

Things to note from this form

The sign-up form opens with a question that meets a pain point that the user wants to solve. To offer solutions to this pain point, you first need to understand your target audience[4]. Quicksprout’s signup form asks its users if they want to have more traffic and immediately offers a solution that helps them learn why they are not getting enough traffic. Asking a question and then offering an actionable solution is a good way to increase the conversion of your sign up form.

The design of the form is also minimalistic so as to avoid the visitors getting distracted. The color theme of the form also rhymes with the general theme of the site.

Grubhub

example of the sign-up form on the website of Grubhub

The Grubhub signup form is a beautiful form that pops up a few minutes after the user enters the site. 

Things to note from this form

When this form pops up, the rest of the background gets dim so the full focus is on the signup form and the users do not get distracted by the other texts in the background. The form field is also very short; just an email and a password are required.

At the side of the form, there is also a nicely designed list of all the benefits the user would get from signing up. This is a good incentive that would make the user want to sign up.

TransferWise

screenshot of the sign-up form on the website of TransferWise

TransferWise is an app that allows users to transfer money to different banks all around the world without any stress. TransferWise makes use of a simple and clean sign-up design. 

Things to note from this form

The top of the sign-up form shows the company’s value proposition clearly – “Welcome to money without borders”. The copy answers an important question that most of the users would have – ” how can I easily transfer money from one country to another?”

Next, users can decide to choose either a personal or business account. This form field is essential since it is a finance app. Along with your email and password, you would also add your location. Even with five form fields, the design is still clean and minimal.

Pro Tip: If for any reason you would need more than four fields, opt for a very clean and simple design. More color and animations can make the sign-up form look cluttered.

Conclusion

Your next step is to follow the tips and examples shown in this article. If you can get it right, you would be able to create better converting sign-up forms and increase the number of quality leads generated.


Like this post?
Read our in-depth guide to Form Analytics
Shanaz Khan from VWO

Hi, I am Shanaz from the VWO Research Desk.

Join our community of 10,000+ Marketing, Product & UX Folks today & never miss the latest from the world of experience optimization.

A value for this field is required.

Thank you!

Check your inbox for the confirmation mail