How to set up Contact Form 7 connect to Google Sheets

Lucid Gen’s comprehensive Contact Form 7 WordPress setup guide will help you get a contact form right away. You will be notified via email and get data from Contact Form 7 by Connecting Contact Form 7 to Google Sheets. I find this way very convenient for reusing data later. If your website is using WordPress, what are you waiting for? See how to use Contact Form 7 right below.

What is Contact Form 7?

Contact Form 7 is the most popular and completely free form builder plugin for WordPress. It will help WordPress have the ability to create a contact form and insert the form into any page you want. Contact Form 7 setup allows you to customize various fields of information and title. Contact Form 7 can send notifications when there is data to multiple emails at the same time. Because of its popularity, many other developers have added special features to it with add-on plugins.

Instructions on how to use Contact Form 7 include the following main ideas:

  1. Instructions to set up Contact Form 7 WordPress to have a satisfactory form.
  2. Configure SMTP for Contact Form 7.
  3. Connect Contact Form 7 with Google Sheets to get data from Contact Form 7.
  4. Finally, share some beautiful Contact Form 7 templates.

How to set up Contact Form 7 super standard

You access the website administration. Go to Plugins > Install New to install Contact Form 7.

Hướng dẫn set up Contact Form 7 WordPress
Instructions on how to use Contact Form 7

You go to Contact Form > Form List, and you will see a default form available. You can Create a new form or Modify this default form.

How to set up Contact Form 7 WordPress - Click Edit or Create New Form
Click Edit or Create New Form

Set up Contact Form 7 parts of content

Before I show you how to set up Contact Form 7 WordPress, I want to explain what content types mean and when it’s appropriate to use them.

The most commonly used content:

  1. Short text: is the short information box, it is the most common. Can replace the content from 2 to 5 always. Especially, it should be used instead of Phone Number to reduce the difficulty when entering phone numbers for customers. Vietnam’s number is a bit diverse, not to mention +84 and 0 too, some customers like to copy paste, so it may contain periods and spaces, the form will report an error. Let guests feel free to enter their phone numbers their way.
  2. Long text: is a box to fill in information such as a long paragraph. Suitable for contact pages, not suitable for landing pages because it takes up a lot of space on the form.
  3. Email: is the field to enter the email address. Nothing to note.
  4. Phone number: is the field to enter the phone number. But you should use Short Text instead.
  5. Date: is in date format. Suitable for appointment booking forms.
  6. List menu : is a menu that outputs a list, the customer can only choose 1 value.
  7. Checkbox option: is many options, the customer can select many values.
  8. Radio options: are multiple options, the guest can only choose 1 value.
  9. Submit: just a submit button.

Rarely used content:

  • URL: is the box to enter a website link. Suitable for website consultation form, or social network information request form.
  • Number: is a cell that only allows numbers to be entered. Suitable for form with order quantity.
  • Terms of Acceptance: next.
  • Question: next.
  • File: is a button to upload an attachment. Suitable for recruitment form.

To make it easy to understand, I will illustrate that I want to create a real estate consultation form. I want to use Contact Form 7 to get customer information, including:

  • Name
  • Email
  • phone number
  • Options: View Model Homes, Get a Quote, or Inquire Now.

Step 1: You delete the redundant parts in the form content. Notice that we are missing the phone number and options field.

Instructions for setting up Contact Form 7 WordPress - Click Edit or Create New FormDelete unnecessary parts
Delete unnecessary parts

Step 2: Click Short Text to insert the Phone Number field.

Contact Form 7 WordPress Setup Guide - Click Short Text Button
Click the Short Text button

Step 3: You tick the required item box and enter a name for this box (letters without accents). When done, click the Insert button below.

Instructions for setting up Contact Form 7 WordPress - Enter a name for the content box, tick the Required Item
Enter a name for the content box, tick the Required Item

This is the result of step 3. But compared to the above content boxes, the label is missing <label> Phone number </label> . Please add it yourself.

Instructions for setting up Contact Form 7 WordPress - There is a box to fill in the phone number but the label is missing
There is a box to fill in the phone number, but the label is missing

Step 4: After adding the label to the phone number box, complete. You click the Options checkbox to add an optional section for the customer.

Instructions for setting up Contact Form 7 WordPress - Add a label to the phone number field, then click the Option checkbox
Add a label to the phone number field, then click the Options checkbox

Step 5: You give this content a name (e.g., Tuychon), then fill in the Options; each line is an option. Done, click the Insert button in the form below.

