How to Send Elementor Form Data to Google Sheets

Web forms are a very powerful tool for interacting with users, for instance, they can subscribe to your company’s newsletter by entering their email address and any other data you wish to collect. Or perhaps you are an e-commerce company that wants to include a sales order form on your website as a convenience to your customers. Another type of form that may be useful to your business is including a customer feedback form so that you can gain better knowledge of what is working and what is not in your business.

Elementor Pro comes with many native widgets, one of the widgets to create a form easily on your website is the Form widget. With the Form widget, you can create a wide range type of forms on your WordPress website. For more information about the widget, you can check our previous article about Elementor Form Builder.

While Elementor has a built-in feature to manage form submissions (data), you might want to send the data to Google Sheets to organize and categorize data into a logical format.

In this article, we will show you how to get data from Elementor Form into Google Sheet which is a cloud spreadsheet editor that makes it easy to access and use for the users.

Start a New Spreadsheet in Google Sheets

You can access google sheets from sheets.google.com using a free Google account (for personal use) or a Google Workspace account (for business use). Create a new blank spreadsheet to get started.

Open the Apps Script Editor

Previously placed under Tools menu by the name script editor, nowadays it called Apps Script under Extension menu.

Get the Code to Enable the Data Transfer

To be able to transfer the Elementor form data to Google Sheets, you need to connect them first using the following code.

// Change to true to enable email notifications
var emailNotification = false;
var emailAddress = "Change_to_your_Email";

// DO NOT EDIT THESE NEXT PARAMS
var isNewSheet = false;
var recivedData = [];
/**
 * this is a function that fires when the webapp receives a GET request
 * Not used but required.
 */
function doGet( e ) {
	return HtmlService.createHtmlOutput( "Yepp this is the webhook URL, request received" );
}
// Webhook Receiver - triggered with form webhook to pusblished App URL.
function doPost( e ) {
	var params = JSON.stringify(e.parameter);
	params = JSON.parse(params);
	insertToSheet(params);
	// HTTP Response
	return HtmlService.createHtmlOutput( "post request received" );
}
// Flattens a nested object for easier use with a spreadsheet
function flattenObject( ob ) {
	var toReturn = {};
	for ( var i in ob ) {
		if ( ! ob.hasOwnProperty( i ) ) continue;
		if ( ( typeof ob[ i ] ) == 'object' ) {
			var flatObject = flattenObject( ob[ i ] );
			for ( var x in flatObject ) {
				if ( ! flatObject.hasOwnProperty( x ) ) continue;
				toReturn[ i + '.' + x ] = flatObject[ x ];
			}
		} else {
			toReturn[ i ] = ob[ i ];
		}
	}
	return toReturn;
}
// normalize headers
function getHeaders( formSheet, keys ) {
	var headers = [];
  
	// retrieve existing headers
    if ( ! isNewSheet ) {
	  headers = formSheet.getRange( 1, 1, 1, formSheet.getLastColumn() ).getValues()[0];
    }
	// add any additional headers
	var newHeaders = [];
	newHeaders = keys.filter( function( k ) {
		return headers.indexOf( k ) > -1 ? false : k;
	} );
	newHeaders.forEach( function( h ) {
		headers.push( h );
	} );
	return headers;
}
// normalize values
function getValues( headers, flat ) {
	var values = [];
	// push values based on headers
	headers.forEach( function( h ){
		values.push( flat[ h ] );
	});
	return values;
}
// Insert headers
function setHeaders( sheet, values ) {
	var headerRow = sheet.getRange( 1, 1, 1, values.length )
	headerRow.setValues( [ values ] );
	headerRow.setFontWeight( "bold" ).setHorizontalAlignment( "center" );
}
// Insert Data into Sheet
function setValues( sheet, values ) {
	var lastRow = Math.max( sheet.getLastRow(),1 );
	sheet.insertRowAfter( lastRow );
	sheet.getRange( lastRow + 1, 1, 1, values.length ).setValues( [ values ] ).setFontWeight( "normal" ).setHorizontalAlignment( "center" );
}
// Find or create sheet for form
function getFormSheet( formName ) {
	var formSheet;
	var activeSheet = SpreadsheetApp.getActiveSpreadsheet();
	// create sheet if needed
	if ( activeSheet.getSheetByName( formName ) == null ) {
      formSheet = activeSheet.insertSheet();
      formSheet.setName( formName );
      isNewSheet = true;
	}
	return activeSheet.getSheetByName( formName );
}

// magic function where it all happens
function insertToSheet( data ){
	var flat = flattenObject( data );
	var keys = Object.keys( flat );
	var formName = data["form_name"];
	var formSheet = getFormSheet( formName );
	var headers = getHeaders( formSheet, keys );
	var values = getValues( headers, flat );
	setHeaders( formSheet, headers );
	setValues( formSheet, values );
	
    if ( emailNotification ) {
		sendNotification( data, getSeetURL() );
	}
}
function getSeetURL() {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getActiveSheet();
  return spreadsheet.getUrl();
}
function sendNotification( data, url ) {
	var subject = "A new Elementor Pro Froms subbmition has been inserted to your sheet";
  var message = "A new subbmition has been recived via " + data['form_name'] + " form and inserted into your Google sheet at: " + url;
	MailApp.sendEmail( emailAddress, subject, message, {
		name: 'Automatic Emailer Script'
	} );
}

Credit for the code to bainternet.

Clear All Code and Paste the Code

After you get the code, paste it in the Apps Script editor, clear all existing code first to make it works.

Rename the Project and Save the Changes

Once the code is ready, you can rename the script title, then click save button .

Deploy the Script and Copy the Web App URL

After the change is saved, then let’s deploy the script by clicking the Deploy button and selecting New deployment from the options.

On the appearing window click the gear icon , and choose the Web app option.

On the newly appearing form change the access to Anyone and click the Deploy button.

If somehow the deployment of the script is asking for permission for accessing your spreadsheet, please Authorize its access to make the script is able to write the data on your spreadsheet.

After the deployment of the script is successful, copy the Web app URL.

Paste the Web App URL into Elementor Form Webhook Setting

On Elementor editor, click the form you want to connect with Google sheet, it will open the form setting on the left panel of the editor, then scroll down and click on the Action After Submit block — Add Webhook action — it then opens a new Webhook block below, clicking on it will give you a URL field for placing the copied web app link.

Okay, that’s it, you can test the form by filling in the text field and clicking the send button.

We tested the form we created by filling in the form and clicking the send button 3 times.

On Google sheet, the code will make a new sheet under the name of the form on Elementor. We named the form to google sheet, and the new sheet name is the same.

On the newly created sheet, the data we send from the Elementor form is all there, without missing any data at all.

The Bottom Line

Web forms are a useful tool for tracking certain information from your website visitors. And they are probably one of the most important elements on your website when it comes to achieving your goals. By connecting the form to our Google sheet, we can organize and categorize data into a logical format. Once this data is entered into the spreadsheet, we can use it to help organize and grow our business.