VIG Digital
EN expand_more
Tiếng Việt English check
arrow_back All articles
WORDPRESS October 16, 2023 · 5 min read

Contact Form 7 Advanced Guide: A Professional Setup

Contact Form 7 (CF7) is the most popular form plugin for WordPress. It is free and easy to use, so almost every WordPress site relies on CF7 to collect enquiries from visitors, forward them to the admin and send automatic replies.

To get the most out of it and run it professionally, though, there are several important steps to take.

1. Install Contact Form 7

CF7 is a free plugin in the WordPress plugin directory. Go to Plugins -> Add New and search for “Contact Form 7”. Once it is installed, click Activate to start using it. If a Contact item now appears in your Dashboard menu, the installation worked.

2. Create and use a form

Add a new form

Go to Dashboard -> Contact -> Add New.

How CF7 fields are structured

A sample form includes:

  • Label: the field’s label, describing what the field is for
  • text, email, textarea: field types for short text, email addresses and longer paragraphs
  • The * mark: the field is required
  • your-name, your-email: the field IDs. Each must be unique so the data maps correctly
  • placeholder: sample text shown inside the field
  • submit: the button that sends the form

3. Set up SMTP

To send email from your website, you need to use the SMTP protocol. The steps are:

  1. Create an app password for your Gmail account (or another email account)
  2. Install an SMTP plugin such as WP Mail SMTP or Easy WP SMTP
  3. Fill in the required details: Mail Server, SSL/TLS, Port, Username, Password

When you are done, send a test email from the plugin to make sure SMTP is configured correctly.

4. Set up the email sent to the admin

To configure the admin email, edit your form and open the Mail tab.

Fill in:

  • To: the address that receives the email. Separate multiple addresses with commas (”,”)
  • From: the sending address. Use the same address as in your SMTP settings so the email is not flagged as phishing
  • Subject: the email subject
  • Additional Headers: use Reply-To if you want replies to go to a different address
  • Message body: the content of the email. Use the [field_id] format so CF7 fills in each field’s value automatically

Once everything is filled in, submit the form yourself to confirm the setup works.

5. Set up an auto-reply to the person who filled in the form

Contact Form 7 lets you configure a second email, with different content, sent to a different address. It is usually used to reply to the person who submitted the form: to thank them, send them documents or arrange a follow-up.

In the Mail tab, scroll to the bottom and tick Use Mail (2). Make sure the To field is set to [your-email] so CF7 sends the email to the person who filled in the form.

You can use HTML in the message body to add links, bold or italic text.

6. Connect Contact Form 7 to Google Sheets

By default, CF7 only sends email. That is risky, because emails can land in spam or the system can fail. Sending submissions to Google Sheets is a simple but effective way to store and manage them.

Install the plugin

Go to Plugins, search for “CF7 Google Sheets Connector” and install it.

Configure CF7 Google Sheets Connector

Go to Contact -> Google Sheets.

You need to grant the plugin access to Google Sheets. It is best to authorise it with a less important email account, then share access with your other email addresses.

Once access is granted, go back to the form you want to connect. You will see a new tab called Google Sheets.

Fill in:

  • Google Sheet Name: the name of the Google Sheet file
  • Google Sheet ID: the ID taken from the sheet’s URL
  • Google Sheet Tab Name: the name of the tab
  • Google Tab ID: the ID of the tab

In the Google Sheet, enter the field IDs in the first row. Once everything is set up correctly, test the result.

7. Set up a pop-up

By default, Contact Form 7 shows a small message below the form, which can be hard to notice. We recommend using a pop-up to show the message to visitors instead.

The simplest way is the plugin Popups — Submission Messages For Contact Form 7.

8. Set up event tracking for GA4

Event tracking sends an event to Google Analytics 4 so you can measure how well your form performs. This is the most complex step and requires experience with Google Tag Manager and Google Analytics.

Before you start, GTM must already be installed and connected to GA4.

Create the submission tag

When a form is submitted successfully, CF7 fires the wpcf7mailsent event. You need to capture this event in GTM via the Data Layer before sending it on to GA4.

Tag Type: Custom HTML

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 window.dataLayer.push({
 "event" : "cf7submission",
 "formId" : event.detail.contactFormId,
 "response" : event.detail.inputs
 })
});
</script>

Trigger: All Pages

Trigger cf7submission when the email is sent successfully

Create a new trigger with the type Custom Event. Set the event name to cf7submission, the event pushed by the Data Layer code above.

Send an event to Google Analytics 4

Create a new tag. Its job: whenever the cf7submission trigger fires, send an event named cf7_submission to GA4.