Instructions for setting up Contact Form 7 WordPress - Enter a name for the content box, fill in the options
Enter a name for the content box, fill in the options

And here is the result of step 5. So we have completed a real estate form.

Note: you must click the Save button before moving on to the Mail Configuration section.

Instructions to set up Contact Form 7 WordPress - Completed the real estate consultation form
Completed the real estate consultation form

Set up Contact Form 7 to send Mail

You click on the Mail Configuration tab to set the type of email that you will receive from Contact Form 7 when a customer successfully fills in the form.

  • Mail received: enter the emails that will be notified when the customer completes the form successfully. Separated by commas.
  • Mail sent: leave as is.
  • Title: edit it for your work convenience. For example, I’m fine too.
  • Additional headers: leave or add Cc according to Cc structure : email1,email2,email3 .
  • Message body: should delete all and then recompose for quick reading or copying. For example, I am also short.
Instructions for setting up Contact Form 7 to send Mail
Instructions for setting up Contact Form 7 to send Mail

Set up Contact Form 7 notification section

You click the Notifications and Notes tab to edit the messages when customers fill out the form. In my opinion, you need to correct the message that the Form is sent successfully; the errors are left as is. Remember to Save.

Instructions for setting up Contact Form 7 WordPress - Just fix the message when the form is submitted successfully
Just fix the message when the form is submitted successfully

A few basic steps, and you already have a professional real estate consultation form. Now we will insert it into the page to see how it is.

Insert Contact Form 7 on any page

Step 1: Go to Contact Form > Form List. Copy the Shortcode of the form you just created.

Instructions on how to use Contact Form 7 - Copy the shortcode of the newly created form
Copy the shortcode of the newly created form

Step 3: You create a page or edit any page you want. You paste the shortcode in as normal text and then click Publish (Update).

How to use Contact Form 7 - Paste the shortcode on the page then click Publish (Update)
Paste the shortcode into the page, then click Publish (Update)

This is the result of the real estate consultation form that we created from Contact Form 7.

How to use Contact Form 7 is also quite simple, isn't it?
How to use Contact Form 7 is also quite simple.

Add placeholder for Contact Form 7

This section is supplementary, and you can skip it. The placeholder is the text displayed in the fill box. I like to use it to replace the labels above the cell, making the form more concise. For example, you can compare the difference between using a label and a placeholder in the image below.

Add placeholder for Contact Form 7 - On the left is a normal form, on the right is a form using a placeholder
On the left is a normal form, on the right is a form using placeholders

Step 1: You should copy a completed form. Don’t edit lest you don’t like it; it’s hard to return, and don’t create a new one because it’s hard to edit the Mail and Notifications configuration sections.

Add a placeholder for Contact Form 7 - It is recommended to copy the completed form to try out the placeholder
It is recommended to copy the completed form to try out the placeholder

Step 2: You follow these 3 small steps to change the label to a placeholder and reduce the space between the fields. Remember to save.

  1. Replace label with div in brackets, reducing the space between fields.
  2. Add the placeholder “Name of the cell” before the closing square bracket ] .
  3. Remove the labels above the information fields.
Add placeholder for Conact Form 7
Add a placeholder for Contact Form 7

Configure SMTP for Contact Form 7 to send mail

Most WordPress websites will need to use SMTP for the system to send email notifications. If you try to fill out the form but do not receive mail from Contact Form 7, follow these steps to configure SMTP for Contact Form 7.

Step 1: Go to Plugins > Install New to install Easy WP SMTP .

SMTP Configuration Plugin for Contact Form 7
SMTP Configuration Plugin for Contact Form 7

Step 2: You go to the Google Account Management page by clicking on the profile picture on the Google page.

Configure SMTP for Contact Form 7 - Go to Google Account Management page
Go to the Google Account Management page

Step 3: you click Security on the menu. You must enable 2-step verification first. Then you click on App Passwords.

SMTP Configuration for Contact Form 7 - Click Application Password Mật
Click App Passwords

Step 4: You click Choose the application and select More (Custom name).

SMTP Configuration for Contact Form 7 - Choose Other (Custom Name)
Select Other (Custom Name)

Step 5: You can enter whatever name you want, then click the Create button.

SMTP Configuration for Contact Form 7 - Name it then click Create
Please give it a name, then click Create

Step 6: You copy the application password in the yellow box, paste it somewhere to use for the next step.

Duplicate the application password to configure SMTP for Contact Form 7
Duplicate the application password to configure SMTP for Contact Form 7

