• Tiếng ViệtTiếng Việt
Theo dõi
Lucid Gen
  • Digital Marketing
    • Email Marketing
    • Facebook
    • Google Ads
    • Zalo Marketing
  • Website
    • SEO
    • Website measurement
    • WordPress
  • Technology
    • Computer tips
    • Mobile
    • Utilities
  • Review
  • Marketing tools
No Result
View All Result
Lucid Gen
  • Digital Marketing
    • Email Marketing
    • Facebook
    • Google Ads
    • Zalo Marketing
  • Website
    • SEO
    • Website measurement
    • WordPress
  • Technology
    • Computer tips
    • Mobile
    • Utilities
  • Review
  • Marketing tools
No Result
View All Result
Lucid Gen
No Result
View All Result

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

How to set up Contact Form 7 to connect to Google Sheet

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

9
SHARES
879
VIEWS
Chia sẻ bài viết lên Facebook

Lucid Gen’s Contact Form 7 configuration guide will help you have a contact form as you like. You will be notified by email and you can get data from Contact Form 7 by Connecting Contact Form 7 with Google Sheet . I find this 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 Wordfence Security Premium plugin
  • Delete unused thumbnail images and disable automatic image creation in WordPress
  • Anti-copy website image with a simple code
Table of contents
  1. What is Contact Form 7
  2. How to configure the super standard Contact Form 7
    1. Configure Contact Form 7 content
    2. Configure Contact Form 7 part to send Mail
    3. Configure 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 Sheet
  5. Test sending test Contact Form 7
  6. Share beautiful Contact Form 7 form
  7. Conclusion

What is Contact Form 7

Contact Form 7 is a completely and most popular free form creation plugin for WordPress. This will help WordPress add the ability to create contact forms and insert forms on any page you want. Configure Contact Form 7 allows you to customize a variety of information and title fields. Notification when there is data can be sent to many emails at the same time. Because of its popularity, there are a lot of other developers who added special features to it with plug-in plugins.

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

  1. Instructions for configuring WordPress Contact Form 7 to have a desired form.
  2. Configure SMTP for Contact Form 7.
  3. Connect Contact Form 7 with Google Sheet to get data from Contact Form 7.
  4. Finally, we share some beautiful Contact Form 7 templates.
Video instructions for configuring Contact Form 7 to connect to Google Sheet

How to configure the super standard Contact Form 7

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

Hướng dẫn cấu hình Contact Form 7 WordPress
Instructions on how to use Contact Form 7

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

Hướng dẫn cấu hình Contact Form 7 WordPress - Nhấp Sửa hoặc Tạo Form mới
Click Edit or Create New Form

Configure Contact Form 7 content

Before guiding the configuration of Contact Form 7 WordPress, I want to explain the meaning of the types of content and when it is appropriate to use them.

The most commonly used content:

  1. Short text: it is a short field of information, it is most common. Can substitute for content from 2 to 5 too. Especially should be used as a substitute for Phone Number to reduce difficulties when entering phone numbers for customers. Vietnam’s prefixes are quite diverse, not to mention +84 and 0, some customers like to copy and paste so it may contain dots, spaces, the form will error. Let guests feel free to enter their own phone number.
  2. Long text: is the box to fill in information like 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 box to enter the email address. Nothing to note.
  4. Phone number: is the box to enter the phone number. But you should use Short Text instead.
  5. Date: is in the date format. Suitable for appointment booking forms.
  6. List menu : is a menu that shows a list, guests can choose only 1 value.
  7. Checkbox option: there are many options, guests are ticked with many values.
  8. Radio options: There are many options, guests can choose only 1 value.
  9. Send: just send button.

The content is rarely used:

  • URL: the box to enter a website link. Suitable for website consulting form, or form requesting social networking information.
  • Number: is the cell where only the number is entered. Suitable for form with order quantity.
  • Terms of acceptance: next.
  • Question: next.
  • File: is a button to upload an attached file. Suitable for recruitment form.

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

  • Name
  • Email
  • phone number
  • Options: View sample house, Get a quote, or Consult now.

Step 1: You delete the redundant parts in the content of the form. Notice we’re missing the box for numbers and options.

Hướng dẫn cấu hình Contact Form 7 WordPress - Nhấp Sửa hoặc Tạo Form mớiXóa các phần không cần thiết
Delete unnecessary parts

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

