Contact forms are an essential component of any website's contact page. They allow users to quickly and easily get in touch with you at all hours of the day, and a positive experience may influence their willingness to convert. Here is our short guide to creating a contact form that aids conversion and offers a great user experience.
To follow along with this guide you'll need the following tools:
In order to create your contact form, you will need a plugin. There are several free and paid contact form plugins you can choose from. At Mackman, we use Contact Form 7, one of the most popular and oldest free contact form plugins for WordPress. This guide will assume you are using Contact Form 7, however the steps are similar depending on the plugin you have chosen, for example WPForms.
To install a plugin, simply go to the 'Plugins' section on the left hand side of your dashboard menu, and select 'Add New'. Make sure that your contact form plugin of choice does not conflict with any existing plugins already installed on your website. Search for the name of your plugin, and select 'Install Now'.
Once you have installed and activated Contact Form 7, you can find its functionality under 'Contact' on your website's dashboard. Contact Form 7 starts with a default contact form titled 'Contact Form 1'. You can modify this, or select 'Add New' to start from scratch.
As standard, Contact Form 7 adds in several fields to new forms. These include name, email, subject, message and send. It's likely that you will retain many, if not all, of these. Adding a new field is as simple as selecting the appropriate tag generator button to generate the correct form tag.
As a general rule, the smaller the number of fields to fill in, the more people will use your user-friendly contact form. Similarly, odd numbers of fields tend to also increase the odds of users completing their details. However, depending on the purpose of the website and your target audience, sometimes users will want and expect more fields. In summary, the more motivation you give people and the easier you make it for them to take action, the more likely they are to do so.
If you choose to add in more fields to your form or alter existing ones, don't forget to save any work you've done.
Go to the 'Mail' tab. This is where you can customise the automated email that notifies you that a contact form has been completed. When you check the 'To' field, ensure that the email address is right: Contact Form 7 will default to the email linked to your website.
As the email does not automatically update to reflect any new fields you have added, you must add extra form tags to the body of your email, ensuring that the email you receive will show all necessary information the sender inputted. To do this, simply copy over the form field from your template. You can also add regular text around your fields if you choose to. Once again, don't forget to save.
Next you’ll want to integrate some form of spam protection to stop bots filling out your contact form and flooding your inbox with sales pitches. Here at Mackman, we use Google ReCAPTCHA to stop bots from filling out our forms. To integrate your new contact form with Google ReCAPTCHA you'll need to head to the ReCAPTCHA admin console and create an API key. Although this sounds technical you’ll be walked through how to do this on the admin console.
Once you've generated your site key and secret key you'll need to add these to the Contact Form 7 plugin. To do this you'll need to head to the plugin integration settings which you can find under the 'Contact' heading. Once you're in the integration tab you'll find a box titled reCAPTCHA along with a button to set up the integration. After that, all you need to do is paste your site key and secret key into the corresponding text boxes and press save. Now your contact form is secured against bots sending you spam.
Now you have created your first user-friendly contact form, you need to add it to your website for users to fill in. To do this, select 'Contact' on the sidebar again, then 'Contact Forms'. All you need to do is copy the shortcode from the area to the right of your form, open your website's contact page, and add a shortcode block in the Gutenberg editor. Paste your copied shortcode into the field, and arrange the content blocks in the way you would like them to appear. Depending on your contact form plugin, you may need to use CSS to style your contact form so that it matches the look and feel of the rest of your website.
Preview the contact page to make sure that the placement and appearance of the contact form are correct. If you are happy with the contact form, you can Publish the page, making the contact form live. Alternatively, if you have missed out an element or it isn't displaying how you hoped, either edit the blocks once more in Gutenberg, or go back to the 'Contact' area of your website and edit the form until it is to your liking.
When your new contact page has gone live, it is strongly recommended that you test your contact form. This irons out any potential issues that users may encounter, and ensures that your website offers a good user experience. To check it is working, fill out the form with dummy information, and press 'Send'. You should receive an email containing the details, sent immediately to the email address you provided in your Mail settings. If you do not receive an email, check your Junk folder before making changes to the form straight away.
According to the WPForms plugin, 50% of marketers say inbound marketing strategies, such as onsite forms, are their primary source of leads. In addition, 74% of companies use web forms for lead generation. 49.7% stated that their online forms were their highest converting lead generation tool. By periodically assessing the needs of your users and updating the contact form accordingly, you will see increased conversion rates and ensure that you are gaining the information you need from your users.
Do you need more information on structuring your user-friendly contact form, or perhaps you are looking for wider website design expertise? Contact Mackman today at email@example.com or call 01787 388038 to speak to one of our friendly team.
If you found this article helpful, you may like:
Our News & Blog
How to design an effective contact page that drives conversions
New Mackman Research project on behalf of Essex County Council begins
How to create a contact form that converts