Ultimate Contact Form 7 Tutorial: From Beginner to Pro

When we outlined our four essential pages for every new WordPress website, we stressed the importance of a contact form but never really explained how to create one. Today, we plan to fix that with our in-depth Contact Form 7 tutorial.

WordPress offers many contact form plugins, but Contact Form 7 is the most popular, and not by just a little. At the time of writing, the plugin boasts more than five million active installs. Only six plugins have hit this milestone, and one of those plugins is built into WordPress.

Popular WordPress Plugins Tab

Alternatives like Gravity Forms offer intuitive drag-and-drop form builders, but features like these come at a cost. A Gravity Forms license will set you back roughly $60. Contact Form 7, on the other hand, is completely free.

If what you need from your form is a simple way to accept messages of any kind without exposing your email address, CF7 is the way to go. You can build forms of any size with it, and the plugin supports elements like plain text fields, dropdowns, uploads, and many more.

Installing and Activating the Plugin

Contact Form 7 is available in the WordPress plugin repository, so you’ll install it the same way you’d install any standard plugin. Search for it from the Add New Plugins screen of your admin panel, then hit the blue “Install” button when you’ve found it. Once installed, go ahead and activate it.

Contact Form 7 in the Plugin Repository

Alternatively, you can download the plugin ZIP from the repository and then upload it to your WordPress website. This approach requires an extra step or two and offers no real benefit.

Creating and Customizing Forms

Unlike bulkier form plugins, Contact Form 7 does not offer a setup wizard. Instead, it’s pretty much ready to go right out of its metaphorical box.

The plugin will create a very basic form for you as soon as you activate it. To view this form and any others that you add later, hover over the “Contact” tab that was added to your WordPress admin menu then click or tap the “Contact Forms” item.

Browsing Existing Forms

This is the Contact Forms screen. From here, you can edit, delete, or duplicate existing forms.

Contact Forms Screen

You could use the “Add New” button beside the screen’s heading to create a new form, but for now, hit the “Edit” link beneath the Contact form 1 form that the plugin created for you. You’ll need to hover over the form’s name to reveal the link if it’s not visible by default.

WordPress will direct you to the Edit Contact Form screen, which is divided into four tabs. You will add and remove elements from the default Forms tab, but the remaining tabs will be covered in later sections of this CF7 tutorial.

Removing Form Elements

You’ll notice almost immediately that elements are laid out in code. This code is actually a combination of regular HTML and WordPress shortcode markup, but fear not; you can use the buttons above the large text editor to generate form element code automatically.

Form Tab Editor

If you review the form’s code, you might be able to spot four fields and a submit button. These include two text fields for name and message subject, an email field, and a textarea field for the body of a message.

To remove any of these fields, simply delete the field’s opening and closing label tags as well as everything in between them. Say, for instance, that you’d like to remove the subject field from the form. You would just need to remove this snippet from the text editor:

<label> Subject
    [text your-subject] </label>

Adding New Form Elements

Adding fields is even easier. This form includes an email field by default, but if you’re collecting leads for your business, it would be nice to have the visitor’s phone number as well.

To add a field, start by clicking or tapping one of the form element buttons above the editor. In this case, you’ll want to use the “tel” button to create a telephone number input field.

The popup you’ve revealed will ask you to define a few form element properties. Available properties usually include a type (required or not required), a name, default value, ID, and a class.

Telephone Number Element Popup

Most of these properties are optional and more technical in nature, but every element will need a name. Contact Form 7 will provide a placeholder name for your element, and in most cases, it’s fine to leave it unchanged.

Click or tap the “Insert Tag” button at the bottom of the element popup to add your new field to the form. The shortcode will be added to your form automatically. This short snippet will render your form element but will not label it. You’ll do that with another quick addition to the editor.

Labeling Form Elements

Complete Contact Form 7 elements usually follow a common format. They begin with an opening label tag followed by some descriptive text and the element shortcode contained in brackets. The element is then wrapped up with a closing label tag. The subject field you might have removed earlier follows that format.

