Never miss a resource again

How to Design an Awful Looking Sign-Up Form, 10 Step Guide

When signing up for something – whether you’re opening a new bank account, registering for an interesting new app or trying to buy a flight – you want the process to be simple and quick. Speedy, painless sign-up forms help to increase conversion rates and keep visitors happy. Yet, in despite of that, there are countless examples throughout the web of sites that have painfully dreadful and frustrating forms that end up making you feel bad about the whole process. These forms are usually found on archaic, badly designed sites and there’s an unusual trend – the bigger the company, the more likely the form is to be awkward and needlessly complicated, such as: When you enter in Google the search term “beautiful Sign-up forms” you’ll find about 1,370,000,000 results that include an endless list of showcase countdowns resources on the 20,17,7 and even 100 Best Sign-up forms, so why do what’s already been done?

On the contraire this post will, count one by one the bad practices when designing a sign-up form, if maybe this way the web designers will learn their lesson and finally up –date their sign-up forms. Because even up to this day when there’s so many beautiful web resources available for web developers, you can still bump into long, complicated and heavy sign-up forms that just simply suck! So, there you go, if you want to create a terrible, awkward and frustrating sign-up form, here we’ve given you a 10 step guide to go about it.

1. Never give up the excessive form fields

Step 1 of the American Airlines AAdvantage Program is to have you list out your phone number broken down by area code, country code and even the type of phone they’re calling (whether it’s a cell phone, home phone or pager) and ask you to double check your email address, just in case you’ve got it wrong. They even ask for (but do not really need) your middle name. It’s a great way to slowly annoy your users, for little or no gain.

2. Always include awkward password limits

Safety is one thing, but forcing your visitors to include mixtures of numbers, symbols, uppercase and lowercase characters only serves to help them forget what their password is when they return.

3. Assume the visitor has all the answers

Particularly complicated services often include form questions that the user might not know the answer to. Utility companies are particularly bad for this – the above is a screenshot from EDF Energy’s sign-up form and is particularly unhelpful if you don’t know whether you’re on an Economy 7 tariff, or what your current energy tariff is (which is usually the case if you’ve just moved into a new home). The lesson is: if you want your users to give up and go elsewhere, assume they know all the answers – and don’t let them submit the form until they’ve answered them.

4. Don’t forget to make the user fill in a Captcha

American Airlines again run into this issue – making a user fill in a captcha in order to submit the form has become fairly standard across many sites, but it’s not a good practice. It looks ugly, forces the user to prove that they’re not a spammer and – perhapas worst of all – provides another chance for the user to give up and abandon the form, especially if they can’t read the captcha code or accidentally get it wrong. The American Airlines example above is particularly impressive, considering how one of the words is upside down.

5. Show visitors unhelpful error codes

It might mean something to you, as a developer, but it means nothing at all to the customer that’s just trying to get on with their day. AT&T make sure their form validation errors show a code to users (what does WR050 mean?) and don’t explain what went wrong with the sign-up process. The example above actually tells the user to give up, and move to a different form instead, which leads me to…

6. Don’t forget to include several unnecessary steps in the sign-up process

The same AT&T sign-up form takes you to the page above – but it also asks you for your online registration code. In order to get an online registration code, you need to first request one, by filling in yet another form (shown below). This requires filling in all of your details again – this time with extra details from your phone bill – before you’re allowed to fill in the first form. I wouldn’t be surprised if a huge percentage of AT&T’s customers gave up at this point and decided to not register to access their online account at this point.

7. Confuse the un-experienced user and name the button “Submit”

Some visitors aren’t actually very tech-savvy – and when filling in a form online, they might not know exactly what will happen after they’ve filled it in. Labelling the button “submit” might make sense to you, as a developer, but to a potential customer it makes much more sense to explain what will happen once the button is pushed. The example above is a form to book in a visit with a gym – it would make more sense to a user to change the button text from “Submit” to “Book Your Visit”.

8. Don’t ever show validation errors next to the form field

If a form doesn’t validate, it’s much easier to the user if they see the error message next to that field, rather than at the top of the form. The example above shows how IMDB will list all of the errors above the form, which then forces the user to scan down the rest of the form to fix the issues. It’s not too bad a problem on a short form like the one above, but on a much longer form, having to scan down to find the one field that needs attention can be frustrating and more complicated than it needs to be.

9. Always Keep labels on the far left, and form fields on the far right

Studies have shown that keeping form labels immediately above the field, instead of the far left of it, is usually better – it’s easier on the eye because it doesn’t force users to have to look at the label, and then scan over to find the corresponding field. The example above is from Santander, but this pattern is repeated throughout the web – labels on the far left and fields on the far right is harder to use, requires more eye movement and doesn’t have a natural flow to it.

10. Don’t forget to include an easy-to-click cancel button

Sky’s sign-up form includes (amongst other things) a big cancel button – the same size as the “create an account” button, which they’ve chosen to name “Submit”. The large “Cancel” button is awful for conversion rates and is the most frustrating button to accidentally press as it completely wipes the data that the user has just spent the last few minutes entering. If it’s accidentally pressed (which is easily done, considering it’s right next to the “Submit” button), the chance of someone filling the form in again is significantly reduced.

