10 inspiring examples of sign up forms
Getting users to complete a sign up form is no easy task. In this post, we take a look at companies doing it right
Sign up forms are tricky territory in user experience design. Nobody likes to fill them out. But this conundrum gives UX designers a unique challenge.
Designers have to figure out a way to encourage people to fill them out. Yet, if you add one form field too many, you can expect your conversion rate to plummet. How do some sign up forms strike this balance?
Here at Justinmind, we’ll take a look at 10 inspiring sign up forms and find out what makes them work.
Use this inspiration and create your own sign up form. Download Justinmind.
Facebook has a lot of users. Billions, in fact. How did the social media giant get there? Well, to access Facebook users need to sign up. How does their form look?
This is a succinct sign up form and asks for only essential information. It’s short with only 4 input fields. Research found that 4 fields result in 160% uplift in conversions. Users won’t feel fatigue at the idea of having to spill their life’s details with this form.
It’s flexible, too. Users can sign up with an email or a mobile phone number. A great option if you don’t want to unsubscribe from those emails at a later date.
The copy complements the form nicely. Facebook uses the power of three. It highlights the benefits you’ll get by signing up: photos, what’s new and find out what’s happening.
Like we said, people don’t enjoy filling out forms. Designers have to create forms that are so easy to fill out that the user doesn’t have to do much work.
This leads us to Medium’s sign up page. After clicking the “Get started” call to action button on the homepage, a modal pops up. You see an engaging illustration for visual interest. But what is striking is there are no input fields. Are we on to a winner already?
Users can either sign up with Google or Facebook in just one click.
There’s a catch though. If you’re not a member of either Facebook or Google, you’ll get directed to their sign up forms. Interesting move, Medium! Make people fill out the form elsewhere. We see you.
Mint is a personal finance app. Personal finance must be taken seriously because of the amount of data stored on these apps.
Mint does a great job of reassuring users by adding a padlock icon to their call to action buttons. This reinforces the idea of trust and security. Icons don’t usually work well in buttons but if paired with some strong copy, they’re a match made in heaven.
Then we come onto the sign up form itself. When you click sign up, you’re taken to a form which is labeled “Intuit”, which is the parent company for Mint. If you didn’t know that, you might suddenly be skeptical. This is nothing a little reassuring copy can’t solve: “Create an account for all of Intuit’s products including Mint.” Perfect.
The sign up form has 3 input fields:
- Email address
- Phone (optional)
Your phone is the most secure method to verify your identity. Mint stresses this with some copy in the color orange:
Another brilliant tactic that Mint uses is when you write your password. Suddenly, out of nowhere another field appears asking you to confirm what you’ve just written. That’s progressive disclosure at its finest.
Reddit’s sign up form couldn’t be simpler. After you click the sign up button on the homepage, a modal appears asking only for your email. No more, no less.
To encourage users to sign up, there’s enticing copy: ”Join the worldwide conversation”.
It’s true — there’s something for everybody on Reddit. Any niche you think of and there’s probably a community of people dedicated to that thing with their own space on Reddit.
And, to top it all off they tell you how long the process takes: sign up in just seconds. It’s great when your expectations are set from the beginning.
Speaking of Reddit, they got a new user interface. Here’s our teardown.
Mailchimp’s sign up form is clean and minimal. Their cheeky little monkey mascot, who is there to encourage you to join, greets you with a wink.
Like Mint, this sign up form only has 3 fields:
What’s nice about MailChimp’s sign up form is the option to show your password. Registration and sign in are different patterns. It doesn’t make sense to show password on sign in – you know your password. To see my password I write for the first time, I’m less likely to forget it because it isn’t hiding behind a string of asterixis.
This pattern removes the need for a confirm password field, which saves the user time and improves the UX design of the form.
Below the password field are 5 characteristics in bullet points your password must have. This is neat. As you type your password, these bullet points fade to show that you’ve met the requirement.
It isn’t until you’ve filled out the form that the Get Started call to action button changes its state from disabled to active.
Wanna get to grips with form design best practices?
Twitter. It’s what’s happening, apparently. Their sign up form is the starkest of our 10 examples. But it makes sense because this sign up form is a three-step process.
First, you’re asked to provide a name and phone number (or email, if you so dare). Then after clicking next, you have the option to customize your experience. You can:
- Connect with people you know
- Get more out of Twitter
- See better ads
Step three is when you seal the deal by confirming the information you put in step one. Redundant? Maybe. But what’s interesting about this form is how straightforward it is. It’s to the point and gets the job done.
Typeform, the data collection company, adds a little humor to their sign up form. It uses unique microcopy as placeholder text.
Placeholder text is useful in a user interface because it provides an example to the user of what to write.
Typeform have gone with a Batman theme. What’s fun is the copy in the password field: “It’ll be our secret”. Little elements of joy in the UI can provide a great user experience for the user and Typeform knows this. This is one way companies can show personality in what is normally a boring or uninteresting experience.
The word free in “Create my free account” on the call to action button entices the user to click because who doesn’t love free stuff?
If there’s one company that should be getting its sign up form right it’s Google. And when you try to create a Gmail account, you see all the signs of an awesome sign up form.
The copy is neutral and concise which is what you want in a sign up form. Nobody wants a lecture. Users have to put in their first and last name, their username and their password.
To guide users, there’s helpful UI copy under the input fields which tells users exactly what Google wants from them. And like MailChimp you can view your password to avoid any mistakes.
On the right of the sign up form is an illustration with some inclusive copy. It highlights that this will be your account for Google, not just Gmail: “One account. All of Google working for you.”
“Working for you” is powerful. It says in a subtle way that you just need to sit back and relax. Google’s got you covered. This is some good UX writing. But, would we expect any less? Nope.
Blooom (Yep, that’s three o’s) helps people manage and optimize their 401k. Retirement is a complex subject. Users need to have the right information so that they make wise choices.
When you sign up to blooom, there’s a video by the co-founder Chris Costello in which he explains the reason behind blooom’s existence.
The copy below the video tells users which accounts they can link with blooom. Below that, users are told there are 4 steps to go through:
The “Start Now” call to action is interactive and our eyes move to it, encouraging us to click.
Sign up forms should be concise and short if users are going to complete them but there is a time and a place for a long sign up form. This is one of them.
Blooom prompts users to put in their name, their date of birth and the age they expect to retire. Standard stuff. There’s a little light-hearted UI copy after you put in your retirement age.
The Norton logo provides peace of mind — vital for a company that handles a lot of personal information.
On the next page, users need to add an email and a password as expected. You can’t see your password on this form, though.
There is a password strength indicator which tells you how good your password is. The copy is fun and changes as your password becomes stronger:
Transferring money between countries is a pain. There are fees, hidden fees and the time it takes to get your money from one bank to another. In a word, long.
TransferWise is the solution to those problems. Their sign up form is bold. “Welcome to money without borders” it claims. The copy is to the point and tells users what to expect.
Users have a choice between creating a personal account or a business account. Then all they have to do it enter an email and password. The accompanying photography is relaxed and shows a pair of happy women. Presumably, they’re happy because they’ve been transferring thousands without the fees.
10 inspiring examples of sign up forms – the takeaway
Creating a sign up form is easy. Getting users to fill it out is difficult. But all good sign up forms tend to:
- Be clear and concise
- Ask for the right information
- Avoid exhausting the user with too many fields
All the sign up forms in this article meet those criteria. Some do it better than others. When it comes to making your own, be sure to keep the user in mind. Use a sprinkle of empathy. And cut the fat. If it isn’t necessary, don’t put it on the form.
- Banking app design: 10 great patterns and examplesThe growing importance of mobile banking app design brings with it the need for more engaging UIs so that financial institutions can stay competitive. If you’re wondering what constitutes a great banking app UI design, check out these 10 great examples.