Virgo Web Design Blog

Tips for Making the Best Contact Form for your Website

Tips for Making the Best Contact Form for your Website

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.

When a single missed contact could mean lost business for your company, every precaution is worth the extra time.

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 3rd 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.

Google provides some documentation for implementing their event tracking scripts here.

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!

 

Strategies for Revising, Reducing and Consolidatin...
3 Hilarious Web Design Ad Fails for Terrible Peopl...
 

Comments

No comments made yet. Be the first to submit a comment
Guest
Monday, 17 December 2018

LATEST ON OUR BLOG

OUR YELP REVIEWS

  • Virgo Web Design recently completed my website MeetPeopleChicago.com. Jerry was easy to work with, was attentive to my questions and was on top of things from start to finish. In addition he was very knowledgable and up to date on the latest technologies. I am very pleased with the final product and I will surely use him again for future enhancements. Thank you Jerry for the great work you have done!

    PETER S.

    Meet People Chicago

  • As a marketing communications person who knew my company needed an up-to-date website built in Joomla, I was very happy we found [Virgo Web Design]. I understood things from a content perspective, but when it came to back-end design and architecture, my hands were tied. [Virgo Web Design] was so knowledgeable and easy to work with, and was always available to answer questions, make tweaks, walk me through front-end editing tasks...you name it. [Virgo Web Design]'s accessibility and can-do attitude made such a difference to our entire team, and I hope I always thanked [them] enough for helping me through the client-side part of the web redesign process.

    CORRIE M.

    Aptude

  • "[Virgo Web Design] did an amazing job on my non-profit's website, ghhaven.org. [They] put our site together quickly and with all of the elements we requested - plus, [they] had a lot of great recommendations for things that we hadn't even considered for the site. [They were] very helpful throughout the process of getting our site launched and I found [them] to be quick in responding to all of my questions/requests as well. [They] even helped us get our business emails set up!

    I would definitely recommend Virgo Web Design as a go-to for all of your web design/development needs. I will definitely be using [them] again in the near future!"

    FRITZIE S.

    Genesis Hopeful Haven

  • [Virgo Web Design] has developed and designed multiple websites for me over the years. [Their] team are exceptionally skilled technicians. Their communication is easy to understand, and they are very proficient - even when near-end deadlines are demanding. Hiring Jerry Virgo and his team is one of the best decisions I have made for my company.

    Michael W

    One Chicago Realty

  • I've used Yahoo sitebuilder for several years and my e-commerce website was due for an overhaul. I asked around & received several recommendations from friends & other small businesses.

    Many of the other referrals came from Web design firms & had significantly higher overheads/billing rates...We had a tight timeline & [they were] very diligent at following up to avoid production delays at time when I was extremely busy. [They] did a nice all around job improving my SEO optimization, creating a polished final product, and documenting the back end with an easy to use manual.

    After the site when live, [they] stood by & helped me troubleshoot unanticipated events & helped me create work arounds.

    Chris H.

    City Tree Delivery

  • [Virgo Web Design] knocked out a full rebuild of our site in a few weeks, guided us through things we didn't understand with ease and calm and gave great advice, training and follow up service

    Nicholle D.

    DANK Haus

5000 characters left

LATEST ON OUR BLOG

OUR YELP REVIEWS

  • Virgo Web Design recently completed my website MeetPeopleChicago.com. Jerry was easy to work with, was attentive to my questions and was on top of things from start to finish. In addition he was very knowledgable and up to date on the latest technologies. I am very pleased with the final product and I will surely use him again for future enhancements. Thank you Jerry for the great work you have done!

    PETER S.

    Meet People Chicago

  • As a marketing communications person who knew my company needed an up-to-date website built in Joomla, I was very happy we found [Virgo Web Design]. I understood things from a content perspective, but when it came to back-end design and architecture, my hands were tied. [Virgo Web Design] was so knowledgeable and easy to work with, and was always available to answer questions, make tweaks, walk me through front-end editing tasks...you name it. [Virgo Web Design]'s accessibility and can-do attitude made such a difference to our entire team, and I hope I always thanked [them] enough for helping me through the client-side part of the web redesign process.

    CORRIE M.

    Aptude

  • "[Virgo Web Design] did an amazing job on my non-profit's website, ghhaven.org. [They] put our site together quickly and with all of the elements we requested - plus, [they] had a lot of great recommendations for things that we hadn't even considered for the site. [They were] very helpful throughout the process of getting our site launched and I found [them] to be quick in responding to all of my questions/requests as well. [They] even helped us get our business emails set up!

    I would definitely recommend Virgo Web Design as a go-to for all of your web design/development needs. I will definitely be using [them] again in the near future!"

    FRITZIE S.

    Genesis Hopeful Haven

  • [Virgo Web Design] has developed and designed multiple websites for me over the years. [Their] team are exceptionally skilled technicians. Their communication is easy to understand, and they are very proficient - even when near-end deadlines are demanding. Hiring Jerry Virgo and his team is one of the best decisions I have made for my company.

    Michael W

    One Chicago Realty

  • I've used Yahoo sitebuilder for several years and my e-commerce website was due for an overhaul. I asked around & received several recommendations from friends & other small businesses.

    Many of the other referrals came from Web design firms & had significantly higher overheads/billing rates...We had a tight timeline & [they were] very diligent at following up to avoid production delays at time when I was extremely busy. [They] did a nice all around job improving my SEO optimization, creating a polished final product, and documenting the back end with an easy to use manual.

    After the site when live, [they] stood by & helped me troubleshoot unanticipated events & helped me create work arounds.

    Chris H.

    City Tree Delivery

  • [Virgo Web Design] knocked out a full rebuild of our site in a few weeks, guided us through things we didn't understand with ease and calm and gave great advice, training and follow up service

    Nicholle D.

    DANK Haus

Contact

  • Phone:
    (224)388-0250
  • E-Mail:
    This email address is being protected from spambots. You need JavaScript enabled to view it.

SUBSCRIBE TO OUR NEWSLETTER

© Copyright Virgo Web Design. All right reserved.

Signup for our newsletter!