Contact us page is necessary for every blog, websites, and services which allows visitors to contact you regarding any issue or information. When it comes to WordPress, there are dozens of Contact plugins available but only a few works as per the expectations. Contact Form 7 plugin is one of the most simple and smart WordPress plugins for contact us page.
The only negative part about the Contact Form 7 plugin is that it does not store the form data. You need to do other arrangements in order to store Contact Form 7 data.
In this post, I will be writing about storing the Contact Form 7 data in Google Sheet using another plugin called CF7 Google Sheets Connector. Let’s get started…
Installing “Contact Form 7”
First of all, you will need to install the contact plugin which is called Contact Form 7.
After installing the plugin you need to create one form as per your requirements by going to Contact Form 7 plugin you just installed and clicking on the Add New button as shown in the image below. After creating the form copy the shortcode and paste where you want to show this form on your website. You can either paste this shortcode to a text widget in the sidebar, a post/page or in any popup plugin.
Since you have created a contact form, now comes the second part of this tutorial; integrating the Contact Form 7 with Google Sheet.
Integrating Contact Form 7 with Google Sheet
To integrate you’ll need to install a plugin called CF7 Google Sheets Connector. Go to CF7 Google Sheets Connector settings and click on the Get Code which will take you to CF7 authorization with Google sheet page and ask you to login and authorize with your Google account where your form data will be saved.
After login with your Google ID, it will ask you for permission to view and manage your spreadsheets in Google Drives, allow by clicking the allow button.
Since you have logged in and authorized the CF7 Google Sheets Connector plugin to view and manage your spreadsheets, here comes the last and main step.
Setting Up CF7 and Google Sheet
Steps to do in the Google Spreadsheet
- Open https://docs.google.com/spreadsheets in your browser which will ask you to login with the Google account you just verified CF7 with, if not already logged in.
- Create a new sheet and name it anything you want.
- Rename the tab below on which you want to capture the data.
- In Google Sheets, provide the Columns name in Row 1. Name the first column as Date if you want to keep the record of date. For further columns, name it as the form tags from the Contact Form 7. (For eg. “your-name”, “your-email”, “your-subject”, “your-message”, etc).
Steps to do in the WordPress Admin
- Go to Contact Form 7 dashboard click on the form you had created in the first step and go to the Google Sheets tab inside the dashboard.
- There should be two fields asking “Google Sheet Name” and “Google Sheet Tab Name”. Fill out both the details. In the field, Google Sheet Name, fill the name of the spreadsheet name you just created and in the Google Sheet Tab Name, write the name of the tab you just created in the Google Sheets.
You can understand better with the image below.
After this, you’re done.
You can now test the setup by filling and submitting the contact form you created. When you fill the form with required details, the data will immediately appear in the Google Sheet of your Google account.
Update: 11 April 2019
Does this CF7 to Google Sheets Setup Work with the Check-boxes and Radio Buttons?
And, the answer is YES. It works perfectly with the checkboxes and the radio buttons.
Let me break this step-by-step.
How to Create a Check-box in Contact Form 7?
You know the initial process of creating a new form already, so let me skip right to the checkbox part.
In order to insert check-box, click on the checkboxes option which will open a new popup where you will have to enter all the details including Name and the Options, as shown below.
Please note that the text you write in the Name field will be the column name in the Google Sheets.
Click on the Insert Tag and the checkbox will be inserted in the form.
How to Create a Radio Button in Contact Form 7?
Like the checkboxes, you will have to click on the radio buttons and it will open a popup where you will have to fill out the Name and the Options field as shown below.
And, the text you enter in the Name field will be the column name in the Google Sheets as I explained in the checkboxes option.
Click on the Insert Tag and the radio button will be inserted in your form.
Sending Checkbox and Radio Button Data to the Google Sheets
As I mentioned previously, the text you enter in the Name fields of the checkbox and radio button will have to be put as the column name in the Google Sheets.
Create new columns in your existing Google Sheets where the first row of the columns will be the Name field of the checkbox and radio button as shown in the above screenshot.
Here’s how it will look in the Google Sheets,
And, as soon you complete the setup, all the Contact Form 7 data will start reflecting in the Google Sheets after someone fills in the form.
If you encounter any difficulties while setting up, feel free to comment down below.