contact-form-7-large

How to use Contact Form 7

Morgan Smith's Layout avatar

On just about any site you build, you’ll want to include contact information so that users can get ahold of you (or your clients!) Sometimes, an email address is all you need. But if you’d like to automate the process on your site, a contact form can help ensure that you’re always getting the information you need from the people trying to reach you. You could build your own form plugin if you really want to, but if you’d rather just install one, Contact Form 7 is a fantastic option.

Contact Form 7 is easily the most popular form plugin in the WordPress plugin directory. With over one million active installs, it’s safe to say that Contact Form 7 will be a great solution for many of your form needs. It includes lots of customizable options, support for multiple forms, and great support in general (it was last updated a week ago).

Convinced? Let’s get your form set up!

Install it.

To install Contact Form 7, just head to Plugins Add New. Search for “Contact Form 7” and click Install Now.

contact-form-7-install

Build the actual form.

Once you have it installed, head over to the new Contact tab and select Add New.

contact-form-7-add-new

Select the language you want, and again, hit the Add New button. Now we’ll build the actual form. As a default, you’ll see a form that asks for “Your Name (required),” “Your Email (required),” “Subject,” “Your Message,” and a Send button.

contact-form-7-form

From here you can add, remove, or simply edit any of these fields to meet the needs of your site. To add a new tag to the form, just click the relevant button (text, email, URL, etc.). A new window will open with further options, such as if the tag is required or if you’d like placeholder text until the user fills enters their own.

contact-form-7-options

Once you hit Insert Tag, you’ll see a new line added to your form that looks something like this:

[url* url-300 placeholder "www.website.com"]

That’s great, but you’ll want to add text above that tag so users know what you’re looking for. Start a new paragraph, enter your text, add a break before the tag, and then close it with a paragraph. That looks like this:

<p>Website URL <br />
[url* url-300 placeholder "www.website.com"] </p>

Once you’re done setting up your form, hit Save. Don’t worry, you can always make changes to it later.

Set your email preferences.

When someone submits your form, you’ll get an email in your inbox with everything they filled out. In the Mail tab, you can arrange the information in that email using the same tags from your form. At the top of the page, it’ll tell you what tags you can use.

contact-form-7-tags

In the Message Body section, you can use those tabs to arrange how the email you’ll receive will look. This makes it super easy to see everything your clients submit.

Again, once you’re done, hit Save.

Want to try a contact form with Jetpack? Follow this tutorial.

Edit the automated messages.

The Messages tab allows you to control messages that will appear to the user when they submit the form. This includes anything from error messages to notifying the user that their form was successfully submitted. There are default messages for every use case by default, so if you’re not too concerned about the voice, you can probably just ignore this tab. But if you’d like to add a little personality to your form, these messages are a great way to do so.

contact-form-7-messages

Once you’ve made any changes, go ahead and Save.

Add any additional settings.

The last tab, Additional Settings, allows you to add some specific code snippets to your form. You can view these functions here.

Once you’re finished with any additional settings, hit Save, and then copy the shortcode from the top of the page.

contact-form-7-shortcode

Just paste that shortcode onto the post or page you want the form on, and voila! You’ve got a contact form on your site.

Comments ( 0 )

Join the discussion