How to Send Divi Form Data to Google Sheets

Sending Divi form data to Google Sheets opens up a realm of possibilities for businesses and website owners seeking to streamline their data management processes. By seamlessly integrating Divi’s built-in contact form with the powerful data organization features of Google Sheets, users can create a highly efficient workflow for collecting and analyzing information.

This tutorial will guide you through the process step by step, integrating Divi’s contact form with Google Sheets.

With this integration, you’re not limited to using the form as a contact form only, but also many kinds of form you want it to be. And every form submission is automatically and accurately recorded in a centralized location, streamlining data management processes.

How to Send Divi Form Data to Google Sheets

Step 1: Add a Contact Form

To begin, let’s start by incorporating a contact form into your canvas area. By default, you’ll find basic contact fields including Name, Email, and Message.

For demonstration purposes, we’ll customize the Name field to First Name and introduce an additional field for Last Name. Below is an illustration of the form’s layout:

Understanding the Divi’s Contact Form Field Names

Before proceeding with the tutorial, it’s essential to grasp Divi’s naming convention for its contact form fields as it will be utilized later in the script. Here’s a concise breakdown:

• Prefix: All fields commence with et_pb_contact_
• Field Name: The field name in lowercase with spaces substituted by underscores
• Form Index: A numerical representation of the form’s position on the page (_0 for the first form, _1 for the second form, and so forth)

For instance, the First Name field in your form will be labeled et_pb_contact_first_name_0. Subsequent fields will adhere to the same naming convention. Below is a list of all field names for the aforementioned form:

• et_pb_contact_first_name_0
• et_pb_contact_last_name_0
• et_pb_contact_email_0
• et_pb_contact_message_0

Step 2: Get the Spreadsheet and the API Key Ready

Name the Spreadsheet and Add Some Data Header

After opening a spreadsheet on your Google Sheets, you have the option to rename the sheet to your preference or leave it as the default (Sheet1).

Next, add headers to the columns. The first column will be designated for the date of the data submission, while the subsequent headers will mirror the fields in your form. This organization ensures clear and structured data arrangement for efficient analysis.

If you choose to rename the sheet, ensure to match the sheet name in the script on the following step.

Step 3: Get the Web App URL

Add the Code to the Apps Script

After setting up the spreadsheet, proceed to generate a web app URL for sending data from your Divi form.

To accomplish this, navigate to the Extension → Apps Script option in the spreadsheet menu.

Next, rename the Untitled Project to assign a new project title, then replace the existing myFunctions() code in the Apps Script editor with the following code.

const sheetName = 'Sheet1';
const scriptProp = PropertiesService.getScriptProperties();

function initialSetup() {
  const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  scriptProp.setProperty('key', activeSpreadsheet.getId());
}

function doPost(e) {
  const lock = LockService.getScriptLock();
  lock.tryLock(10000);

  try {
    const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'));
    const sheet = doc.getSheetByName(sheetName);
    const formData = e.parameter;

    // Get pre-defined field order (modify this list with your actual field names)
    const fieldOrder = ['et_pb_contact_first_name_0', 'et_pb_contact_last_name_0', 'et_pb_contact_email_0', 'et_pb_contact_message_0'];

    // Get current date
    const currentDate = new Date();

    const newRow = [currentDate, ...fieldOrder.map(field => formData[field] || '')];

    // Append the row to the sheet
    sheet.appendRow(newRow);

  } catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON);
  } finally {
    lock.releaseLock();
  }
}

Before saving the code, ensure to make two adjustments.

• Firstly, if you’ve changed your sheet name, modify the value of the sheetName variable (initially set to ‘Sheet1’) with your actual sheet name.
• Secondly, replace the value of the fieldOrder variable with your form’s actual field names, allowing you to customize the order of the data.

Once these adjustments are made, click the Save Project icon and proceed to deploy the project.

Note: You may need to click the Run icon to ensure the code is executed properly.

Generate and Copy the Web app URL

To generate a Web app URL, you must first deploy the project. Simply click the Deploy button, followed by selecting New deployment.

On the new appearing window, select the Web app deployment type.

Afterward, add the Description for this deployment, and change the Who has access option to Anyone.

After clicking the Deploy button, you’ll be prompted to authorize access to your spreadsheet data. Simply click the Authorize Access button and select your Google account. Then, grant access to the script by clicking the Advanced link → Go to “Your Project Title“.

Continue to give access to the script by clicking the Allow button then after a few seconds you will have your Web app URL ready.

Step 4: Change Divi Contact Form Action URL

Typically, information collected by the Divi contact form is delivered via email. However, by modifying the form action URL to the web app URL generated in the previous step, you can redirect the data to your spreadsheet instead.

To do so, begin by assigning a custom CSS class such as wpp_action_url to the contact form. Open the Contact Form Settings then navigate to the Advanced tab → CSS ID & Classes to make this adjustment.

Next, copy the following code snippet and paste it into the Add code to the < head > of your blog section, which you can access by returning to your WordPress dashboard. Navigate to Divi → Theme Options → Integration to find this section.

<script>
jQuery(function($) {
	$('.wpp_action_url .et_pb_contact_form').attr('action', 'Your web app URL');
});
</script>

Replace 'Your web app URL' from the code snippet with your actual web app URL.

Finally, click the Save Changes button to implement the changes to the contact form action URL.

Step 5: Redirecting after Data Input

At this point, the data you submit from your form should have been successfully delivered to your Google Sheets. However, you may notice that the form disappears from the page after clicking the submit button, requiring you to manually refresh the page to input data again.

There are two ways we will show you how to get the form after data input without the need for manual page refreshing.

Redirect to a Success Page

In this method, you’ll create a success page that notifies the user of successful data submission and then automatically redirects them to your form page. Begin by designing the page layout and determining the text you want to display to the user. Below is a basic illustration of what a success page might look like.

After finalizing the design, incorporate a Code module and insert the provided code snippet into the code editor.

  <script>
  function redirectPage() {
    window.location.href = "Your-Success-Page";
  }
  setTimeout(redirectPage, 3000); // 3000 milliseconds = 3 seconds
  </script>

Replace "Your-Success-Page" with the actual URL of your success page, and adjust the timeout duration (currently set to 3 seconds or 3000 milliseconds) according to your preferences.

Once you’ve finalized the success notification page, return to your form page editor. Open the Contact Form Settings, then navigate to the Redirect tab.

Enable the redirect option and input the URL of your success notification page into the Redirect URL field. This configuration ensures that users are redirected to the success page after submitting the form.

With that, we’ve concluded all the steps outlined in this tutorial. You can now seamlessly submit data from your Divi contact form to your Google Sheets without the hassle of manually refreshing the page.

Redirect to the Current Form Page

If you prioritize speed for subsequent data input and don’t require a prominent notification for successful data submission, you can set your current form page as the redirect URL.

This configuration allows users to quickly input additional data without any interruptions.

The Bottom Line

Integrating Divi’s contact form with Google Sheets offers businesses and website owners a powerful solution for optimizing data management. This seamless integration empowers users to efficiently collect and analyze information, transcending the form’s traditional contact function.

By following this step-by-step tutorial, you’ll unlock the potential to transform any form into a data-gathering tool, with every submission automatically recorded in a centralized Google Sheets repository, streamlining your workflow.