Forms are an important part of any website that asks for registration, signup or subscription actions from visitors. These form events can play a key role when purchasing products or services from an eCommerce website, or simply joining a blog’s newsletter list.
Sloppy design can limit the engagement and completion rates of your own website form, while a great looking form can boost the chances that visitors will hit that all important “submit” button.
Here are some guidelines to help you get started creating great forms for your website, blog or online store.
Sloppy design can limit the engagement and completion rates of your own website form, while a great looking form can boost the chances that visitors will hit that all important “submit” button.
Here are some guidelines to help you get started creating great forms for your website, blog or online store.
1. What you need, what you don't
First, determine what fields your form absolutely needs. Contact forms, for example, generally feature the same few fields. You need the person's name, email address, a field for their message and a button for sending the message. If you don’t need the person to specify their address, don’t ask for it. People are happy to hand over information when they understand the necessity, but extra requests can become a repellant to submission.
If you need something the user may not want to give up, explain your reasoning. Other than that, stick to fields you absolutely need. Each additional piece of information lowers the chances of form completion.
Do It Yourself: To start a contact form on your own site, drag the Contact Form element onto your page. You can also start a new page and choose one of the new Contact options in Page Layouts.
2. Keeping it short
It’s important to keep the form as short as you can, whatever “short" means in your case.
There’s no magic number of fields. While a basic contact form rarely needs to contain more than a few fields, a personality questionnaire on a dating website would be useless unless it asked a lot of personal questions.
Whatever the requirements of your form situation, figure out how to keep it as short as possible.
Do It Yourself: To remove individual form fields select the field you want to remove and then click the “x” in the top-right corner of the highlighted field.
3. What's required
Even when you're only asking for things you absolutely need to know, you still might find yourself needing an optional field.
The most common example of this is the second “Street" field in a form that asks for an address. This is an incredibly useful field to include, because it accommodates suite numbers and other non-residential circumstances, but it is almost never a must-have. This field should be optional.
If a field is not required, make it clear. Quite literally, write the text “Optional" next to the field label. It will keep users from wondering whether or not they need to try to supply information that isn't relevant to them. Here’s an example using “Optional” and (*=required) to make it very clear that the Email field is now optional.
First, determine what fields your form absolutely needs. Contact forms, for example, generally feature the same few fields. You need the person's name, email address, a field for their message and a button for sending the message. If you don’t need the person to specify their address, don’t ask for it. People are happy to hand over information when they understand the necessity, but extra requests can become a repellant to submission.
If you need something the user may not want to give up, explain your reasoning. Other than that, stick to fields you absolutely need. Each additional piece of information lowers the chances of form completion.
Do It Yourself: To start a contact form on your own site, drag the Contact Form element onto your page. You can also start a new page and choose one of the new Contact options in Page Layouts.
2. Keeping it short
It’s important to keep the form as short as you can, whatever “short" means in your case.
There’s no magic number of fields. While a basic contact form rarely needs to contain more than a few fields, a personality questionnaire on a dating website would be useless unless it asked a lot of personal questions.
Whatever the requirements of your form situation, figure out how to keep it as short as possible.
Do It Yourself: To remove individual form fields select the field you want to remove and then click the “x” in the top-right corner of the highlighted field.
3. What's required
Even when you're only asking for things you absolutely need to know, you still might find yourself needing an optional field.
The most common example of this is the second “Street" field in a form that asks for an address. This is an incredibly useful field to include, because it accommodates suite numbers and other non-residential circumstances, but it is almost never a must-have. This field should be optional.
If a field is not required, make it clear. Quite literally, write the text “Optional" next to the field label. It will keep users from wondering whether or not they need to try to supply information that isn't relevant to them. Here’s an example using “Optional” and (*=required) to make it very clear that the Email field is now optional.
Do It Yourself: To toggle required on and off for different form fields, select the field and click the “Required” slider button on the right side of the configuration options. You can add the “Optional” text in the Field Title and (*=required) by dragging the text element into the top of the form below the title.
4. Well-spoken buttons
At the end of the form, do two things:
5. Track and change
One more thing: to ensure your form's success over time, track it’s progress closely. Take a look at the number of completed form entries compared to traffic to the page where the form lives (you can get page traffic from Google Analytics). Use this information as a guide to form progress. Tweak form layout and try different field content until you see an increase in form completions vs. traffic. Over time, you'll see the completion rates go up, and you'll know you're maximizing your website's form potential.
Do It Yourself: You can view all your form entries from the My Sites dashboard. Click the “more” drop down next to your site and select Form Entries to view all submissions with dates and a total count.
Have you put together a particularly successful form on your site? Share your form tips and tricks in the comments!
4. Well-spoken buttons
At the end of the form, do two things:
- Display a button that is obviously clickable, whether this means using a little shadow, or copying the iOS style of “flat" design, just make sure people will know it's a button (Weebly does this by default).
- Use either a verb phrase (“Join now!") or a verb-noun pair (“Save changes"). This tells the user what will happen as a result of clicking the button, and setting clear expectations like this is always a good idea. In the form above, we've changed the default label of "Submit" to "Send Message" to let users know their message will be sent by clicking the button.
5. Track and change
One more thing: to ensure your form's success over time, track it’s progress closely. Take a look at the number of completed form entries compared to traffic to the page where the form lives (you can get page traffic from Google Analytics). Use this information as a guide to form progress. Tweak form layout and try different field content until you see an increase in form completions vs. traffic. Over time, you'll see the completion rates go up, and you'll know you're maximizing your website's form potential.
Do It Yourself: You can view all your form entries from the My Sites dashboard. Click the “more” drop down next to your site and select Form Entries to view all submissions with dates and a total count.
Have you put together a particularly successful form on your site? Share your form tips and tricks in the comments!
RSS Feed
