Using the Contact Form 7 WordPress Plugin

Adding a contact form to your site is a great way to request information from your website users. In WordPress the process of adding a contact form is quite easy through the use of a plugin. In this walk through, we'll be setting up the popular Contact Form 7 plugin to create a contact form on our site.

Begin by searching for and installing the Contact Form 7 plugin.

Contact Form 7 comes with one form already created. We can choose to modify that form or even create a new one. For now, let's display that default form in a page so that we can see what it looks like on our site.

Once you have installed and activated Contact Form 7, click on "Contact" in your WordPress dashboard menu. This will open up the Contact Form 7 settings where you’ll see a default form named “Contact form 1?, and a shortcode. This shortcode is used to display your contact form in a Page (or even a Post). Copy this short code so we can paste it into our new Contact page which we'll create next.

Create a new page to insert your form into. We're naming ours Contact but you can name it anything you like (e.g. Contact, Contact Us, etc.). Paste the form shortcode into your new page and publish your new page.

Next we can view our new Contact page on our site. Note, form submissions will be emailed to the WordPress administrator email address.

Customizing Your Contact Form

While the default form is great for a basic feedback form, you may want to either remove or add fields to customize the form to suite your needs. You can do this by creating "tags" in Contact Form 7. The easiest way to do this is to use the built in "Generate Tag" tool.

In this example, we'll add a new field to our form ad an example, a drop down menu for users to choose from. This is just an example of one of the available fields in Contact Form 7. If you would like to learn more about the different fields available, please see the Contact Form 7 Documentation.

Begin by clicking on the "Generate Tag" button and selecting "Drop-down menu"

First decide if you want this to be a field that users are required to complete. Next you can change the name to something more descriptive if you like. When naming your fields, keep in mind that WordPress does reserve some names for parameters. The best way to avoid unavailable names is by adding a prefix or suffix to your field name. For example instead of name, use user-name or your-name for field names.

While the id and class are option, if you would like to easily style these elements later in your style sheet, you can assign an id and/or a class.

In the choices box, put each selection for your drop down menu on a separate line. If you want to allow users to choose multiple selections in the drop down menu or if you would like to have a blank line as the first option in the menu, you can one or both options.

When you have completed the options for your drop down menu, copy the short code and paste it into your form on the left side of the page. The order of the fields is the order they will be on the page. You'll also want to surround the code with opening and closing paragraph tags (<p> and </p>) if you would like it to be on a new line in the form.

Next we will need to add code to the Mail template.  This is will send the input from our new field in the emails we receive when people fill out our form. Copy the mail code as shown below:

Then paste it into the mail template wherever you would like it to appear in the email you receive:

This is just the basics for setting up the Contact Form 7 plugin. To really familiarize yourself with the many options available, check out the Contact Form 7 website here: http://contactform7.com/docs/