<label> Subject
    [text your-subject] </label>

Neither the opening and closing label tags nor the descriptive text is required, but you should consider adding them to all of your form elements. Both can improve the accessibility of your forms, especially to those using assistive technologies to browse the web.

To label your new field, locate the its shortcode in the edit area. It should begin and end with opening and closing square brackets.

[tel* tel-123]

Next, place a <label> tag before the opening square bracket and a closing </label> tag after the closing bracket. And finally, place some descriptive text after the opening <label> tag.

<label> Your Phone Number
    [tel* tel-123] </label>

If your telephone number field is required, you should mention this in the descriptive text. The completed field will look something like this:

<label> Your Phone Number (required)
    [tel* tel-123] </label>

Note the asterisk after the tel field definition. This denotes a required field, and CF7’s tag generator popup will add it for you if you check the “Required field” box.

If you’ve been following along, you’ve now removed the subject field and have added a phone field in its place. This is what the code in your form’s edit area should look like:

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Your Phone Number (required)
    [tel* tel-123] </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

The name of your phone field (tel-123 in this case) will likely vary from this example. That’s totally fine. You’re free to rearrange the fields too.

Web browsers will ignore spacing outside of opening and closing square and angle brackets. This example includes extra space in the phone element’s label tag simply because the code better matches that of existing elements. However, an element that follows this alternative format would look the exact same to your website’s visitors:

<label>Your Phone Number (required) [tel* tel-123]</label>

Notice the lack of a line break and extra spaces in the element. Again, the end result will be the same.

Saving Your Form Changes

After applying form changes, just click or tap the blue “Save” button near the upper right corner of the Edit Contact Form screen. WordPress does not store form revisions as it does with pages and posts, so make sure you’re content with your updates before you save.

Your forms will not be visible until you’ve added them to a published page or post. The plugin won’t do this for you, but what kind of Contact Form 7 tutorial would this be if it didn’t guide you through that process as well?

Adding CF7 Forms to Pages and Posts

If you were able to add and remove fields from your contact form, presenting the updated form to your visitors will be a piece of cake! You’ll use another shortcode to accomplish this. And while the shortcode looks a lot like those you’ve used to add individual elements to your form, it serves a very different purpose.

Start by locating your form’s shortcode. It’s beneath the title field on your form’s edit screen, so return to this screen if you’re not there already.

CF7 Shortcode for Pages and Posts

Click or tap on the shortcode to select all of it. With the shortcode selected, copy it to your clipboard.

Next, start the normal edit process for the page or post that will display your new form. If you’ve not already created a contact page for your site, now would be a great time to do so.

And finally, paste the shortcode where you’d like to display it. If you’re using the block editor, the block type you choose to paste into won’t actually matter. The newer editor offers a shortcode block, but shortcodes will render in standard paragraph blocks just fine.

Form Shortcode in Block Editor

Go ahead and hit the “Preview” button to view changes to your page or post. If all goes according to plan, your form should be visible from your website’s front end.

Form From WordPress Front End

Don’t forget to update your page or post to make the addition public! Or, if you’d prefer to display your form in a sidebar or in your website’s footer, just paste its shortcode into one of your theme’s widgets instead.

Personalizing the Outgoing Email

At this point, you have a fully operational contact form. You could walk away from your website and expect to receive an email whenever someone fills out your form. That being said, if you’ve added or removed fields from your contact form, the email you will receive after a successful submission will need to reflect that.

Here’s why. Any contact form built with CF7 is made up of two key parts: the form itself and the template for its outgoing email notification. You’ve already customized the form, but after form changes, you need to update the email template too.

The separation of these two parts scares many users away from Contact Form 7. Plugins like Gravity Forms will update your email template automatically, but again, you pay a premium for features like that, and updating a CF7 email template yourself is really easy.

Edit Screen Mail Tab

Return to the edit screen for your contact form. Just click or tap the “Contact Forms” item under the Contact admin menu tab then hit the “Edit” link beneath your form.