[...] How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://www.webdesignshock.com/how-to-design-an-awful-looking-sign-up-form-10-step-guide/ by Alex Black: “…this post will, count one by one the bad practices when designing a [...]

A great article - some useful points, thanks.
No 10 - the Sky one is an interesting one as the Cancel button may come before the Submit button on that form - which of course would make it the default button if some pressed the enter key - as keyboard users would.
Seeing your reply form that I'm just filling in I'm inclined to add two more:
11) Include an input field that you apparently can't tab to - Spam Protection answer.
12) Put the labels for the inputs in an unexpected place - ie to the right of the text boxes.

These are some really good points you're making here, if you'd probably be interested in writing a piece for us visit the New Guest Author’s Program to know the guidelines. Also be sure to follow us on Facebook and Twitter

[...] Speedy, painless sign-up forms help to increase conversion rates and keep visitors happy. Yet, in despite of that, there are countless examples throughout the web of sites that have painfully dreadful and frustrating forms that end up making you feel bad about the whole process. These forms are usually found on archaic, badly designed sites and there’s an unusual trend – the bigger the company, the more likely the form is to be awkward and needlessly complicated, such as: When you enter in Google the search term “beautiful Sign-up forms” you’ll find about 1,370,000,000 results that include an endless list of showcase countdowns resources on the 20,17,7 and even 100 Best Sign-up forms, so why do what’s already been done? How to Design an Awful Sign-Up Form, 10 Step Guide [...]

I have to respectfully disagree with #2 and #4. Yes, password limits are awkward, but encouraging users to use the same password they use for other things is an invitation for disaster. With apps like 1Password and LastPass, there's no excuse for crappy passwords anymore, as they make it brainless to create hard to crack passwords and they handle remembering it for you. We've seen so many security breaches over the past 12 months that have resulted in millions of user credentials being stolen, and since people are used to using the same (easily rememberable and easily guessable) password for everything, when their login to SiteXYZ gets pwned, so does their login to their bank account, etc. Hard password restrictions are frustrating, but not nearly as frustrating as having your identity stolen.
As for #4, yes, captchas are a pain, but so are thousands of spam registrations. There are some additional ways to combat spam (hidden form fields, javascript tricks, etc), but each one has their own flaws. I have one forum that, before I implemented some level of spam prevention, was getting upwards of 6k spam registrations *a day*.
I agree with the other points tho ;)
PS - you have a bug in the formatting of this article. #3 isn't set as a headline tag, it shows bold and part of #2's paragraph.

