Today, you’d be hard-pressed to find a website that doesn’t have at least one form.
Whether it’s an email opt-in to get people to sign up for a newsletter, an intake/onboarding form, a way to collect marketing leads, or even a payment form, signup forms are crucial to getting visitors to take the desired call to action (CTA).
In fact, according to Sumo, the average email opt-in rate is 1.95 percent. Suffice it to say, most signup forms have a lot of room for improvement.
Your signup form should be clear, concise, and have a streamlined design that works across laptops, desktops, tablets, and smartphones.
In this post, we’re going to share tips about how you can design top-performing forms.
Decide on the Goal of Your Sign-up Form
The first step is to decide on the goal and purpose of the form. This will inform every aspect of your form, from the overall look and feel to what questions you ask. Here are some things to think about:
- What does success look like?
- What are the key metrics you’re tracking?
- What’s the main call to action (CTA) that you want people to take on the form?
Choose Your Online Form Software
Once you have the purpose, goal, and main CTA of your form, choose an online form builder.
There are dozens of options to choose from, including completely free options like Google Forms and fully built-out solutions like JotForm.
Pro tip: Many online form builders even offer built-in signup form templates that you can use such as Typeform’s form maker.
In fact, JotForm has more than 75 different volunteer signup form templates. This can save you a ton of time.
Make Sure the Design Matches your Form’s Goal and Primary CTA
This starts with thinking about the form layout:
- Will it be a single page or multiple pages?
- Do you need multiple sections?
- How many questions will you ask?
- How will you sell the benefits of filling out the form?
- What form fields do you need (i.e., dropdown, radio buttons, paragraph field, etc.)?
These are some of the big-picture design things to think about. In addition, check out this detailed guide for 46 form design best practices, including what colors and form fields to use, form validation, and error codes.
Optimize Your Form for Mobile Devices and Tablets
With 3.3. billion smartphone users, there’s a good chance that the majority of visitors will be viewing the form on their phone. If the form looks wonky, is hard to fill out, or isn’t easy to navigate on a touchscreen, the majority of people will bounce within a couple of seconds.
Here are a few tips to create a mobile-friendly form:
- Use autofill whenever possible. The less typing that’s required on a smartphone, the faster it will be for someone to complete the form. You can use conditional logic to streamline this process further.
- Choose a single-column layout with an easy-to-read font. This is easier to navigate via a touchscreen.
- If you need to collect location data or photos, leverage the smartphone’s built-in GPS and camera functionality.
- Consider integrating with Siri and Google Assistant.
- Make sure your form loads fast, ideally in less than three seconds.
- Test your form on both iOS and Android phones. Pretend to be a visitor and walk through every step in the process. Take notes about anything that’s confusing, looks weird, or takes extra effort to complete.
Ask the most important questions first
For most forms, the most important questions will be the person’s name and email address. It goes without saying that these should be the first two questions. Add any other crucial questions right below these.
Include the fewest number of questions possible
According to this experiment from ConversionXL, a five-question form outperformed a nine-question form by 34 percent. The fewer questions you have, the more likely people will be to complete your form.
You can boost your form response and completion rates by telling a story, conveying the value and main benefits, sharing specific examples, and adding social proof elements throughout the form. This starts with the description in the intro section of your form.
In addition, once you have built the first version of your form, we recommend having at least two other people review and edit it. This not only helps you eliminate potential blind spots, but in the process, you might end up removing some questions entirely.
Add a Progress Bar
As we alluded to above, the shorter your form is, the more likely people are to complete it. However, sometimes, you need to have more questions.
If you have more than six questions, or your form spans multiple pages, we recommend adding a progress bar. This allows respondents to see where they are in the form submission process and how close they are to completion.
In fact, 90 percent of people prefer to see a progress bar.
Use Automatic Field Validation
Field validation not only helps you collect accurate information but also improves the user experience for visitors.
For example, if you ask for their email address, you can prompt people to include the “@” symbol and “.com.” While it won’t stop people from filling out junk email addresses like “[email protected],” it will at least ensure that all email addresses collected are, in fact, email addresses instead of random text strings.
Another important use case for in-line field validation is displaying error messages. This is often overlooked but can be a great way to walk people through your form. If they’re missing something or haven’t answered a required question, a well-written error message can fix this and, in turn, improve your form completion rates. Your error messages should be clear, concise, and helpful.
Streamline the Payment Process on any Sign-up forms with a Checkout Section
When you’re collecting payments via a checkout section on your signup form, there are many things to consider.
For starters, the form should be secure. At minimum, it should have an SSL certificate and visible security trust signals. If it’s embedded on your website, your site should also be fully encrypted.
Make sure that your site/form design and messaging look professional and credible. Remember, you’re asking people for sensitive personal information, including their name, address, and credit card details. If your form has tons of spelling mistakes, weird spacing issues, and no background information and social proof signals (i.e., testimonials, customer reviews, etc.), this will make you look like a fly-by-night organization. Most people will bounce right away.
In addition, you should limit the number of steps that people have to take to pay you. The average checkout form has 14.88 steps. That’s far too many. Edit out as many nonessential questions as you can.
Provide a Quick and Easy Way to Share Feedback
This is easy to overlook. Anyone who takes the time to fill out a form is, by definition, a more engaged consumer. Provide a paragraph field with the question, “Do you have any additional suggestions or feedback?” This can help you get additional ideas moving forward. You’ll likely be surprised by how many people go out of their way to offer suggestions.
Include a Thank-You Page
For starters, this is a nice thing to do. Showing appreciation not only humanizes your brand but also makes it more likely people will come back to your site.
The other key reason to include a thank-you page is for tracking purposes. You can track not only who signs up through your form but also where they were referred from. This helps you spot trends.
For example, if you notice that half of your traffic is coming from Pinterest, and one-quarter is coming from Google (organic search), you can prioritize these channels moving forward. Alternatively, if you’re spending tons of money on Facebook ads and generating few results, you can modify or stop the campaign altogether.
Promote Your Sign-up Form
Just as with any piece of content, it’s important to distribute and get the word out about your signup form. This can include sharing it through email (via your email list), on social media (i.e., Facebook, LinkedIn, Twitter, etc.), in your retail location (via a tracking code), and with friends, family, and colleagues.
In some cases, such as to generate more email subscribers or marketing qualified leads (MQLs), running ads to your signup page may make sense. Make sure you have proper conversion tracking in place. Using UTM parameters and/or setting up events in Google Tag Manager can help with this.
The top-converting signup forms have a clear purpose and CTA, ask for only the most relevant details, and are easy to complete no matter whether a person is using a laptop, tablet, or smartphone. Make sure your forms check all of these boxes, and you’ll be prepared for a successful marketing campaign.
Tufan is working in the marketing department at JotForm. Even though he was born in Ankara, his spirit belongs to Brooklyn. Taking the brute force algorithm to the heart, Tufan had tried many jobs from various fields but he found his passion to be Marketing.