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.

wp-cf7-search


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.

wp-cf7-settings

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.

wp-cf7-page


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

wp-cf7-contact-page

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"

wp-cf7-add-dropdown-field

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.

wp-cf7-dropdown-field-code

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:

wp-cf7-mail-code

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

wp-cf7-dropdown-add-to-mail


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/

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve our Help Center:
Email Address
Optional, but our team may contact you for more information.
Did you find this article helpful?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

News / Announcements

Update to SSL Certificates - Certificate Warnings
1969-12-31 11:00 am EST
Hits: 624
What is the Heartbleed bug?
1969-12-31 11:00 am EST
Hits: 233

Related Questions

Here are a few questions related to this article that our customers have asked:
Would you like to ask a question about this page? If so, click the button below!

Help Center Search

Current Customers

Email: support@WebHostingHub.com Ticket: Submit a Support Ticket
Call: 877-595-4HUB (4482)
757-416-6627 (Intl.)
Chat: Click To Chat Now

Ask the Community

Get help with your questions from our community of like-minded hosting users and Web Hosting Hub Staff.

Not a Customer?

Get web hosting from a company that is here to help.