From here, click or tap the “Mail” tab beneath your form’s shortcode. It’s the second of four tabs and it follows the Form tab that you’ve already familiarized yourself with.

It is here that you’ll define all of the rules for your form’s outgoing emails. These rules dictate who receives email notification of a submission, what that email will look like, and more.

Browsing Contact Form 7 Form Tags

Many of the fields in this tab are self-explanatory. Before you review them, you should have a look at the list of tags above them. If you’ve not modified the built-in contact form, those tags might look like this:

[your-name] [your-email] [your-subject] [your-message]

You’ll find one tag for each of the elements you’ve added to your form. If you removed the built-in form’s subject field and replaced it with a telephone number field as outlined above, you might see something like this instead:

[your-name] [your-email] [tel-123] [your-message]

Tags that are bold have not been used in any field of your email template. Until you include those, you will not have a record of the value your visitor supplied for the corresponding form element.

Unused Contact Form 7 Tag in Bold

Either way, you should reference these fields as you personalize your outgoing email template. When a visitor submits your form and CF7 sends you a notification, the plugin will replace any of the tags you’ve used with the values provided by the visitor. You’ll find real-world examples of this below.

Defining Recipients and a Sender

Shift your focus to the fields beneath your form’s tags and you’ll see the To field in the top spot. The email address you supply here will receive notification of all new form submissions, and that message will be laid out according to the text and tags you’ve supplied in the Message Body field. More on that field later.

To define multiple recipients for your Contact Form 7 emails, just add multiple addresses to the To field and separate them with commas, like so:

john@example.com,jane@example.com

The From field that follows is the name and address that the emails will appear to come from. This does not need to use a real address, so feel free to leave the default value in place. It’s usually something along the lines of wordpress@example.com.

Crafting a Subject Line

The Subject field is next, and if you’ve removed the subject element from your form, you’ll want to update the field’s value. This is the value that CF7 supplies by default:

Your Website Name "[your-subject]"

See that subject tag in between the quotes? If your form does not include the subject element, you’ll want to replace that with something else. Otherwise, the quotes in the subject lines of your outgoing emails will always be empty. That’s because Contact Form 7 won’t have a your-subject form element to pull a value from.

You can set your message’s subject to almost anything. That being said, you might want to include an available tag so that subject lines are unique to each form submission. That way, you won’t need to worry about your mail client grouping messages with identical subject lines into a single thread. Consider a subject line like this if your form still includes the name field:

Form Submission from [your-name]

Changing the Reply-to Address

The Additional Headers field follows the Subject field and usually includes a reply-to address by default. Remember how your form’s sender address was set to an email at your website domain? This improves the deliverability of your form’s outgoing emails, but it also means that a reply to that email would be sent to the fake address instead of the address that your visitor supplied.

The reply-to address fixes this. With a reply-to header assigned to your notification emails, message replies will be sent to that address instead. So, when the Additional Headers field reads:

Reply-To: [your-email]

Replies to CF7 emails will be sent to the address that the visitor provided. That’s assuming that your form still includes the email field and that you did not change its default name. If you did, you’ll want to replace your-email with the name you assigned to your email form element.

Adding Contact Form 7 BCC and CC Addresses

The Additional Headers field in your CF7 form’s Mail tab supports a variety of headers. For example, if you wanted to add CC and BCC addresses for form submission notifications, you would:

  1. Edit your Contact Form 7 form and navigate to the “Mail” tab
  2. Locate the Additional Headers field
  3. Enter Cc:mail@example.com or Bcc:mail@example.com on a new line

The Additional Headers field can contain many valid mail header rules. Just be sure to separate rules with line breaks.

Contact Form 7 BCC and CC Addresses

Pay close attention to the format and capitalization of your mail headers. Ignoring the accepted standard for any given header may result in an undeliverable email. This technical list from the IANA offers guidelines for supported headers.

Composing the Outgoing Email

With a sender, recipient, and a subject line defined, you’re ready to compose your CF7 email notification. As with all other fields in the Mail tab, you can use tags to include values supplied by your visitor. In fact, it might not be a bad idea to include all of your form’s tags in this particular field.

