Blog

10 Ideas to Design a Better Sign-Up Form

Blog - Design A Better Sign Up Form

Sign up forms are a great way to get users involved with your company’s website, and they open the door to maintaining the long term attention of your audience. Whether you are giving a reader the option to create an account, join your mailing list, or begin a free trial, these forms can lead to increased conversions for your business.

The opportunities presented by these forms makes their application and design an important process. With a lot of little things to consider, we have compiled some techniques that will help you create the best sign up form design to fit your brand, and lead to higher conversions for your overall business.

1. Top-Aligned Field Labels

When you align your labels above your fields, it makes your form quicker to fill out. You want to make the act of signing up as seamless as possible for users, and this design technique accomplishes this by preventing the reader's eyes from having to go left to right to try and navigate your form. If you are low on vertical space, then place the labels to the left, but align them to the right. This is not only visually appealing, but the simplicity captures the attention of the user, without wasting too much of their time.

Sign Up Form Design - field labels

2. Don't Make Forms Easy to Close

Although using a JavaScript lightbox may increase potential sign-ups, make sure that your lightbox doesn't close by clicking on the gray area surrounding the form. Instead, use a "Cancel" or "Close" button to ensure that the user closes the lightbox only intentionally. You don’t want to lose any potential readers if they accidentally click out of the form. It’s a small design change that can make a big difference.

 Sign Up Form Design – lightbox close

3. Validate Form Fields

Often users will accidentally fill-out an entire form incorrectly, only to submit it and find out that they made a number of mistakes. Rather than putting them through this extra step, just inform the user that a field has been incorrectly filled out as they make their way through the form. Don’t allow them to submit it until all of the fields are correctly addressed. Essentially this comes down to user experience and making sure that the process of signing up is easy and not too time-consuming for the audience. If they have to go back and repeat the form all over again, there is a good chance that they just won’t.

 Sign Up Form Design - validating fields

4. Descriptive Call To Action

Instead of the usual "submit" or "send", try using a call to action that describes what they'll be getting out of submitting the form. If it's to be able to start commenting on your forum, perhaps title your CTA something like "Join the Discussion". This can add a personalized touch to the design of your sign up forms, and it can especially come in handy if you have a variety of forms that are presented to your audience throughout your website.

 Sign Up Form Design - call to action

5. Microcopy

Microcopy is short, effective bits of information that answer vital questions that users have as they fill-out your form. These are questions such as "will I get sent a lot of emails if I sign up to this?" or "is this a free trial?" Answer those immediately using microcopy - text that is not overly prominent but that answers very important questions in the users mind. Answering these questions can help alleviate any hesitancy an individual might have that prevents them from following through with signing up. Keeping their mind at ease and providing full-disclosure can put a user’s mind at ease as they complete your sign up form.

 Sign Up Form Design - microcopy

6. Shorten Your Page

This may seem like an obvious one, but the idea is not only to decrease the number of fields in your form, but to also shorten the height of the page that it is on. If you can move some content over to the side or show some of it only on-hover, that has a potential to improve completion rates. Sign up forms should be a quick stop on your readers’ journey through your page, so make sure that the design does not obstruct their entire visit by forcing them to scroll down the page.

7. What Will Users Get?

Make it crystal-clear to users what they'll be getting after submitting your form. This goes hand in hand with microcopy and including all of the necessary information for a user. Are they signing up for a weekly subscription or a monthly one? How long is the trial they are enrolling for? Little details that may seem self-explanatory to you need to be clearly laid out for the readers. Vague copy may be concise, but it needs to be clear to the reader, leaving no room for confusion or frustration down the road.

 Sign Up Form Design - what you get

8. How Many Others Have Signed Up?

If there are other well-known companies or individuals already using the service or if there are any big statistics you can throw out there to make a convincing case to sign-up, that may help conversion rates. If readers know that they are not alone and that there are a number of other individuals who already enjoy being a member of your community, it could help play a role in their decision.

 Sign Up Form Design – user numbers

9. Add Facebook Connect

Adding Facebook integration has been shown to increase sign-up rates by up to 200% on major websites. Give it a try if it applies to you. In cases where a lot of information is required of users, it can act as a life raft. You can get the information from their profile rather than having them plug in all of the same information on your form. This is another small step that makes the sign up experience as easy for the audience as possible.

 Sign Up Form Design – facebook connect

10. Give A Sense of Security

Using security badges such as Verisign and McAfee can help at times when sensitive information is being passed through the form. Another badge that can help in this department is the Better Business Bureau's rating. Everyone should be concerned about their online security, and providing your users with that reassurance can not only help them sign up, but ensure their long term brand loyalty.

 Sign Up Form Design - security footer

All of these tips should be tested before implementing them on to any website. Certain tips might work well for some brands, while not being the perfect fit for others. Designing the right sign up form for your business is a process, but when done correctly it can have a tremendous impact on your conversion rates and overall interaction with your online audience.

Check out Blue Fountain Media’s video presentation discussing Sign-Up Form Design Best Practices:

How to Reach the Inbox Whitepaper

Share this post

Comment on this post

*
*

Ready to discuss your project?
Request a Quote
Blue Fountain Media is recognized as a
Top Digital Agency by
Ranked #1 Interactive
Agency by top interactive agencies example
Ranked Top 10 Digital
Agency by awwwards logo
Ranked Top 10 Agency
Worldwide by IMA logo
Featured Blog Article
Download our Free Whitepapers
Our Locations
New York Headquarters
New York Headquarters
102 Madison Avenue - Second Floor
New York, NY 10016
Chicago Office
Chicago Office
222 Merchandise Mart Plaza, Suite 1212
Chicago, IL 60654
Seattle Office
Seattle Office
14980 NE 31st Way, Suite 120
Redmond, WA 98052