How can we help you?

Overview

The Elementor Form + Google Docs Integration add-on by GravityExtra connects your Elementor Pro forms directly to Google Docs and Google Drive. Every time a visitor submits an Elementor form on your site, the add-on automatically duplicates a pre-formatted master Google Doc template, populates it with dynamic submission data using merge tags, and saves the newly created document into your specified Google Drive destination folder.

Key Features

• Template Cloning: Preserves all formatting, headers, footers, and styles from your master Google Doc template while creating individual standalone documents for each submission.
• Dynamic Merge Tags: Replace placeholders like {{name}}, {{email}}, {{date}}, and custom fields instantly with live form data.
• Google Drive Organization: Automatically organize generated documents into specific Google Drive folders or custom subfolders.
• Reliable Authentication: Uses Google Cloud Service Account authentication for resilient server-to-server operations without requiring user token refreshes.
• Native Elementor Pro Workflow: Seamlessly integrated into Elementor Form’s Actions After Submit panel.

Prerequisites

• WordPress 5.8 or higher.
• Elementor Pro (with Form widget enabled).
• Elementor Form + Google Docs Integration add-on (v1.1.0 or later).
• A Google Cloud Console account with Google Drive API and Google Docs API enabled.

Step 1: Google Cloud Service Account Setup

To allow your WordPress website to securely create and update documents in your Google Drive, you will generate a Service Account credential JSON key:

1. Navigate to the Google Cloud Console.
2. Create a new project (e.g., GravityExtra Google Docs) or select an existing one.
3. Go to APIs & Services → Library. Search for and Enable both:
   • Google Drive API
   • Google Docs API
4. Go to APIs & Services → Credentials.
5. Click Create Credentials → Service Account.
6. Give your Service Account a name (e.g., elementor-docs-sync) and click Create and Continue. You can skip the optional role grants and click Done.
7. Under the Service Accounts list, click on your newly created account, go to the Keys tab, click Add Key → Create new key, select JSON, and download the key file to your computer.
8. Note the Service Account email address (e.g., elementor-docs-sync@your-project.iam.gserviceaccount.com).

Step 2: Prepare Your Master Google Doc Template

1. Open Google Docs and create your master template document (or use an existing one).
2. Add merge tags anywhere in the body, headers, or footers where you want form data to appear. Format tags using double curly braces:
   • {{full_name}}
   • {{email_address}}
   • {{phone_number}}
   • {{inquiry_message}}
   • {{submission_date}}
3. Grant Access to the Service Account: Click the blue Share button in Google Docs, paste your Service Account email address, set the permission role to Editor, and click Share. (This is required so the add-on can clone and write to the document).
4. Copy the Document ID from the URL (the long string between /d/ and /edit).

Step 3: Add-on Configuration in WordPress

1. Log into your WordPress admin dashboard.
2. Upload and activate the Elementor Form + Google Docs Integration plugin.
3. Navigate to Elementor → Settings → Google Docs.
4. Enter your GravityExtra License Key to enable automated updates and support.
5. Upload your downloaded Google Service Account JSON file or paste its contents into the credentials field.
6. Click Save & Test Connection to confirm that WordPress can communicate with Google APIs.

Step 4: Configure Your Elementor Pro Form

1. Edit the page containing your Elementor Pro form using the Elementor editor.
2. Select the Form widget to open its settings in the left panel.
3. Open the Actions After Submit section and add Google Docs to the list of actions.
4. A new Google Docs tab will appear in the form settings:
   • Master Template ID: Paste your Google Doc template ID.
   • Document Name: Enter a dynamic name pattern (e.g., Contract - {{full_name}} - {{submission_date}}).
   • Destination Folder ID (Optional): Enter the Google Drive folder ID where created documents should be placed. (Ensure you also shared that folder with the Service Account email).
   • Merge Tag Mapping: Map each placeholder tag in your template to the corresponding Elementor form field.
5. Click Update to save the Elementor page.

Troubleshooting & FAQs