By default, the message body includes tags for the four form elements that made up the built-in CF7 form prior to any changes. Be sure to remove any tags that you removed from your form and to include those that you added. The message body for a form with a phone number element and without a subject element might look like this:

From: [your-name] <[your-email]>
Phone: [tel-123]

Message Body:
[your-message]

-- 
This e-mail was sent from a contact form on Example Site (https://www.example.com)

Remember to reference the tags listed above the Mail tab’s fields as you save changes to your outgoing email template. As mentioned earlier, if a tag is bold, it’s probably not been added to your mail template.

Consider sending a test submission from your form after updating the message body and saving your changes. Review the notification email and make sure it includes all of the information you entered.

Sending a Confirmation Message to the User

Your new contact form is now accepting submissions and sending detailed notification emails your way. Those emails will include all of the text and tags you’ve added to the form’s email template. That’s about all you’d need from a form in most cases, but what if you want to send the visitor an email confirmation as well?

Contact Form 7 supports this feature. Say, for instance, that you’ve created a form that invites visitors to register for an event. Of course, you would need a copy of the registration request, but the visitor would probably appreciate a copy as well. To create this copy, check the “Use Mail (2)” box beneath the first set of CF7 Mail tab fields.

Mail Two Confirmation Checkbox

Checking the box will reveal a set of fields that are identical to those above the box. You can use all of the same tags in these fields, and the values you supply will be used to craft and send a second unique confirmation email.

CF7 will add the visitor’s email tag to the Mail (2) To field, which is perfect for a confirmation email. However, you’re free to edit all of these fields as needed.

Contact Form 7 Mail Two Guide

Mail (2) is completely optional and will have no effect on the first outgoing email you laid out above it. Feel free to uncheck the “Mail (2)” box and save at any time to disable the confirmation email for future CF7 submissions.

Changing Confirmation and Error Messages

Contact Form 7 will display error and success messages beneath forms as your visitors attempt to submit them. The plugin’s developer has made it easy for site owners to personalize these messages based on their needs.

Edit Screen Messages Tab

Contact Form 7 will show a different error or success message depending on the status of the submission or the problem encountered. To change these CF7 messages:

  1. Navigate to the Messages tab of any Contact Form 7 edit screen
  2. Replace the default text for any or all submission situations
  3. Click the blue “Save” button near the top of the screen when finished

Personalizing error and confirmation messages based on your form’s purpose will lead to a better user experience. If you’re using your form to accept requests for job estimates, consider letting the customer know when he can expect to receive his quote in the confirmation message.

Custom Submission Success Message

Together, custom CF7 confirmation emails and messages can be great time savers for small business owners and employees. Automated responses like these can lead to fewer followup calls and emails from confused customers.

Setting Up Contact Form 7 Conversion Tracking

Because of CF7’s popularity, developers everywhere have created integrations for many of the web’s most popular services. If you’re with a small business that’s on top of its numbers, you’ll appreciate the many Contact Form 7 conversion tracking tools available in the plugin repository.

Contact Form 7 Conversion Tracking Example

Conversions are simply actions that you want your website’s visitors to perform. Common conversions include ecommerce purchases, account registrations, and, in this case, contact form submissions.

Form submissions serve as leads to many businesses. When you’re tracking them properly, you can tune your website for increased conversions, and, in return, increased earnings.

These Contact Form 7 tutorial steps were organized for those who want to track events using Google Analytics or the Facebook Pixel. Feel free to skip ahead if you’re not using either tool.

How can I log CF7 events to Google Analytics?

Google provides one of the most popular and most powerful traffic analysis platforms around. To track Contact Form 7 events with Google Analytics, grab your tracking ID and do the following:

  1. Install and activate the GA Google Analytics WordPress plugin by Jeff Starr
  2. Navigate to Settings > Google Analytics from your WordPress admin area then expand the Plugin Settings panel
  3. Paste your Google Analytics tracking ID into the topmost field
  4. Select Global Site Tag as your tracking method
  5. Locate the panel’s Custom Code field, paste the following code snippet, and save your changes
<script>
  document.addEventListener('wpcf7mailsent', function(event){
    gtag('event', 'generate_lead', { 'event_label' : 'Contact Form' });
  }, false);
</script>

With the GA Google Analytics plugin and the Contact Form 7 event tracking snippet in place, Google Analytics will record a lead event after every successful form submission. Feel free to adjust the event label to something more specific (like ‘Registration Form’ or ‘Quote Request Form’).

GA Google Analytics WordPress Plugin Settings

Note that this approach assumes that you do not have Google Analytics tracking code in place already. If you do, consider a plugin like Header and Footer Scripts instead. Plugins like these will allow you to add the required CF7 code snippet to the head of your pages without introducing a redundant Google Analytics snippet.

How can I track CF7 submissions with my Facebook Pixel?

You’ve got to hand it to the developers at Facebook. They’ve created an official Pixel plugin for WordPress, and Contact Form 7 conversion tracking is built right in. Tracking submission events with your Facebook Pixel is as easy as:

  1. Install and activate the Official Facebook Pixel plugin
  2. Ensure that the Contact Form 7 plugin is active
  3. Navigate to Settings > Facebook Pixel from your WordPress control panel
  4. Paste your unique Pixel ID into the topmost field and save your changes

That’s it! Moving forward, Facebook will log a pixel event when a visitor submits any of your contact forms.

Official Facebook Pixel WordPress Plugin Settings

Tracking Contact Form 7 Facebook Pixel events is especially useful if you’re sending paid traffic to your website with Facebook Ads. As long as you’re tracking this data, Facebook can assign conversion costs to your ads. Use this information to determine which of your ads are delivering the greatest return on investment.

Fighting Contact Form 7 Spam

If there’s one certainty on the web, it’s this: bots will use any means necessary to attempt to deliver spam. Any form without a line of defense is a sitting duck, and a CAPTCHA is one such form of defense.

You’d be forgiven for cringing at the mere mention of a CAPTCHA. After all, who hasn’t left a form unsent or an account unregistered after failing one for the 100th time?

Early CAPTCHAs were just plain bad, but that’s no longer the case. Instead of the impossible reading or listening tests of old, modern CAPTCHAs work behind the scenes. There are no boxes to check, no blurry images to identify, and definitely no unrecognizable characters to decipher. Today’s CAPTCHAs will decide whether a website visitor is human or bot without any intervention on the visitor’s part.

As a webmaster, you can protect your forms against spam without actively discouraging real submissions. And since Contact Form 7 offers built-in support for Google reCAPTCHA, defending your forms takes no time at all.

How do I get keys for Contact Form 7 reCAPTCHA?

In order to take advantage of the plugin’s CAPTCHA support, you’ll first need to generate two keys. You’ll need an active Google account to obtain these.

After signing in to your Google account, head to the Google reCAPTCHA website and hit the “Admin Console” button in the upper right corner of your screen. You’ll be asked to register your site if you’ve never used the service before.

You will need to label your website, supply a domain name, and to choose a reCAPTCHA type. Select the “reCAPTCHA v3” type before reviewing the tool’s Terms of Service and proceeding.

Site Secret Keys for Contact Form 7

Google reCAPTCHA will generate two keys for Contact Form 7 and will display them onscreen. Keep the reCAPTCHA browser tab open so that you can reference both keys later.

How do I activate reCAPTCHA integration?

With your Google reCAPTCHA site key and secret key on hand, return to your WordPress control panel. Navigate to the Contact Form 7 Integration screen using the link beneath the plugin’s admin menu tab. From here, click or tap the “Setup Integration” button in the reCAPTCHA box.

Return to the reCAPTCHA browser tab to copy your site key then return to your WordPress control panel to paste it into the corresponding integration field. Do the same for your Contact Form 7 secret key and save your changes.

CF7 reCAPTCHA Integration Screen

Google’s reCAPTCHA service is now protecting your new form from bot spam and similar junk submissions. You can return to the reCAPTCHA website at any time to review spam statistics as they relate to your website, including the number of rejected submissions and legitimate submission counts.

What should I do if Contact Form 7 is not sending email?

Too many Contact Form 7 tutorials walk readers through the process of creating forms without addressing possible pitfalls. For example, it’s not uncommon for Contact Form 7 emails to go missing entirely.

To be clear, this issue is not unique to the CF7 plugin. Most form plugins for WordPress rely on a site owner’s hosting account when it comes time to deliver important emails. Unfortunately, not all hosting providers are up to the task.

If you find that Contact Form 7 is not sending emails when your visitors submit forms, you’ll probably need to turn to a third party for email delivery. Companies like SendGrid and Mandrill were built for the task. To get started:

  1. Visit sendgrid.com and sign in or create a free account
  2. Navigate to the Settings > API Keys area of your SendGrid account
  3. Create a new API key with full access and copy the key to your clipboard
  4. Return to your WordPress control panel then install and activate the SendGrid plugin
  5. Navigate to Settings > SendGrid and paste your SendGrid API key into the topmost field
  6. Supply a name and sending address then save your changes

Configuring the SendGrid plugin correctly should eliminate all of your Contact Form 7 email issues. And while SendGrid is a premium service, the free trial will not expire and will allow you to send up to 100 emails from your website per day.

SendGrid in the Plugin Repository

If, after activating SendGrid, your Contact Form 7 emails are missing line breaks, head to the “Mail” tab of your form’s edit screen. From here, check the “Use HTML content type” box beneath the Message Body field. Save your changes then test your form when you’re finished.

CF7 Use HTML Content Type

Speaking of testing, you really should test your form after any changes. If your form is responsible for delivering leads, the small time investment is well worth it.

How can I save Contact Form 7 submissions to a database?

As you can see, Contact Form 7 offers a lot of control over the emails it sends to site owners and visitors. That being said, some WordPress users spend just as much time in the platform’s admin panel as they do in their email inbox. Why not save and organize your Contact Form 7 entries in a database that’s accessible from that very same control panel?

The developer of Contact Form 7 created another plugin that fills this very need. It’s called Flamingo and it’s available for free in the plugin repository.

Flamingo in the Plugin Repository

Flamingo allows you to do some really cool things with your Contact Form 7 entries. For starters, when CF7 emails a form submission your way, Flamingo will save the details of that same entry to a database. After installing and activating the plugin, hover over the “Flamingo” admin menu tab then click or tap the “Inbound Messages” item beneath it to view stored entries.

CF7 Form Database Entries

From here, you can check one or more entry checkboxes then click or tap the “Export” button to generate a CSV of your entries. You can import the CSV file into your CRM, use it to build custom audiences with Facebook Ads, and much more. Just make sure that you’re complying with local privacy laws when handling the data.

Clicking or tapping a single entry will reveal all of the information that the visitor supplied when she filled out your form. This useful readout includes your field names followed by the values provided by the visitor.

Flamingo Database Entry

Additionally, Flamingo will collect and display technical information regarding the entry. These items include the visitor’s IP address, web browser, the date and time of the entry, and much more.

Why choose Contact Form 7 (tutorial conclusion)?

Sure, there are plenty of Contact Form 7 alternatives out there. As mentioned earlier, Gravity Forms is a great choice. It offers a drag-and-drop form builder and a library of powerful addons. But plugins like those come at a price (and so do the optional addons).

Meanwhile, Contact Form 7 is free. It’s the way to go if you’re on a budget or if you’re not afraid of a little tinkering.

There’s a reason CF7 isn’t just one of the best form plugins for WordPress, it’s one of the most popular plugins in general. It’s powerful, it’s well-supported, and it fills a need that almost every WordPress user faces: a no-nonsense tool that creates effective contact forms.

Our blog posts and email updates contain occasional affiliate links to third-party products and services. This means that we stand to earn a commission on any sales delivered with the links, but we do not recommend products or services that we don't use and love.