ThemeLab's Blog

Stay up to date with our newest WordPress themes, WordPress plugins, WordPress tutorials, and other announcements.

How to Add a Contact Form in WordPress

Last Updated on by

How to Add a Contact Form in WordPress

Email harvesting remains a problem for anyone who publishes their email address online. Many website owners tackle spammers from collecting their email by displaying their email address to visitors using images. A more practical and user-friendly solution is to add a contact form to your website.

There are hundreds of contact form solutions available to WordPress users. Complex contact forms can be created in just a few minutes and most contact plugins have anti-spam tools too. We recommend Gravity Forms. It is packed full of features, records entries in your WordPress database and its functionality can be extended through the use of add ons. Gravity Forms is also very simple to use.

Today I will be showing you how you can configure Gravity Forms and add a contact form to your website.

Please note that Gravity Forms can be used to create large forms with dozens of fields and complex conditional statements (i.e. if field A is completed, display fields X, Y and Z). This tutorial will walk you through how you configure a basic form. For information on how to create an advanced form, please refer to the Gravity Forms support forums or refer to their helpful documentation.

Setting Up Gravity Forms

After installing Gravity forms and activating it, you will see a message suggesting you to register your copy of Gravity Forms. Clicking on the register link or on the settings link, will take you to the main settings page.

Gravity Forms Installed Plugins List

The general settings area features some advanced options for developers such as whether CSS and HTML5 is outputted. The currency form is only used in forms if you decide to accept payments using Gravity Forms.

The support license key field at the top of the settings area is not required for the plugin to work. It is worth entering so that you can automatically upgrade the plugin directly through the admin area.

General Settings

Many WordPress contact form plugins, including Gravity Forms, support reCAPTCHA. The free service will help you stop bots from submitting false email submissions to you.

reCaptcha Settings

The Gravity Forms menu can be a little daunting at first. It lists eight sections in total.

Gravity Forms

Once you become familiar with what each section is for, you soon realise that you will only use one or two sections on a regular basis. The key sections are forms, new form and entries.

  • Forms – Lists all contact forms that you have created.
  • New Form – Allows you to create a brand new form.
  • Entries – Lists submitted entries to your contact forms.
  • Settings – Lists your general and reCaptcha settings.
  • Import/Export – Allows you to export entries and import and export forms.
  • Updates – Allows you to update Gravity Forms to the latest version.
  • Add Ons – Lists all available add ons.
  • Help – A large documentation area that also links to the Gravity Forms support forums.

Note that the documents located within the help section are only accessible if you have confirmed your support license key in the general settings area.

Creating a Contact Form

Clicking on the “New Form” link will bring you to the forms page with a pop up for creating a new form. You need to add a name for your new form. A description can be added too. This is useful for your own reference and can be added above your forms when they are displayed on your website.

Create a New Form

You will then be taken to the form editor. This is the page where you can build your form.

At the top of the page you will see the name of your form and its unique identifier (your first form will have id 1, second form will have id 2 etc). The navigation bar below links to the settings area, entries and a preview link that opens a new tab in your browser with a preview of your contact form. There is a drop down at the right hand side of the navigation bar that allows you to change the form that you are editing. This is useful if you have a couple of forms and need to make changes to all of them.

In the left hand side of the page, Gravity Forms walks you through the steps required to create your first form. Four different types of fields are listed on the right hand side of the page. Standard fields includes single text fields, paragraph text fields, drop downs and checkboxes. Advanced fields includes name, address, website address, email address and file upload.

The post fields allow users to submit a post using your form. They can enter the post title, content, category, tags, images and more. Pricing fields are available to advanced users who want to use forms for purchases or purchase requests. Fields include product, quantity, shipping and total.

Form Editor

To add a field to your form, simply click on the field on the right hand side of the page. This removes the tutorial for creating your first form and replaces it with the field you added.

At the top of the field box is a preview of what will be displayed to the user. In the example below, you can see that the name field requests users to enter their first and last name. Underneath you will find the settings area for the field. The settings area is different for each type of field, however there are many common settings.

The label is the name of the field that is used in your contact form. For example, I could change the label for the name field from “Name” to “Please enter your name in this field”. A description can also be added to each field to help explain to the visitor what the field is for. Fields such as name are self-explanatory, though you will find the description box useful when you ask for other information.

At the bottom of the properties area you will see a checkbox that says “Required”. If you enable this setting, the user is not able to submit the form unless they complete the field. It is important to use this for fields such as name and email address.

Name Field

The advanced tab allows you to configure additional settings. Again, the settings available to you here are dependent on what type of field you are using. The advanced area allows you to create your own error message, style the field using CSS and pre-populate the field dynamically.

