Written by lateralconcept on 22.07.2019

Tips for Making the Best Contact Form for your Website

Blog

For web designers and developers, contact forms are simple to implement, yet are one of the most important pieces of functionality for your website design. For businesses looking to generate leads and sales, encouraging users to contact them is often one of their top goals.

Despite their simplicity, there are still many considerations to make when implementing contact forms, which will have a huge impact on conversion rates and your ability to track usage.

Below are the most important features that your contact form should have.

Use an asynchronous form

Asynchronous forms use javascript (AJAX) to trigger a server-side function to send your message without reloading the web page.

Here are a few of the benefits of using asynchronous forms:

• Validation – if validation is setup properly, before the form data is sent over the script will check to ensure that all fields are completed properly. If not, then your validation messages will appear on each field. This saves server resources by not unnecessarily triggering processes on the back-end.
• Efficiency –Rather than loading an entire new page, upon completion the script will return a small packet of data – usually in JSON format – which will contain a message or some HTML to inform the user whether the operation succeeded or not.
• User Experience – Not only does the user not have to wait for a new page to load, they will also remain on the page they used to contact you.

An easy way to check if your form is asynchronous is to view the page as your form is submitted. If after submission, a new page is loaded, then your form is not asynchronous. Asynchronous forms will usually retain all the same page content, and just load a message in the form area upon completion.

Filtering spam

Spam e-mails are becoming increasingly more problematic as spammers become more creative at bypassing anti-spam efforts. I’ve tried many different methods of dealing with this issue – from captchas to scripts found online – with mixed results.

Many websites rely on Google’s reCAPTCHA, which does a decent job of detecting bots, but also requires an additional step by users to click the “I’m not a robot” checkbox. As of this writing, they are soon to be releasing an invisible reCAPTCHA, which will resolve that issue. Until then, we must continue using other methods if you want to have a better user experience.

What I’ve found that works best is using some of the less popular contact form solutions. For example, my contact form of choice is from Perfect Web, which has a contact form available for both Joomla and Wordpress. Despite not being widely known, this form has features that meet all my requirements for most websites, and has excellent anti-spam detection which filters out almost all the spam e-mails from my contact form without requiring users to take any additional steps.

Track user activities with Google Analytics

While it may seem like tracking form usage doesn’t add value, I find event tracking to be very effective for ensuring your forms are always working properly, tracking which pages are used to contact you, and discovering if visitors are making use of your calls to action.

Google Analytics has an easy to use event tracking feature which allows you to store user interaction data with additional messages that can be viewed when logged into your account.

TRACKING FORM FAILURES

Additional features for security, anti-spam, and integrations with other services can potentially cause issues with using your contact form over time. For this reason, I send an event with an error message to Google Analytics should the form return a failure. It’s simple to do, and adds an additional level of comfort for me when I am tracking user interactions.

TRACKING SUCCESSFUL FORM SENDS

Even though you receive e-mails in your inbox when the contact form is used, it’s easier to track and review which pages are being used and how frequently if that information is available in your analytics dashboard. Over time this can help you determine which pages convert users the most, and allow you to play with different form variations to figure out what works best for your customers.

TRACKING NON-CONVERSIONS

In some cases, contact forms are only revealed after clicking a call to action, after which the form slides out or opens in a modal. In these situations, it can be difficult to determine why a user opened the form without using it, but if this happens frequently then it may be time to revise some of your form fields or provide more information on the form itself. Regardless, you would never know how often this happens if you’re not tracking this usage!

ADDING EVENTS TO YOUR GOOGLE ANALYTICS TRACKING

If you’re using a 3^rd party contact form solution which uses asynchronous javascript/AJAX, it’s helpful if Google Analytics tracking is built in. Because Google Analytics events are sent using javascript, the code necessary needs to be added to the javascript being utilized by the contact form, since javascript only allows one event handler to be attached to an element. If it doesn’t have this feature and you’d like to track events, then it may be a good idea to look for a different form solution.

If you are using a form that doesn’t use asynchronous javascipt, then the script to send the events can just run on the page users are sent to after the form is triggered.

Choosing the right placement and messaging

Important pages pertaining to your services or product offerings should also contain a contact form with encouraging users to reach out to you.

The best placement on these pages is towards the bottom, so that your audience has a chance to read your content before deciding to contact you.

Additionally, displaying a phone number and/or e-mail address within your messaging next to the form is helpful so that users have multiple ways to contact you.

Content around your contact form should be brief – a small paragraph is all you need. Background images and some styling around the form areas should be used to help draw attention to these areas as well.

Choosing the right contact form solution

After reviewing the criteria for an ideal tracking form, does your current setup meet these requirements?

Some users may be want to choose their contact form based on how they look, but if you’re capable with styling the form yourself, it’s much more important to base your decision on features offered.

There are many options available to choose from online, many of which may be free to use. While it may be convenient to use a free product, if there are some important features that are lacking for such an important component of your website, it’s likely worth the cost to purchase a form solution that has some more capabilities – especially since most of them are very affordable.

Do you have any contact form products that you prefer, or have some additional advice for our readers? If so, please sound off in the comments below!