Hướng dẫn cấu hình Contact Form 7 WordPress - Nhấp nút Văn bản ngắn
Click the Short Text button

Step 3: You check the box This field is required , then you enter a name for this box (words without accents). Done then click the Insert button below.

Hướng dẫn cấu hình Contact Form 7 WordPress - Điền tên cho ô nội dung, tích vào Mục bắt buộc
Enter a name for the text box, check the Required field

This is the result of step 3. But comparing to the cells above, the label <label> Phone Number </label> is missing . Please add it yourself.

Hướng dẫn cấu hình Contact Form 7 WordPress - Đã có ô điền số điện thoại nhưng thiếu nhãn
There is a box for the phone number but the label is missing

Step 4: After the warehouse, add labels to the cell phone number box is finished. You click the button Options checkbox to add options for the customer.

Hướng dẫn cấu hình Contact Form 7 WordPress - Thêm nhãn cho ô điền số điện thoại, sau đó nhấp nút Tùy chọn checkbox
Add a label for the phone number box, then click the Checkbox Options button

Step 5: You name this content (eg: tuychon), then you enter Options, each line is an option . Finished, click the Insert button below.

Hướng dẫn cấu hình Contact Form 7 WordPress - Điền tên cho ô nội dung, điền các tùy chọn
Enter a name for the message 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 Mail Configuration.

Hướng dẫn cấu hình Contact Form 7 WordPress - Đã hoàn thành form tư vấn bất động sản
Completed a real estate consultation form

Configure Contact Form 7 part to send Mail

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

  • Mail received: enter the email to receive notification when the customer successfully completes the form. Separated by commas.
  • Mail sent: leave intact.
  • Title: edited for convenience of your work. For example, I’m also OK.
  • Additional headers: leave the same or add Cc following the Cc structure : email1, email2, email3 .
  • Message body: you should delete everything and then compose it for quick reading or copying. For example, I am also neat.
Hướng dẫn cấu hình Contact Form 7 gửi Mail
Hướng dẫn cấu hình Contact Form 7 gửi Mail

Configure Contact Form 7 notification section

You click on the Notifications and Notes tab to edit the messages when the customer fills out the form. In my opinion, you just need to edit the message Form has been sent successfully , the error parts just leave the same. Remember to save.

Hướng dẫn cấu hình Contact Form 7 WordPress - Chỉ cần sửa thông báo khi gửi form thành công
Just edit the message when submitting the form successfully

A few basic steps are you already have a professional real estate consulting form. Now we will insert it on the page to see how it looks.

Insert Contact Form 7 on any page

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

Hướng dẫn cách sử dụng Contact Form 7 - Sao chép shortcode của form vừa tạo
Copy the shortcode of the form you just created

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

Hướng dẫn cách sử dụng Contact Form 7 - Dán shortcode vào trang rồi nhấp Công bố (Cập nhật)
Dán shortcode vào trang rồi nhấp Công bố (Cập nhật)

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

Cách sử dụng Contact Form 7 cũng khá đơn giản phải không
How to use Contact Form 7 is also quite simple, right

Add placeholder for Contact Form 7

This section is additional, you can skip. Placeholder is the text that will appear in the fill box. I like to use it to replace the labels above the cell, making the form more concise. For example, in the image below you can compare the difference between using labels and placeholders.

Thêm placeholder cho Contact Form 7 - Bên trái là form bình thường, bên phải là form dùng placeholder
The left is a normal form, the right is a form that uses placeholders

Step 1: You should copy a completed form. Do not edit or do not like it, it is difficult to return, also do not create a new one because you have to fix the mail Configuration, Notifications.

Thêm placeholder cho Contact Form 7 - Nên sao chép form đã hoàn thiện để thử dùng placeholder
It’s a good idea to copy the completed form to try using placeholders

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

  1. Replace the text label to div in brackets, helping to reduce the space between the information fields.
  2. Add the “Cell Name” placeholder before the closing bracket ] .
  3. Delete the label sections above the information fields.
Thêm placeholder cho Conact Form 7
Thêm placeholder cho Conact 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 without receiving mail from Contact Form 7 then follow these steps to configure SMTP for Contact Form 7.

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

Plugin cấu hình SMTP cho Contact Form 7
Plugin cấu hình SMTP cho Contact Form 7

