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 eight plugins have hit this milestone, and one of those plugins is built into WordPress.

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

The Contact Form 7 plugin is available from the WordPress plugin repository, so you can install it in one of two ways. The easiest method is to navigate to the Add New Plugins screen of your control panel, search for “Contact Form 7,” then install and activate the plugin using the appropriate on-screen buttons.

Alternatively, you can install Contact Form 7 the old-fashioned way. To do so, head to wordpress.org and click or tap the “Plugins” tab near the top of the homepage. From here, you’ll want to search for the plugin, expand the matching search result, then hit the plugin’s “Download” button. You’ll need to upload the ZIP file you’ve received to your WordPress admin panel before activating the plugin.

Creating and Customizing Forms

Similar contact form plugins will guide new users through a setup wizard immediately after activation. The author of Contact Form 7 has taken a different approach. CF7 doesn’t offer a wide variety of settings to toggle but it does ship with a very simple form that you can add to your website as soon as the plugin is in place.

To view the built-in form, expand the “Contact” submenu that the plugin adds to your WordPress admin menu, then hit the “Contact Forms” item. You’ll follow the same steps to browse any contact forms that you add to your website later.

Browsing Existing Forms

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

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.

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.

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 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

Now that you’ve customized the built-in form to suit your needs, you’re ready to add it to your website. If you skip this step, your visitors won’t be able to fill out – or even view – your new contact form.

Most site owners choose to display forms like yours on a dedicated contact page. If you already have a contact page, simply open it up for editing as you would any standard WordPress page. Otherwise, create a new page and supply it with an appropriate title.

Next, expand the WordPress block inserter and search for the Contact Form 7 block type. Its familiar icon makes it easy to identify.

Insert the block and position it within your page. Finally, select your new contact form from the block’s dropdown then preview your page changes.

The preview offers a perfect representation of what your visitors will see if you choose to save your page changes. If you like what you see, go ahead and publish or update the page to make your form public!

Adding CF7 Forms to Widgets

Have you built a form that you’d like to feature prominently throughout all of your site’s pages? If your WordPress theme offers any widgetized areas, you can add your form to any text widget using a shortcode.

Start by locating your form’s shortcode. Like the individual fields that are added to your form, a form’s shortcode is wrapped in square brackets. The shortcode should look something like this:

[contact-form-7 id="9" title="Contact form 1"]

The shortcode can be found beneath the title field on your form’s edit screen, so return to this screen if you’re not already there. Click or tap on the shortcode to select all of it, then copy the selection to your clipboard.

Next, navigate to the Widgets screen of your admin panel and drag an empty text widget to an available widgetized area. Paste the form shortcode into the text widget, save your changes, and you’re good to go! Your form should now be visible from any front end pages that display the widgetized area.

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.

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.

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.

In addition to element-specific tags, Contact Form 7 supports site tags. Like element tags, site tags will be replaced with actual values before a notification email is sent. For instance, the _site_title tag will be replaced with your website name, while the _site_admin_email tag will be replaced with the admin email address that was set from the General Settings screen.

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:

[_site_admin_email],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:

[_site_title] "[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

While the Mail tab’s Additional Headers field isn’t very well documented, it does support a variety of powerful email headers. For instance, you can use the field to add CC and BCC addresses to outgoing Contact Form 7 notifications.

1. Open your form for editing from the admin panel’s Contact Forms screen
2. Navigate to your contact form’s “Mail” tab
3. Find the Additional Headers field and enter Cc:mail@example.com or Bcc:mail@example.com on a new line

It is critical that you include the CC and BCC rules on two separate lines if you choose to add both rules. Likewise, the capitalization of both “Cc” and “Bcc” matters.

Make sure you replace the example addresses with your own. You can even use mail tags like [your-email] in the Additional Headers field to drop in form submission values.

The Additional Headers field will accept multiple rules, but you’ll always need to save your form after you’ve added or removed rules. This technical document from the IANA offers a long list of available message headers to those that are interested in learning more.

Composing the Outgoing Email

The largest (and perhaps the most important) field in the Mail tab is the Message body field. It is here that you’ll compose and customize the outgoing message that is sent after a contact form submission.

This field shouldn’t require any modifications as long as the built-in contact form was left unchanged. However, if you added or removed form elements using the steps outlined above, the message body will need to be updated to reflect those changes. After all, the purpose of the outgoing CF7 email is to relay all of the form values that were sent with a submission. If an element’s tag is omitted from the outgoing message, the recipient will have no way of knowing what value a visitor supplied for that field.

Without any changes, the message body will include tags for each of the four default form elements. If you removed your-subject from your form and added a phone element in its place, you’ll need to make similar changes to the message body. Under these circumstances, the message body should look something like this:

From: [your-name] <[your-email]>
Phone: [tel-123]
Message Body:
[your-message]
-- 
This e-mail was sent from a contact form on [_site_title] ([_site_url])

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.

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.

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.

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.

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.

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’).

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?

Unlike Google, Facebook enables Contact Form 7 conversion tracking with an official solution of its own. To track submission events with a Facebook Pixel, you’ll need to:

1. Search for “Official Facebook Pixel” from the Add Plugins screen of your admin panel
2. Install and activate the Official Facebook Pixel plugin for WordPress
3. Click or tap the Facebook Pixel item under your admin menu’s Settings tab
4. Type or paste your Pixel ID in the topmost field and save your changes

You’ll notice that the Facebook Pixel Settings screen doesn’t offer any Contact Form 7 toggles. Instead, the plugin will automatically log a Pixel event after a form submission as long as you have a Pixel ID in place.

It is imperative that you track Contact Form 7 conversions if you’re sending paid traffic to your website with Facebook Ads. By doing so, you’re enabling Facebook to assign conversion costs to your ads. You can use these figures to determine which of your ads are delivering the greatest return on investment. Likewise, you can use the data to eliminate under-performing ads entirely.

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.

CAPTCHAs have developed a bad rap over the years, and for good reason. Early iterations were both difficult to solve and ineffective against spam. It really was a worst-of-both-worlds type of situation. A good CAPTCHA is supposed to block spam and encourage legitimate form submissions, yet the solutions of old did neither.

Fortunately, CAPTCHAs have improved dramatically since the early 2000s. In most cases, a modern CAPTCHA rejects spammy form submissions while remaining almost invisible to human visitors. When a CAPTCHA does present itself to a human visitor, it is easily solved more often than not.

Google’s reCAPTCHA is among the web’s most popular spam-fighting tools. And as luck would have it, Contact Form 7 offers built-in support for Google’s solution, so defending your forms with reCAPTCHA 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.

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.

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.

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.

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, outgoing Contact Form 7 messages are highly customizable. Even better, all of the changes you would ever need to make to an outgoing notification email can be applied from a single plugin screen.

Even with limitless message customization options, many WordPress power users prefer to review Contact Form 7 submissions from inside the admin panel. CF7 doesn’t support this feature by default, but you can quickly add a Contact Form 7 database to the WordPress control panel with a lightweight plugin.

Flamingo captures all of your form submissions and adds them to a separate admin panel screen. The plugin was developed by the same guy who built Contact Form 7 and is available for free from the WordPress 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.

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.

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.