close button

Contact forms: How to add one to your website

Published by

The contact form is one of the most important parts of the online presence of any business. It offers a simple and reliable way for visitors to get in contact with you, whether for support, to leave thanks, or for inquiries in general.

While contact forms can vary quite a bit depending on the business, and the specificty required, the most commonly used contact form fields include:

  • Name
  • Subject
  • Email
  • Phone Number
  • Message

The simplest setup is that when a user fills the fields and hits submit, an email containing the data entered in the form is immediately sent to the site owner.

Contact form

So, how can you add a contact form to your website? There are a number of ways, with varying difficulties and trade-offs.

1. Add contact form manually

Technical difficulty: hardest

In this approach, you will need to add the HTML code for the form to a page on your website, and also provide a script that will take the submitted form, collect the values entered, and send them off in an email to you.

The good news: there are plenty of ready made solutions that will work more or less out of the box.

e.g.

Drawbacks:

  • You’ll need to be able to either edit an existing page on your website, or create a new page to hold the form. If you create a new page, you’ll have to create links from existing pages on your website to the new page
  • You need to know what server technology your website uses, to know which out-of-the-box contact form solutions are compatible with your server setup, PHP, and Perl are popular choices for this kind of task.
  • Visually the form might not match your site’s colors and styles. Sometimes, however, there is a configuration step which will allow you to change the style to match your site before you download the code. Also, it would be a relatively easy job for a designer or developer to style this form to match your website.
  • Your server must be capable of sending emails. Most of the time this will be working for you, but if it is not it can be tricky to set up without technical assistance.

Pros:

  • Ultimately, you have full control of the process, where and how the form goes on your site, and the email process that sends the form data to you
  • With technical assistance, you could
    • precisely control how the form looks
    • control the sending of the email
    • perform any custom validation or processing on the data submitted

2. Use a third-party contact form service

Technical difficulty: medium

There are plenty of third-party contact form providers that, as in the previous approach, allow you to configure and download a code snippet that will create a form on your website. So, what’s the difference between this and the last approach?

This approach removes some of the difficulty of the previous approach. The code snippet will be much smaller in this approach, and easier to add to your website. You don’t need to worry about your server type because you are using a third-party solution to handle the form submission and send you the email. And, because the service sends the email with the form submission, then you also don’t need to worry if your server can send emails, or how to set that up.

So, what’s the catch? This ease of use comes at a price. Since you are using a third-party service, you are ceding all the control away to the third party. The process works like this:

Some common services are:

The general process is like this:

  1. You copy the code snippet in to your website
  2. The snippet generates a form on your website
  3. When a visitor submits the form, the values he or she entered get sent to the third-party service, on a different webserver than yours, somewhere else on the web
  4. The thirdparty service then takes the data, and sends an email to you, containing the values.
  5. Some services may let you view submissions on their website

The drawbacks with this approach are:

  • You can only change the form in ways that the service allows you. If you can manage to style the form to match your site with the third-party tools, then you’re stuck
  • Your data is sent via a third-party
  • You should read the fine-print: the data could be used for marketing or other purposes
  • If privacy is important to you, then this approach is not good
  • Because you are using a third party service, you must trust its code: it it gets hacked, then your site is also potentially open to malicious code
  • There is often a cost associated with the form, based on level of service

3. Install a contact form plugin for WordPress or Drupal

Technical difficulty: easy

This approach is by far the simplest. However it is only applicable if your site is built using a content management sytem (CMS) such as WordPress, Drupal, Joomla, Typo3, or something else.

Although the list of plugins or modules will be different for each of the CMSes mentioned, the general approach will similar:

  1. Enable module or plugin
  2. Navigate to module’s admin page
  3. Configure the fields you want to use
  4. Configure email to send submissions to

Some popular plugins for WordPress are:

Some common Drupal module contact forms include:

Benefits of this approach:

  • It’s simple!
  • The form should be automatically styled to match your website

Drawbacks:

  • Your site must be built using a CMS
  • You are limited to the functionality provided by the module—if there is some functionality you need that you can’t tweak via the module configuration, then you are out of luck (unless you have someone technical at hand who can hack the module for you).

Form CAPTCHA

Whichever approach you choose, you should check that it supports CAPTCHA. CAPTCHA stands for Completely Automated Public Turing test to tell Computers and Humans Apart and is a method to prevent spam or automated form submissions that can flood your inbox with junk, or worse feel for security holes to be exploited on your website.

contact-form-captcha

CAPTCHAs work by providing a question that is generally simple for a human to answer, but difficult for today’s automated computer program bots to answer. For instance, in the image above, most internet users will have little difficulty reading the words New Zombies. It’s a lot more difficult for a bot to figure this out. The automated spam bots cannot answer the question, so they can’t submit the form, and you get fewer spam submissions. (CAPTCHAs are something of an arms race, with spam bot’s getting smarter all the time, so the CAPTCHAs need to be constantly improving to be able to defeat the spam bots).

Most good contact forms will have an option to use a CAPTCHA.

Add your contact form today!

A contact form is a very necessary part of most websites that wish to engage with their visitors. While newer media such as Twitter and Facebook offer alternative ways for visitors to interact with you, a contact form is still vital, and expected by many people. Depending on your website setup, the approach you take to adding a form will differ, but there are ways to do it on most common website configurations.

Main image: accidentalocelot
Cotent images: Dan Coulter