Contact Form 7 is a powerful WordPress plugin that makes it easy to add forms to your website. However, sometimes you may want to automate the process of storing form submissions in a Google Sheets document for easier management, collaboration, and analysis. In this tutorial, we’ll dive deep into how to connect Contact Form 7 to Google Sheets using the CF7 Google Sheets Connector plugin.
Why Use Google Sheets with Contact Form 7?
Storing form submissions in Google Sheets provides a lot of benefits:
- Easy Data Access: You can view and organize your form submissions in a Google Sheet anytime, from anywhere.
- Collaboration: Share the Google Sheet with your team for instant collaboration and tracking.
- Automation: Google Sheets offers various features and integrations that can automate tasks, like notifications or data analysis.
Step 1: Set Up Google Sheets API
Before you can connect Contact Form 7 to Google Sheets, you need to configure the Google Sheets API. Follow these steps:
1.1 Create a Project in Google Cloud Console
- Visit the Google Cloud Console.
- In the top left, click on the Select a Project dropdown and then click New Project.
- Name your project (e.g., “Contact Form 7 Integration”).
- Click Create to create your new project.
1.2 Enable Google Sheets API
- In the Google Cloud Console, go to APIs & Services > Library.
- Search for “Google Sheets API” and click on it.
- Click Enable to activate the API for your project.
1.3 Enable Google Drive API
Since you’ll be interacting with Google Sheets through a spreadsheet stored in Google Drive, you also need to enable the Google Drive API:
- In the same Library section, search for “Google Drive API”.
- Click Enable to activate the Drive API for your project.
1.4 Create OAuth Credentials
To authenticate the connection between WordPress and Google Sheets, you’ll need to create OAuth credentials:
- Go to APIs & Services > Credentials.
- Click Create Credentials, then select OAuth 2.0 Client IDs.
- If prompted, set up the OAuth consent screen. Fill in the required fields such as the Application name and Support email.
- Under Scopes, select the appropriate scopes for your integration (Google Sheets and Google Drive).
- In the Create OAuth client ID section, choose Web application as the application type.
- For Authorized redirect URIs, enter the redirect URI provided by the CF7 Google Sheets Connector plugin (this will be shown during setup).
- Click Create and download the credentials.json file. Keep this file safe, as it contains sensitive information.
Step 2: Install and Configure the CF7 Google Sheets Connector Plugin
- Go to Plugins > Add New in your WordPress admin panel.
- Search for “CF7 Google Sheets Connector”.
- Click Install Now and then Activate.
Once activated, the plugin will add a new settings section where you can configure the integration with Google Sheets.
Step 3: Authenticate the Plugin with Google
Now, you need to authenticate the plugin using the credentials.json file you downloaded earlier:
- Go to Contact Form 7 > Google Sheets Connector settings in your WordPress admin panel.
- You will see an option to Authenticate with Google. Click on it.
- Upload the credentials.json file you downloaded from the Google Cloud Console.
- Follow the on-screen prompts to authorize the plugin to access your Google Sheets and Drive data.
- Once authenticated, you’ll be prompted to select the Google Sheet you want to connect to. Choose the spreadsheet where you want to store your form submissions.
Step 4: Map Contact Form 7 Fields to Google Sheets Columns
With the Google Sheet connected, it’s time to map your form fields to the columns in the Google Sheet.
- In the plugin settings, you will see a section where you can map each form field to the columns in your Google Sheet.
- Match each field in your Contact Form 7 form with the corresponding column in the Google Sheet:
- For example:
- Name field in your form → Name column in your sheet
- Email field in your form → Email column in your sheet
- Message field in your form → Message column in your sheet
- For example:
- Save the mappings.
If your form has custom fields, make sure each one corresponds to a column in the Google Sheet. If needed, add more columns to your sheet.
Step 5: Test the Integration
Once everything is set up, it’s time to test whether the integration works:
- Go to the page on your site where the Contact Form 7 form is located.
- Fill out the form with some test data (e.g., Name, Email, and Message).
- Submit the form.
- Go to your Google Sheet and check if the form submission appears as a new row.
If the submission doesn’t show up, ensure that:
- The API credentials are correct and properly authenticated.
- The Google Sheet has the correct permissions to allow data from the plugin.
- The form field mappings are accurate.
Troubleshooting
If the integration isn’t working as expected, here are a few things to check:
- API Credentials: Ensure that the OAuth credentials are correct and that the API is enabled for both Google Sheets and Google Drive.
- Permissions: Verify that your Google Sheet has the right permissions (it should be accessible by the plugin).
- Field Mappings: Double-check that each field in the form is mapped to the correct column in the Google Sheet.
Need Help Customizing Your Contact Form 7 Integration?
Hire a certified WordPress expert from Codeable to help you set up or customize your Contact Form 7 to Google Sheets integration.