I tend to agree with point 2. If you make people use a complex password for sites that they don't consider to be important (e.g. forums) etc., then they're more likely to use the secure one they use for banking etc.
Surely it's better if they've got a poor password to give a link telling them how to make it better, but not force them. (Also, the requirement that some sites have that it *has* to include non-alphanumeric characters, or that it has to *not* have them) So, if you've followed advice as to how to have both a unique & complex password (e.g. using initial letters of a phrase & some characters from the website - with numbers/punctuation substituting for some things) - then sites that require you do/don't have the non-alphanumeric muddle things up.
(And, not everyone likes to use online password storing, they'd rather use a way that means they can remember)
Oh, and as a final point, don't make people create a highly complex password for a trivial site - and then email it back to them ...

Free Flat AI Social Icons
A pack that contains 80 free flat social icons made in AI format, perfect for modern websites. The icons are flat and they have a long shadow. All icons are 100% vector so their edition and modification must not be a problem.

Free Outlined AI, EPS, SVG & PSD Icons
A gorgeous set of 100 free outlined icons for multiple purposes, made in three sizes and several formats like AI, EPS, SVG, PSD, so you can edit them (although they already look really nice). These icons can be used in wheather, travelling, presentations, and many more projects. This set was created by Zlatko Najdenovski.

FitLife: Fitness One Page PSD Template
FitLife is a free one page PSD template made for fitness and health purposes. This template is suitable for health clubs, yoga, spa, sports, gyms and trainers. Among its features it has optional parallax design, clean and precise design, an 1170 Bootstrap-based grid, named and grouped layers, easy and customizable PSD and free fonts included.

Lucid: Free Bootstrap Landing Page Template
A beautiful free HTML5 Bootstrap landing page with 3 different variations: App Launch, Contact Form and Subscribe Form Variation. This template includes PHP for the contact form to work right out of the box.

Free Outlined AI, EPS, SVG & PSD Icons
A gorgeous set of 100 free outlined icons for multiple purposes, made in three sizes and several formats like AI, EPS, SVG, PSD, so you can edit them (although they already look really nice). These icons can be used in wheather, travelling, presentations, and many more projects. This set was created by Zlatko Najdenovski.

SCreative: Modern & Creative PSD Template
SCreative is a modern and creative template created in PSD format. It is a clean template, perfect for creative agencies, corporates, freelancers and people who needs to showcase their work. Some of its features are:
- Creative and Modern Design
- One Page Layout
- Bootstrap Grid 1170 px
- Clean and precise layout
- Named and Grouped layers
- Customizable PSD files
- Free Fonts

Pinwall: Flat & Modern PSD Website Template
Pinwall is a simple template PSD template for startups and small companies. Its layout is really simple, with a menu ribbon on the left, social icons on top and a little caption with action button. Right below you can find some companies logos (clients roll), a message area, and a contact area. This template is free and you can use it for any purpose.

Free Corporate PSD Web Design Template
A beautiful clean template for website made in PSD format. The template has a logo on top, a menu, a big background image, description and action button. Then we can see some features area, latest projects, client testimonials, contact and more. It also includes an inner page for portfolios, with thumbnails and a clear layout, and a contact page with the regular form.

Online Shop PSD Website Template
A simple template for websites made in PSD. It has been created for e-commerce sites, made with blue and white tones. Its layout is really clean, including a top bar for important information, then we have a menu bar with logo, navigation, search and shopping cart; then there's a featured image slider, products and footer. It is free.

Free Charity Website PSD Template
A different yet beautiful PSD web template, perfect for non-profit organizations, charities and these kinds of organizations. The layout is divided in boxes, including a menu, featured image with transparencies, caption and donate button.

Simple CSS Notification Modals
A simple set of modals made in CSS for notifications or alerts. These include the regular success, warning and error messages, along with icons for easy understanding. The modals also include descriptive text and action buttons.

Retina PSD MacBook Pro
A realistic mockup made in PSD format depicting a MacBook Pro. The mockup includes a smart object so you can add your own designs, and it also has a glossy effect and the reflection on the screen. This design can be used both personally and commercially.

CSS & Canvas Loader
A beautiful loader made with CSS and Canvas. It is full of little squares flowing through space. The cursor is replaced by a focal light that creates shadows from the squares. It is a compelling code snippet that can entertain people while a page loads, or it can work as the base of a game. It was created by Mladen Stanojevic.

Zen PSD User Interface Kit
The Zen UI kit is a compelling interface made in PSD format, created with soft colors, effects, and outlined and flat elements. The design components of this freebie range from simple widgets for social sharing and media player, to complete calendars, and sign up widgets. It was created by Virgil Pana.

PSD iOS Keyboard Mockups
A unique keyboard mockup for iOS 8 made in PSD format. It can be used in several design prototypes, and each element can be easily editable thanks to vector shapes. It was created by Virgil Pana.

Flat Apple PSD Devices
A set of Apple devices mockups made in PSD format including minimally crafted iPad mini (black and white), iPad, MacBook Pro and iMac. The mockups have a flat style, and each element can be edited on its own. This set of mockups was created by Dribble user Nick.

Web Templates HTML
72 submissions
A collection of HTML website templates, perfect for multiple purposes like corporations and new media, designed with fresh, modern styles and ready to be used anywhere.

JQuery Grids
21 submissions
jQuery grids are a very useful layout option when its potential is grasped. In this list, you will see responsive, drag and drop, animated filtering, and other types of grids.

Cursive Fonts
61 submissions
Massive set of cursive fonts with both formal and casual alternatives featuring the fluidity proper of handwritten calligraphy. Useful for invitations, signatures and so on.

Content Box Designs
56 submissions
Find the right content box and widgets designs for several purposes such as profile previews, keypads, social share screens and more, all through this huge selection.

Vintage Fonts
63 submissions
A beautiful curated set of vintage fonts to give your next project a retro look. These designs are particularly useful to make striking headers and titles for websites, posters and more.

JQuery Accordions
37 submissions
This group of resources will help you create and style jQuery accordions with, which are a great alternative for organizing large datasets and give them a neat presentation.

Icon Fonts
24 submissions
Icon fonts provide major advantages to your designs, such as compatibility with high-resolution displays and easy customization. Take a look at this set to explore different options.

Download Buttons
10 submissions
If you are providing content to your visitors, make sure you do it in style by using one of these download buttons (graphics and css) coming in multiple styles: Realistic, 3D, shiny and more!

JQuery Tooltips
15 submissions
Multiple jQuery tooltip plugins coming in different flavors and providing easy implementation. These tools are ideal for guided tour pages on your websites and other similar tasks.

Video WordPress Themes
13 submissions
This is a fresh list of WordPress themes for video. They include all the necessary features and layout style to deliver great video content easily and beautifully.

JQuery Form Tools
42 submissions
Use any of these jQuery form tools to create forms and add special characteristics to them, such as credit card validation, input counts and limits, date entries and more.

JQuery Pagination Plugins
6 submissions
In some occasions when you want to showcase content, it could be too much to put it up all at once. These jQuery plugins will help you divide the publication into multiple pages.

Drupal Themes
15 submissions
Drupal is a complex system, but fortunately, here you will find a selection of themes in multiple styles: Minimalist, flat, Ecommerce-ready, and more to ease your workload.

Typewriter Fonts
20 submissions
A selection with typewriter fonts that were either carefully made to give the effect of being printed in paper by a type bar, or were designed after well-known typefaces used in typewriters.