Elementor Export Form Data to Google Sheet Easily

Table of Contents

In this article you will learn how to easily submit form data from Elementor to Google sheets directly without any plugin or external service.

As in this short video example:

Watch the video tutorial, or keep reading!

First, create your Google Sheet

Create a new Google Sheet as you normally would.

Elementor Export Form Data to Google Sheet Easily 1

Then, open the Script Editor

Open the script editor in Google Sheets.

Go to Tools and the click on Script Editor.

Elementor Export Form Data to Google Sheet Easily 2

Copy this code to enable the Elementor Form to Google Sheet data transfer

Credits for the code to this GitHub.

 /* Google app-script to utilise Elementor Pro Forms webhook
 * From : https://github.com/pojome/elementor/issues/5894
 */
var emailNotification = false; /* Change to true to enable email notifications */
var emailAddress = "youremail@email.com"; /* EDIT this to your email */



// DO NOT EDIT THESE NEXT PARAMS
var isNewSheet = false;
var receivedData = [];

/**
 * this is a function that fires when the webapp receives a GET request
 * Not used but required.
 */
function doGet( e ) {
	return HtmlService.createHtmlOutput( "Yep this is the webhook URL, request received" );
}

// Webhook Receiver - triggered with form webhook to published 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 );
}


// key 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 Forms submission has been inserted to your sheet";
  var message = "A new submission has been received via " + data['form_name'] + " form and inserted into your Google sheet at: " + url;
	MailApp.sendEmail( emailAddress, subject, message, {
		name: 'Automatic Emailer Script'
	} );
}

Paste the code inside the Google Script Editor in the Code.gs file
Elementor Export Form Data to Google Sheet Easily 3
Then 1. Click on the title to rename the Script and 2. Click on the disk to Save the changes.
Elementor Export Form Data to Google Sheet Easily 4

Now, deploy the Script to make the google Sheet ready to receive Elementor Form data

Using New UI (02-2021):

  1. Click the deploy button > New deployment
  2. Click on the gear icon close to 'Select type', choose Web app
  3. Under 'who has access', select 'Anyone'
  4. Click the 'Deploy' button in the lower right corner
  5. Follow the on screen instructions to give permission
  6. Copy the Web app URL

In case you see a different UI (legacy), click here to see the video instruction for that one.

After deploying copy the Web app URL.

Add the action after submit 'Webhook' to your Elementor form

This is what will link it to the google Sheet.

Under the Actions After Submit dropdown add Webhook and paste the copied Web app URL in WebHook URL under the Webhook options.

Finally, make a test by submitting a filled form

Now you can submit data in Elementor form and the data should automatically get synced to your Google Sheet.

You can cleanup and organize your Google sheet.

By deleting the useless 'Sheet1', and re ordering your columns, it makes it much easier to have the information you want, right at the start of the sheet.

You can now submit form data from Elementor Forms to Google Sheets directly without Zapier or any other third party tools. Enjoy!

Comments