Step 7: Go to Settings > Easy WP SMTP. Please configure according to the instructions below or look at the image.

  • Sending email address: your gmail.
  • Email send name : whatever name you like.
  • SMTP Server: smtp.gmail.com
  • Encryption type: SSL/TLS.
  • SMTP Port: 465
  • SMTP Username: your gmail.
  • SMTP Password: generated application password.

For the rest, you leave the default, click the Save changes button below (The part of the application password you should re-enter, and click the save button a few times, because I find this part a bit laggy lately).

Configure SMTP for Contact Form 7 and WordPress
Configure SMTP for Contact Form 7 and WordPress

Step 8: You go to the Test Email tab, enter your email and content and then click the Send test email button. If the blue message is successful, you will see an email that has just been sent to Gmail.

SMTP Settings for Contact Form 7 - Successful SMTP check is correct setting
Successful SMTP test is installed correctly

So we have finished configuring SMTP for Contact Form 7 in particular and the website in general. Now your forms will automatically send you an email notification when a customer successfully fills in the form.

Connect Contact Form 7 with Google Sheets

Please link Contact Form 7 with Google Sheets if you want to manage the data of customers who have filled out the form in Google Sheets. This makes it easy to divide data for sales and reuse data in the future.

Step 1: Go to Plugins > Install New to install CF7 Google Sheets Connector.

Plugin to help connect Contact Form 7 with Google Sheets
Plugin to help connect Contact Form 7 with Google Sheets

Step 2: Go to Contact Form > Google Sheets and then click Get Code to get the code associated with your Google Drive account.

Click the Get code button to connect Contact Form 7 with Google Sheets
Click the Get code button to connect Contact Form 7 with Google Sheets

Step 2: you choose your Google account, then click Allow all.

Select the account and click Allow to connect Contact Form 7 to Google Sheets
Select the account and click Allow to connect Contact Form 7 to Google Sheets

Step 3: you copy the code and then return to the website to paste.

Copy the code and then return to the website to paste it to connect Contact Form 7 with Google Sheets
Please copy the code and then return it to the website to paste it to connect Contact Form 7 with Google Sheets

Step 4: you paste the code and then click the Save button, see the words “Your Google Access Code is Authorized and Saved” is successful.

Paste the code and click Save to connect Contact Form 7 with Google Sheets
Paste the code and click Save to connect Contact Form 7 with Google Sheets

Step 5: Go to Google Sheets and create a Sheet to receive data when customers fill out the form.

Connect Contact Form 7 with Google Sheets - Create a Sheet to get data from Contact Form 7
Create a Sheet to get data from Contact Form 7

Step 6: Go to Contact Form > Form List, click Edit your form. In the form editing page, go to the Google Sheets tab and then fill in the Sheet you just created in the Google Sheets Settings section. Remember to click save.

Connect Contact Form 7 with Google Sheets - Filling in the information of the Sheet will get data from Contact Form 7
Fill in the information of the Sheet that will get data from Contact Form 7

Step 7: you scroll down to see the Field List section. Those are the names of the data columns, copy each name and paste it into the columns in the Sheet that receives your data.

Connect Contact Form 7 with Google Sheets - Copying column names to paste into Sheet will get data from Contact Form 7
Copying column names to paste into Sheet will get data from Contact Form 7

The result of step 7 is that the sheet receiving the data must have columns named in the Field List.

Connected Contact Form 7 with Google Sheets to get data from Contact Form 7
Connected Contact Form 7 with Google Sheets to get data from Contact Form 7

So we have linked Contact Form 7 with Google Sheets already. But you have to test it to see if it works properly.

Test sending Contact Form 7

Now I will try to send a real estate consultation form to see what the result will be. On the left is the information I filled in, on the right is the message when sending successfully.

Connect Contact Form 7 with Google Sheets to get data from Contact Form 7 - Try filling out a real estate consultation form, as a guest who wants to see a sample house and receive a quote
Try filling out the real estate consultation form in the role of a customer who wants to see a model home and receive a quote

Immediately I received an email with the same content as I installed in the Mail configuration section.

Connect Contact Form 7 with Google Sheets to get data from Contact Form 7 - Contact Form 7 sends email notifications immediately
Contact Form 7 send email notifications immediately

And in the Sheet that receives my data, I immediately jump to the data I just filled in. Like, Share, Comment for Lucid Gen guys:v.

Connect Contact Form 7 with Google Sheets - Google Sheets has taken data from Contact Form 7
Google Sheets pulled data from Contact Form 7

Share the beautiful Contact Form 7 template

I write articles with my heart. When I write, I write to the extreme. If you are still confused about how to create a form, I have some common templates available.

