Creating WordPress Forms That Get Filled In

So let’s start with the code.

Well-Coded Forms

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.

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 not only to provide my email address, but also my telephone number, street address and date of birth. Needless to say, I connected 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.

Form Layout

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.

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 in 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.