25 Sign-up Form Design Tips to Get More Conversions

Whether you’re growing your mailing list, enrolling attendees for an upcoming webinar, or registering subscriptions to a trial offer, one critical consideration applies to all: sign-up form design can make or break your conversion rate.

If prospects don’t complete the form, you don’t get the information. The best sign-up form design is one that gets filled out correctly and submitted — not the ones your designers think the prettiest. Better sign-up forms can make conversion rates soar. One company made a single change by adding “optional” to the phone field and doubled the opt-in rate.

Keep reading to discover the ins and out of sign-up form design. We’re going to show you how your team can create effective sign-up forms your prospects will breeze through on the way to becoming customers and repeat customers.

Why sign-up form design matters

Visitors to your ecommerce website are there on a mission. They want to accomplish a goal, whether to buy something or learn something. There’s often just one thing standing in the way of the prospect reaching that goal: the sign-up form.

If your sign-up form design seems too cumbersome or intrusive, your conversion rate (form completion rate) will suffer. If it seems quick, easy, and low friction, then your conversion rate will climb.

The 25 tips below are field-tested. We’re not holding any “secrets” back. These are the same general factors we consider when we evaluate sign-up forms as part of our Conversion Growth Program™ and Conversion Audit work for clients. Share these 25 best practices with your marketing and design staff. Use them to boost your sign-up form conversions and help prospects move closer to the sale.

Patrick Neeman on sign-up form design optimization: “Red asterisks.” 😊@usabilitycounts Click To Tweet

25 recommendations for sign-up form design inspiration

You don’t enjoy filling out forms, and neither do your prospective customers. When a form stands in the way of someone moving further along your path to sales, that’s a problem.

How can you overcome the resistance and get your visitors over the hurdle? Use the sign-up form tips below to make filling out the form easy on your prospects.

1. Know exactly what the form is meant to accomplish and stick to that mission. Simplicity is the key for sign-up forms. Be absolutely clear on how filling out the form will benefit the prospect, then make the process of obtaining the benefit quick and efficient. Remember, the form’s purpose isn’t just to get something, but also to give something in return.Whether you’re providing a discount, a special resource, or other reward for filling out the form, the prospect should feel the GET is considerably larger than the give.

2. Keep forms simple and unobtrusive. Leave plenty of white space around the form. Don’t crowd it. You want the form to stand out simply, not look cluttered and difficult. Aim for the minimum number of fields, not the maximum.

3. Ask only for the information you need, and make that request at a logical time. Ask for the sign-up at the proper time, and fit the form fields to the job at hand. Keep friction as low as possible.

4. Use powerful and provocative call to action copy. And whatever you do, don’t use “Submit.” Make your CTA something your prospects want to do or have. Use actions statements like “Get It Now,” “Count Me In,” or simply “Download.”

5. Stack the fields in a single column. Making users bounce from one column to another increases complexity. Single columns are perceived as straight shots to the target (form completion). Multiple columns extend the time-to-completion and decrease conversion rates.

6. Place field labels above the fields to speed the process. When you use a one-column form and place labels above the fields, it’s easy for users to follow the path. If you choose to place field labels alongside the fields, left-align them for ease of reading. Users will need to slow down and read more carefully, but there are times when that’s exactly what you want them to do.

7. Don’t rely on placeholder copy inside the fields. Placeholder copy disappears when the user clicks into the field. That can introduce confusion. Beware of counting on the placeholder for your only descriptive label. For best results, use a floating label that appears (and remains) when the field is live.

8. Super-size your form fields. Don’t make users feel like they’re trying to squeeze text into an insufficient space. Nobody likes that (even virtually). Make fields plenty big and easily clickable.

9. Make sure field labels are brief and easy to understand. Labels should clearly indicate the information required for the field, but that’s all they should do. If additional instructions are needed, make help text available elsewhere.