How to use: you copy the form’s code, paste it in the Form Content, edit the text and then click Save the form. Then you reload the page and then go to the Mail Configuration tab to edit the type of email received when the customer successfully fills the form.

Beautiful Contact Form 7 template for real estate

Beautiful Contact Form 7 template for real estate
Beautiful Contact Form 7 template for real estate
<div> [text* tenkhachhang placeholder "Tên của bạn"] </div>

<div> [email* email placeholder "Email"] </div>

<div> [text* sodienthoai placeholder "Số điện thoại"] </div>

[checkbox tuychon "Tôi muốn xem nhà mẫu" "Tôi muốn nhận báo giá" "Tôi cần tư vấn ngay"]

[submit "Đăng ký"]

Beautiful Contact Form 7 template for recruitment

Beautiful Contact Form 7 template for recruitment
Beautiful Contact Form 7 template for recruitment
<div> [text* tenungvien placeholder "Tên của bạn"] </div>

<div> [email* email placeholder "Email"] </div>

<div> [text* sodienthoai placeholder "Số điện thoại"] </div>

[select* vitri "Digital Marketing" "Chăm sóc khách hàng" "Nhân viên thu mua"]

[file Filedinhkem limit:2048 filetypes:pdf|doc|docx]

[submit "Ứng tuyển"]

Beautiful Contact Form 7 template for spa, dental and cosmetology bookings

Beautiful Contact Form 7 template for spa, dental and cosmetology bookings
Beautiful Contact Form 7 template for spa, dental and cosmetology bookings
<div> [text* tenkhachhang placeholder "Tên của bạn"] </div>

<div> [text* sodienthoai placeholder "Số điện thoại"] </div>

[date ngay]

[checkbox dichvu "Chăm sóc da" "Lấy nhân mụn" "Lăn kim tế bào gốc"]

[submit "Đặt lịch"]

Beautiful Contact Form 7 template for a personal consultation

Beautiful Contact Form 7 template for personal consultation
Beautiful Contact Form 7 template for a personal consultation
<div> [text* tenkhachhang placeholder "Tên của anh (chị)"] </div>

<div> [text* sodienthoai placeholder "Số điện thoại"] </div>

[textarea tinhtrangsuckhoe placeholder "Tình trạng sức khỏe của anh (chị)"]

[submit "Tư vấn ngay"]

Beautiful Contact Form 7 for ordering

Beautiful Contact Form 7 for ordering
Beautiful Contact Form 7 for ordering
<div> [text* tenkhachhang placeholder "Tên của bạn"] </div>

<div> [text* sodienthoai placeholder "Số điện thoại"] </div>

<div> [text* diachi placeholder "Địa chỉ nhận hàng"] </div>

[select* sanpham "Đồng hồ Citizen" "Đồng hồ DW" "Đồng hồ Casio"]

[number soluong placeholder "1"]

[submit "Đặt mua"]

Conclusion

This is a tutorial on using Contact Form 7 that I believe is sufficient to help you handle the form part of the website, I wrote another post about how to track Contact Form 7 conversions so that marketers can measure the effectiveness of their ads. If you find this article useful, don’t hesitate to leave a comment to let Lucid Gen know that we are doing well and make more useful articles. If you have a part that you can’t do, please comment below so I can help.

Related articles

Trần Ngọc Minh Hiếu

Trần Ngọc Minh Hiếu

I am currently working as a Data Analyst; before that, I worked in Digital Marketing. Blogging is a joy, helping me share my knowledge and experiences from life and work. You can donate to me here.

7 thoughts on “How to set up Contact Form 7 connect to Google Sheets”

  1. Muốn tracking nguồn UTM qua CF7 connector được không b ơi, hay chỉ đơn thuần là đổ dữ liệu vào file Google Sheet thôi ạ. Cảm ơn b nhiều

    Reply
  2. Sao mình làm theo hướng dẫn mà chỉ nhận được email còn trong gg sheet nó lại không hiển thị nhỉ

    Reply
    • Bạn kiểm tra thông tin Google Sheets mà bạn đã điền vào plugin, và kiểm tra tên trường thông tin mà bạn đã điền vào Google Sheets. Có thể có dấu cách hoặc gì đó. Ngoài ra bạn thử tải phiên bản plugin cũ hơn vì có lúc bản mới ko work với phiên bản WP của bạn.

  3. Anh ơi mail server mình có kết nối được google sheet không vậy anh? Cảm ơn anh ạ

    Reply

Leave a Comment