Most of us have got at least one form somewhere on our WordPress site.
It might be a simple contact form. Or a newsletter signup. A purchase form maybe. Or perhaps something more bespoke.
Whatever information your form is designed to gather, I'm prepared to bet that you want as many people as possible to fill it out and click submit. You don't want people giving up halfway through, or never finding the form in the first place.
In this article, I'm going to give you some tips on adding forms to your website that actually get filled in. I'm going to cover:
- The code: how to create forms that are accessible and responsive, with valid code that ensures they work correctly.
- The user experience: how to enhance the design of your forms so they are as easy as possible for people to fill in.
As we go along, I'll provide some examples of good forms that work well and are user-friendly, and point you to some resources you can use to help.
So let's start with the code.
Chances are you don't code forms directly into your site. You probably use a plugin.
So it's important to install a plugin that outputs clean, accessible and responsive code that doesn't adversely affect the way your form is displayed or works.
When you've installed your plugin and created your first form with it, I recommend visiting the form on your site (both on desktop and mobile) and examining the code that runs it.
A well-coded form will:
- Use the correct elements for form fields and labels.
- Have the design of the form output in the same order as the code.
- Be responsive so it works equally well on all screen sizes.
- Be possible to use without a mouse: tabbing through the fields with a keyboard will take the user through the fields in the correct order.
- Be easy to interact with on all screen sizes, with a mouse, keyboard, or thumb/finger.
Check your form on different devices and screen sizes and check that the code uses the correct HTML elements and doesn't add anything it shouldn't. Run it through a validation tool to check there aren't any issues.
If you do find minor problems, you may be able to fix them in the setup for your form. For major problems, you might need to find another forms plugin.
And if your form builder plugin has given you a form that isn't responsive, you definitely need a new plugin. The majority of website visitors now are on mobile, and if your forms aren't responsive, they won't fill them in.
The registration form for Envato Elements is designed so that it works equally well on desktop or mobile, and the design and content does't change between the two.
UX in Form Design
The design of a form, and how easy it is to interact with, will have a huge impact on how frequently it is filled in. To maximise the chances of as many people as possible making it to the submit button, you should adopt UX best practice. Here are some things you can do to improve your forms.
Limit the Number of Fields
Forms take time to fill out, and you want to reduce that. You also want to avoid people felling that you're impinging on their privacy. I recently attempted to access public WiFi that required me to provide not only my email address, but also my telephone number, street address, and date of birth. Needless to say, I connected to a different WiFi network!
The HubSpot website gives out a free guide to website conversions in return for your email address. However, when you click the download link, you're presented with a form asking you for much more information than they need to send you the guide.
I would have downloaded the guide and been happy to receive their newsletter, but I didn't want to provide all this information, so I didn't complete the form. That's a conversion lost.
By contrast, the Kickstarter site only asks for your name, email address and required password when you sign up with them. That's all they need, so it's all they ask for.
Identify what information you need to be able to respond to someone who completes your form. It might be nothing more than their name and email address or phone number. For newsletter subscriptions, you only need their email address. Stick to the minimum: you can always ask for more later if you need it.
Split Up Long Forms
If your form has to be long because you really need more information, then consider splitting it over multiple tabs or pages. That way, the user isn't presented with a load of fields when they first access the form.
If you register for the Duke of Edinburgh Award in the UK, an award for young people which involves physical, mental, and social challenges, you genuinely do need to provide a lot of information. The form has been split into five parts to make this less daunting.
Readers find it easier to scan a form if the text is placed above the fields. This way, the eye is drawn down the form without having to move from side to side. And the form will work equally well on desktop or mobile.
The Envato Elements registration form does this to help guide the eye down the form. It also includes no more than the required fields.
The form fields should also be self-explanatory and helpful. Avoid jargon or nonstandard descriptions of the fields. Name and Email is plenty.
Call to Action
A clear call to action will give users an incentive to complete the form. If it's clear that there is a benefit to them to completing this form, or the action that it will trigger is clear, then they will be more likely to make it to the submit button.
Unbounce ran A/B tests on the registration form for Betting Expert, and found that an improved call to action increased conversions by over 30%.
"Get Free Betting Tips" outperformed "Join Betting Expert" because it gave people a clear reason to subscribe, with a benefit to them.
When designing your call to action, imagine the visitor's frame of mind and what they're looking for when they complete your form. Forget about the benefits to your business and articulate what they will gain from it.
And if your forms plugin allows it (and a good one will), edit the submit button so it's a call to action instead.
Don't Ask for Payment Information If You Don't Need It
Above I mentioned the WiFi network that wanted information I considered irrelevant. Another piece of information people don't want to part with unless they have to is their credit card number.
If you're offering a free trial, don't ask for a credit card number at signup. Instead, give the visitor a reason to stay with you after that first month (or week, or whatever you offer), and get the payment details then.
The Moz website offers a free trial with a simple form and a commitment that I can cancel at any time and a promise to remind me before my free trial ends. So far so good.
But when I scroll down, I'm asked for my credit card details. This leads me to assume that they'll automatically charge me after a month, and discourages me from signing up.
Now I'm not denying that Moz know their stuff when it comes to SEO and conversions, so this may be a deliberate tactic. They may have found that the number of people dropping out within the free month is significantly large that it's worth losing potential signups in the first place. If the same is the case for you, that's fine, but make sure you do the analysis first.
Using Conditional Logic
Using conditional logic in your forms can help to make them no longer than they need to be.
A good forms plugin will let you display fields based on the user's response to an earlier field, meaning those fields aren't displayed unless needed.
Once again, exercise caution when deciding which of these fields will be displayed, and only show them when they really are necessary.
Form Confirmations and Messages
Once the user has clicked on the submit button, it's good practice to provide feedback so they know they've successfully completed the form.
This could be redirection to another page with more information, or it could be a message on the same page where the form was held. Either way, make it clear that the user has successfully completed the form and that you are grateful to them for that. Tell them what will happen next, including any action they need to take, such as checking their email.
And when you do receive form submissions, follow up on them ASAP. I'm currently in the process of moving house, and I filled out website enquiry forms with three removal firms yesterday. Only one has called me back—guess which one will get my business!
Configure your plugin to notify you whenever a form is submitted, and follow up immediately. If you can, set up an autoresponder using your email system or a mailing list provider, so they receive something quickly.
If the user didn't complete the form correctly, and there is an error, make sure any error message is clear and tells them what they need to do. Don't use judgmental text, and don't be vague.
When I type my name into the email address field in the Envato Elements signup form, that field is highlighted and the message email is invalid appears.
This makes it clear what my mistake is so I can correct it.
Good Form Design Will Increase Conversions
Designing the forms on your website well will increase the number of people who fill them out and click submit. If you ensure that your forms are well-coded, accessible and responsive, and you design them for good user experience, you should find that they're much more effective.
- WordPressCreate a Contact Form in WordPress Using a Free PluginSajal Soni
- WordPressChoose a Form Builder: The 7 Best WordPress Form Builders ComparedNona Blackman
- WordPressBest WordPress Contact Form PluginsNona Blackman
- WordPressUse a Drag-and-Drop Form Builder for WordPressAshraff Hathibelagal
Also, if you want to use custom plugins but you're not comfortable tinkering with servers and prefer to have someone do it all for you, consider managed WordPress hosting. Thanks to Envato's partnership with SiteGround, you can get up to 60% off managed WordPress hosting.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post