10. Clearly indicate which fields are mandatory. You can sometimes get by with asking for more information from the prospect by making additional fields optional. If you try that approach, be sure to test thoroughly to be sure you’re not shooting yourself in the foot.

11. Divide complex forms up into simple sections. Many ecommerce sites opt for a multi-step process for sign-ups. Once you’ve collected a little information, the prospect is more likely to provide additional data.

12. Use field masking to help prospects enter data quicker. Masked fields automatically transform data to the appropriate format. They allow the user, for instance, to enter digits for a telephone number without having to worry about including parenthesis marks for the area code or dashed to separate the sections.

13. Use an autofocus indicator to draw attention to the live input field. You can change the field’s background color, use an outline color, or another method. The idea is to keep the visitor’s focus on the work at hand — completing the form.

14. Use sentence case, not all capitals for field information. Sentence case is easier to read, therefore easier to understand. You can get away with using title case for short words or phrases to provide emphasis, BUT EVENTUALLY, ALL CAPITALS GETS TIRESOME.

15. Include your privacy policy. Do you keep all the information you collect confidential? Do you hate spam? Tell them so.

16. Make the send button light up once the form is complete. Provide a visual clue to let the prospect know all systems are go and it’s time to send the form. The send button is the perfect place to make that happen.

17. Use autocomplete to ease the burden on prospects. The less information they need to enter manually, the better. Use information already in your database for that visitor or draw information via an app, but do whatever you can to make the process speedier and easier.

18. Make autocomplete fields easy to edit. The autofill information isn’t always correct. Maybe the respondent moved recently or wants to use a different phone number for contact. Don’t force them to jump through hoops to make simple changes.

19. Use form validation to detect errors before the form is sent. For best results, have that feedback display immediately. If the email address entered isn’t valid, for instance, tell the user to check and correct before moving on.

20. If an error is detected, provide instructions on how to fix it. Don’t get technical. Just use simple words and phrases to guide the prospect to a successful end. If needed, provide customer service help to resolve the issue.

21. Retain the data already entered. Never make the prospect start over from the beginning. Refreshing a page or going back to view a previous page should make no difference whatsoever to the sign-up procedure. Make effort to avoid frustrating your prospects, and they’ll reward you with more sign-ups and sales.

22. If setting a password is required, make minimum requirements obvious. Have you ever entered a desire password in a field, then been told it’s not sufficient? Have you tried more than once? Don’t do that to people trying to use your sign-up forms.

23. Place the form above the fold. This is especially true of lead generation forms. You want them to enjoy maximum exposure to prospects, so embed them in the top portion of the page. Don’t make visitors have to scroll down to see them.

24. Make your form and subsequent resolution page absolutely congruent. Whether those who complete the form are sent to a landing page or a thank you page, make sure the transition makes sense. Always provide feedback to users to let them know when the form has been successfully entered.

25. Test, test, test. Once you’ve compared your forms to this checklist, made revisions, and you’re seeing results, don’t stop there. Keep tweaking and testing. Aim high.

Sign-up Form Design is a Conversion Rate Optimization Necessity

There are times when the little things can make a big difference, and sign-up form design is one of those instances. By applying the 25 guidelines above, you can get more visitors to accept your offers and take the next step on your path to sales.

We’ll close with a bonus quick tip:

Steve Krug, author of the classic UX book, “Don’t Make Me Think,” has this to say about forms:

“Buy one of the two great books that are out there: “Forms That Work,” by Caroline Jarrett and Gerry Gaffney, or “Designing UX: Forms,” by Jessica Enders. And if you’ve waited too long to do that, try what I call cubicle testing.

Write your first draft of the form by hand. Take it to someone in a nearby cubicle and ask them to fill it out while thinking aloud about what they’re doing. Listen and learn. They’ll immediately reveal important things you haven’t thought of.”

Need help? Schedule a free landing page assessment or get in touch.

Resources:

• Don’t Make Me Think
• What Is Address Line 2 (and Other Usability Questions)
• How to Increase Engagement & Conversions with Interactivity