Step 2: You go to the Google Account Management page by clicking on your avatar on the Google page.

Cấu hình SMTP cho Contact Form 7 - Vào trang Quản lý tài khoản Google
Go to the Google Account Management page

Step 3: Click the Security button on the menu. You must turn on 2-step verification first. Then click App Password .

Cấu hình SMTP cho Contact Form 7 - Nhấp vào Mật khẩu ứng dụng
Click App passwords

Step 4: Click Choose an app and choose More (Custom Name) .

Cấu hình SMTP cho Contact Form 7 - Chọn Khác (Tên tùy chỉnh)
Choose Other (Custom Name)

Step 5: You enter the name whatever, and then click Create .

Cấu hình SMTP cho Contact Form 7 - Đặt tên rồi nhấp Tạo
Name and click Create

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

Sao chéo mật khẩu ứng dụng để cấu hình SMTP cho Contact Form 7
Sao chéo mật khẩu ứng dụng để cấu hình SMTP cho Contact Form 7

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

  • Email address: your gmail.
  • Email sent: what name you like.
  • SMTP server: smtp.gmail.com
  • Encryption type: SSL / TLS.
  • Cổng SMTP: 465
  • SMTP Username: your gmail.
  • SMTP password : created application password.

The rest you leave as default, click the Save changes button below (In the app password you should re-enter and click the save button a few times, as I recently found this part a bit laggy).

Cấu hình SMTP cho Contact Form 7 và WordPress
Configuring SMTP for Contact Form 7 and WordPress

Step 8: You go to the tab of Email Test , you enter your email and content and click the button Send Email Test Test . If the green message is successful, go to gmail and you will see the email you just sent.

Cài đặt SMTP cho Contact Form 7 - Kiểm tra SMTP thành công là đã cài đặt đúng
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 email you when a customer has successfully filled out the form.

Connect Contact Form 7 with Google Sheet

Please link Contact Form 7 with Google Sheet if you want to manage customer data that has filled out forms in Google Sheet. This makes it easy to divide data for sales and reuse data in the future.

Step 1: Go to Plugin> Install New to install CF7 Google Sheet Connector .

Plugin giúp kết nối Contact Form 7 với Google Sheet
Plugin helps to connect Contact Form 7 with Google Sheet

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

Nhấp nút Get code để kết nối Contact Form 7 với Google Sheet
Click the Get code button to connect Contact Form 7 with Google Sheet

Step 2: You select the Google account of you, then just click Allow all.

Chọn tài khoản và nhấp Cho phép để kết nối Contact Form 7 với Google Sheet
Select the account and click Allow to connect Contact Form 7 with Google Sheet

Step 3: Please copy this code and go back to the website to paste.

Sao chép mã rồi quay lại website để dán để kết nối Contact Form 7 với Google Sheet
Copy the code and then return to the website to paste to connect Contact Form 7 with Google Sheet

Step 4: You paste it in and click Save , see “Your Google Access Code is Authorized and Saved” is successful.

Dán mã và nhấp Save để kết nối Contact Form 7 với Google Sheet
Paste the code and click Save to connect Contact Form 7 with Google Sheet

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

Kết nối Contact Form 7 với Google Sheet - Tạo một Sheet để để lấy dữ liệu từ Contact Form 7
Create a Sheet to retrieve 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 Sheet tab and then fill in the Sheet information you just created into the Google Sheet Settings section . Remember to click save.

Kết nối Contact Form 7 với Google Sheet - Điền thông tin của Sheet sẽ lấy dữ liệu từ Contact Form 7
Fill out Sheet information will get data from Contact Form 7

Step 7: Scroll down to see the Field List section . That is the name of the data columns, please copy each name and then paste it into the columns in the Sheet receiving your data.

Kết nối Contact Form 7 với Google Sheet - Sao chép các tên cột để dán vào Sheet sẽ lấy dữ liệu từ Contact Form 7
Copying column names to paste into Sheet will pull data from Contact Form 7

The result of step 7 is that the Sheet receiving the data must have column names in the Field List like this.

Đã kết nối Contact Form 7 với Google Sheet để lấy dữ liệu từ Contact Form 7
Connected Contact Form 7 with Google Sheet to get data from Contact Form 7

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

Test sending test Contact Form 7

Now I will try submitting a real estate consultation form to see how the results will be. On the left is the information you entered, on the right is the message you have sent successfully.

