Follow
Lucid Gen
  • Marketing
    • Facebook
    • Google
    • Zalo
    • Content marketing
    • Email Marketing
    • Marketing tools
    • SEO
  • Website
    • WordPress
  • Technology
    • Computer
    • Phone
  • Life
No Result
View All Result
Lucid Gen
  • Marketing
    • Facebook
    • Google
    • Zalo
    • Content marketing
    • Email Marketing
    • Marketing tools
    • SEO
  • Website
    • WordPress
  • Technology
    • Computer
    • Phone
  • Life
No Result
View All Result
No Result
View All Result
Lucid Gen

Lucid Gen › Website › WordPress › How to set up Contact Form 7 connect to Google Sheets

How to set up Contact Form 7 connect to Google Sheets

3/5 - (1 vote)
18/10/2021
0
Cách cấu hình Contact Form 7 kết nối với Google Sheet

Cách cấu hình Contact Form 7 kết nối với Google Sheet

79
SHARES
7.9k
VIEWS
Share to Facebook

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.

Related posts

  • How to set up Contact Form 7 tracking
  • How to disable theme and plugin update notification WordPress
  • How to add Adsense Auto Ads and Sticky Ads to AMP
Table of contents
  1. What is Contact Form 7?
  2. How to set up Contact Form 7 super standard
    1. Set up Contact Form 7 parts of content
    2. Set up Contact Form 7 to send Mail
    3. Set up Contact Form 7 notification section
    4. Insert Contact Form 7 on any page
    5. Add placeholder for Contact Form 7
  3. Configure SMTP for Contact Form 7 to send mail
  4. Connect Contact Form 7 with Google Sheets
  5. Test sending Contact Form 7
  6. Share the beautiful Contact Form 7 template
  7. Epilogue

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.

Contact Form 7

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.
Video tutorial to set up Contact Form 7 to connect with Google Sheets

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 .

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.

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

Epilogue

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.

3/5 - (1 vote)
Share32Pin7Share6
Next Post
Cách tạo nút đăng ký kênh YouTube trên video - How to add subscribe button on YouTube video

How to add subscribe button on YouTube video

Chia sẻ và hướng dẫn Wordfence Security Premium

How to set up Wordfence Security Premium plugin

Leave a Reply Cancel reply

I will review and reply to all comments within the day. Please feel free to leave your comments on this article!

Your email address will not be published. Required fields are marked *

Recommend for you

  • Trending
  • Latest
Cách cài đặt Camtasia trên Macbook vĩnh viễn - How to get Camtasia on Mac lifetime free

How to get Camtasia on Mac lifetime free

19/10/2021
0
2 cách bật khiên avt ảnh đại diện Facebook - How to activate Facebook profile picture guard

How to activate Facebook profile picture guard

12/07/2021
0
Chia sẻ và hướng dẫn Wordfence Security Premium

How to set up Wordfence Security Premium plugin

09/04/2022
0
Cách tạo và sử dụng tài khoản MCC Google Ads - How to create Google MCC account and use it

How to create Google MCC account and use it

06/08/2021
0
Cách chỉnh tốc độ chuột MacBook, Magic Mouse, Logitech trên MacBook

How to increase mouse tracking speed Mac

14/05/2022
0
Cách cài đặt Power BI trên Mac và Windows | How to download Power BI for Mac and Windows

How to download Power BI for Mac and Windows

15/10/2021
0
Cài đặt tracking chuyển đổi Contact Form 7 How to set up Contact Form 7 tracking

How to set up Contact Form 7 tracking

08/10/2021
0
Cách gỡ ứng dụng trên Mac và dọn dẹp sạch sẽ - How to uninstall apps on Mac completely

How to uninstall apps on Mac completely

08/10/2021
0

Lucid Gen

A blog sharing about digital marketing, miscellaneous about technology and what you might need that the author knows.

Developed by blogger
Minh Khue › Donate

228 Posts and 4146 Comments

Disclosure: This website has advertisements. If you don’t have money, how can you write?

 Google Play  Microsoft Store

Recent Comments

  • Minh Khuê on How to download Adobe on Mac for free for life
  • mm on How to download Adobe on Mac for free for life
  • Minh Khuê on How to download Adobe on Mac for free for life
  • danny on How to download Adobe on Mac for free for life
  • Elle Ambrose on How to uninstall Microsoft AutoUpdate on Mac

Image sources

Lucid Gen edits images from the following sources: Freepik, Unsplash & Pixabay.

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

  • About
  • Contact
  • Terms and policies

© 2019 Lucid Gen with by Minh Khue DMCAProtected

No Result
View All Result
  • Marketing
    • Facebook
    • Google
    • Zalo
    • Content marketing
    • Email Marketing
    • Marketing tools
    • SEO
  • Website
    • WordPress
  • Technology
    • Computer
    • Phone
  • Life

© 2019 Lucid Gen with by Minh Khue DMCAProtected