If you would like to send your form submissions directly to Google sheets as they are submitted, this can be done using Zapier or you can use this guide to create a custom function and your own webhook by deploying it as a web app. Follow the steps below to get started.
Step 1: Create your Google sheet
Create your Google sheet where you would like to receive your form submission and add a timestamp column as well as columns for each of your form’s fields.
Step 2: Create the custom function
From your Google sheet, select Extensions > Apps Script. Paste in the code below and save it (Ctrl + S).
N.B. This is a simple custom function created for a basic Contact Form 7 form. You will need to adjust it to match your input names in Contact form 7, Gravity Forms, or your Elementor Form.
function doPost(e) {
var values = JSON.parse(e.postData.contents);
var sheet = SpreadsheetApp.getActiveSheet();
var lastRow = Math.max(sheet.getLastRow(), 1);
sheet.insertRowAfter(lastRow);
var timestamp = new Date();
sheet.getRange(lastRow + 1, 1).setValue(timestamp);
// Adjust the below lines based on your form's input fields.
// For Elementor forms the format is (values['form_fields[name]'])
sheet.getRange(lastRow + 1, 2).setValue(values.name);
sheet.getRange(lastRow + 1, 3).setValue(values.email);
sheet.getRange(lastRow + 1, 4).setValue(values.message);
SpreadsheetApp.flush();
return HtmlService.createHtmlOutput("post request received");
}
Step 3: Deploy as a web app
-
At the top right of the script project, click Deploy > New deployment.
-
Next to “Select type,” click the gear icon and select Web app.
-
Give your web app a description and allow access for anyone.
-
Click Deploy.
Step 4: Get the webhook URL
When the deployment is complete, copy the web app URL to your clipboard and click Done.
Step 5: Add the webhook URL to your Gravity form
If you are using Contact Form 7 skip to Step 6
If you are using Elementor forms skip to Step 7
On your WordPress site go to your Gravity Form > Form Settings and paste in the webhook URL. Click “Update Form Settings”.
Step 6: Add the webhook URL to your Contact Form 7 form
On your WordPress site click Contact from the left-hand menu. Click the name of your form to edit its settings, then select the Strattic Integrations Tab and paste the webhook URL into the Zapier URL field. Then, click the “Save” button.
Step 7: Add the webhook URL to your Elementor form
From the Elementor editor, click on your form to access the Edit Form dialogue. In the Action after submit section add the webhook action, and then paste your webhook URL into the webhook section.
Step 8: Test your webhook
Test the webhook functionality on your static site by submitting the form, and you should see the form submission populate on your Google sheet.
That’s it! 🎉