Kết nối Contact Form 7 với Google Sheet để lấy dữ liệu từ Contact Form 7 - Thử điền form tư vấn bất động sản, trong vai khách muốn xem nhà mẫu và nhận báo giá
Try filling out a real estate consultation form, playing the role of a guest wanting to see a model house and receive a quote

Immediately I received an email with the content as I have installed in this mail configuration section.

Kết nối Contact Form 7 với Google Sheet để lấy dữ liệu từ Contact Form 7 - Contact Form 7 gửi email thông báo liền
Contact Form 7 email notification immediately

And in the Sheet that received my data also jumped the data that I just filled out. Like, Share, Comment for Lucid Gen alone guys: v.

Kết nối Contact Form 7 với Google Sheet - Google Sheet đã lấy dữ liệu từ Contact Form 7
Google Sheet has pulled data from Contact Form 7

Share beautiful Contact Form 7 form

I write articles with my mind, I write to the extreme when I write. If you still have trouble thinking about how to create a form, I have a few popular templates available.

Usage: You copy the code of the form, paste it into the Form Content, edit the text, and then click Save Form. Then you reload the page and then go to the Mail Configuration tab to correct the type of email received when the guest successfully filled out the form.

Beautiful Contact Form 7 for real estate

Mẫu Contact Form 7 đẹp cho bất động sản
Beautiful Contact Form 7 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 form for recruitment

Mẫu Contact Form 7 đẹp cho tuyển dụng
Beautiful Contact Form 7 form 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, beauty salon booking

Mẫu Contact Form 7 đẹp cho đặt lịch spa, nha khóa, thẫm mỹ
Beautiful Contact Form 7 template for spa, dental, beauty salon booking

<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 for personal advice

Mẫu Contact Form 7 đẹp cho tư vấn cá nhân
Beautiful Contact Form 7 for personal advice

<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

Mẫu Contact Form 7 đẹp cho đặt mua hàng
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 how to use Contact Form 7 that I believe is complete to help you handle the form part of the website. If you find this article interesting and helpful to you, do not hesitate to leave a comment so Lucid Gen knows that we are doing well and will try to make more useful articles like that. If you have not done any part, please also comment below for me to support.

Share4Pin1Share1
Next Post
Cách tạo nút đăng ký kênh YouTube trên video

How to create a YouTube channel subscription button on a 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 *

You will probably need it

Cách viết chữ in đậm trên Facebook và FB chat
Content marketing

How to write bold text on Facebook and FB Messenger

18/10/2020
0

How to write type on Facebook, write in bold, italic on Facebook, change the FB font on status. 100% of...

Read more

Recommended for you

How to install and use HTTrack on a Macbook

18/10/2020

How to export Merchant Center product feed on WordPress

18/10/2020
Cách tạo khung ảnh Shopee hàng loạt cực nhanh

How to create multiple Shopee photo frames in bulk

18/10/2020

How to take a screenshot on a MacBook professionally

18/10/2020

How to check the activation date of iPhone and Macbook

18/10/2020

Lucid Gen

Một blog chia sẻ về digital marketing, linh tinh về công nghệ và những gì có thể bạn cần mà tác giả biết.

Phát triển bởi một người thích viết blog
Trần Ngọc Minh Hiếu

Thống kê thời gian thực đã có 63 Bài viết và 1,920 Bình luận

Tiết lộ: Website này đã có quảng cáo. Không có tiền thì viết làm sao.

Recent Comments

  • Minh Hiếu on How to merge multiple Excel and CSV files into 1 sheet
  • Nguyenthoa on How to merge multiple Excel and CSV files into 1 sheet
  • Minh Hiếu on How to merge multiple Excel and CSV files into 1 sheet
  • Nguyenthoa on How to merge multiple Excel and CSV files into 1 sheet
  • Minh Hiếu on How to hide all files and icons on the Mac desktop

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 Hieu DMCA Protected

No Result
View All Result
  • Digital Marketing
    • Email Marketing
    • Facebook
    • Google Ads
    • Zalo Marketing
  • Website
    • SEO
    • Website measurement
    • WordPress
  • Technology
    • Computer tips
    • Mobile
    • Utilities
  • Review
  • Marketing tools

© 2019 Lucid Gen with by Minh Hieu DMCA Protected