One option you may use later once you have more experience with Gravity Forms is conditional logic. This allows you to create complex forms that change according to what the user enters. For example, say you want to ask the user whether they are male or female. If they enter male, you can display one series of questions. If they enter female, you can display a different series of questions. Conditional logic is not something we will talk about in this tutorial, though it is a great feature that it is looking into more closely later.

Name Field Advanced

The beauty of Gravity Forms is that you can create any type of form you want. Many contact form plugins force you to use common fields such as name, email address and message; even if you have no need for them. Gravity Forms can be used to create simple forms with only two fields or complicated forms with thirty fields.

You do not have to worry about what order you add fields to your form as fields can be reordered at any time using drag and drop.

Drag and Drop Fields

Once you have added all the forms you want to add, make sure you click on the “Update Form” button on the right hand side of the page. Otherwise, you will lose the form you just created.

Update Form

The form settings area allows you to customise the look of your form. These settings are unique to this particular form and will not be applied to any other forms you have. There is no need for you to complete this section as Gravity Forms is configured to work perfectly out of the box. If, however, you want more control on how your forms look and function, it is worth taking a few minutes to customise your form the way you want it.

From the settings page you can move the position of the field label and description. Your form button can be replaced by an image too.

Form Settings

Gravity Forms allows you to restrict when the form is displayed. You can deactivate the form after a defined number of submissions or schedule the form to be displayed during a specific period (using day, hour and minutes). You can also stop the form from being displayed to users who are not logged in.

If you are not a fan of reCaptcha, you can enable a honeypot on your form to prevent spam. This sets a trap for bots and stops them from submitting false entries to you.

Form Restrictions and Anti-Spam Settings

Confirmations are the messages that are displayed to users after they have completed your form.

Confirmation Messages

You can choose from displaying a simple text message or redirecting the user to a specified page on your website that confirms their message has been sent. You can also redirect users to a custom URL.

Confirmations List

Notifications can be emailed to you whenever a new message is submitted through your form.

Edit Notifications

Gravity Forms allows you to customise the notification email in great detail. It allows you to change all of the email fields including sent name, sent email and subject. Form fields can be inserted into the email subject or email message too. For example, you could configure your notifications so that the sender’s name is included in the email subject. Conditional logic can also be applied so that the notification email is only sent if certain criteria is met.

Notifications List

Once you have configured your form the way you want, you should preview it. Do not be alarmed if your form is not how you would like it. You can go back to the form editor at any time and customise existing fields and add new ones.

Form Preview

Adding a Contact Form to a Post or Page

Once the Gravity Forms plugin has been activated, an “Add Form” button will be added next to your post editor. It is situated right next to the “Add Media” button.

Add Form Buttons

The form button brings up a pop-up box. Next, select your form from your form list and choose whether you want to display the form title and description.

Unfortunately, the Gravity Forms form pop-up does not seem to function correctly if you are using the WordPress visual editor. If you are using the visual editor, no forms will be shown in the drop down list. This bug has been in Gravity Forms for years and unfortunately, it still exists. Therefore, if you are having difficulty inserting your form using the “Add Form” button, go to your profile page (http://www.yourwebsite.com/wp-admin/profile.php) and disable the visual editor temporarily.

Insert a Form

Clicking on the “Insert Form” button will insert the form code into your post or page. It will look something like this:

[ gravityform id="1" name="My Contact Form" ]

If you prefer, you can insert forms directly into your content area using the code above. All you need to know is the identification number of your form.

Forms can also be inserted into templates. The most basic call is to simply list the identification number within the function call. There are, however, several boolean parameters that can be used such as title, description and whether the form is active.

<?php gravity_form(1); ?>

All you have to do now is check your page and see how your contact form looks on your live website. At this point, it is important to test the form by submitting a test message. This helps you to see if settings such as the confirmation message and admin notification email are set up correctly.

Final Form Output

All form submissions will be displayed in the entry section. Submissions can be emailed to you too, however having an archive of submissions is very useful, particularly if any of your admin notification emails accidentally get deleted or sent to your spam folder.

Entries List

Each entry displays the fields that were completed. Also displayed is the time of submission, the URL it was submitted from and the IP address of the user. The admin notification email can be resent from this page too.

Entry Example

A license for Gravity Forms retails for only $39. Considering the powerful features, ease of use, and overall awesomeness, I would say its a bargain.

I hope this article helped you add a contact form in WordPress.

If you liked this article, then join ThemeLab on Twitter and Google+ for more useful WordPress tutorials.

About

Noumaan is a professional blogger and a WordPress developer. He likes Star Trek, Quora, and Debian.