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.
How to Connect Contact Form 7 to Google Sheets
How to Connect Contact Form 7 to Google Sheets

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

  1. Visit the Google Cloud Console.
  2. In the top left, click on the Select a Project dropdown and then click New Project.
  3. Name your project (e.g., “Contact Form 7 Integration”).
  4. Click Create to create your new project.

1.2 Enable Google Sheets API

  1. In the Google Cloud Console, go to APIs & Services > Library.
  2. Search for “Google Sheets API” and click on it.
  3. 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:

  1. In the same Library section, search for “Google Drive API”.
  2. 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:

  1. Go to APIs & Services > Credentials.
  2. Click Create Credentials, then select OAuth 2.0 Client IDs.
  3. If prompted, set up the OAuth consent screen. Fill in the required fields such as the Application name and Support email.
  4. Under Scopes, select the appropriate scopes for your integration (Google Sheets and Google Drive).
  5. In the Create OAuth client ID section, choose Web application as the application type.
  6. For Authorized redirect URIs, enter the redirect URI provided by the CF7 Google Sheets Connector plugin (this will be shown during setup).
  7. 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

  1. Go to Plugins > Add New in your WordPress admin panel.
  2. Search for “CF7 Google Sheets Connector”.
  3. 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:

  1. Go to Contact Form 7 > Google Sheets Connector settings in your WordPress admin panel.
  2. You will see an option to Authenticate with Google. Click on it.
  3. Upload the credentials.json file you downloaded from the Google Cloud Console.
  4. Follow the on-screen prompts to authorize the plugin to access your Google Sheets and Drive data.
  5. 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.

  1. In the plugin settings, you will see a section where you can map each form field to the columns in your Google Sheet.
  2. 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
  3. 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:

  1. Go to the page on your site where the Contact Form 7 form is located.
  2. Fill out the form with some test data (e.g., Name, Email, and Message).
  3. Submit the form.
  4. 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.

Get a Free Estimate