So senden Sie Elementor-Formulardaten an Google Sheets

Webformulare sind ein sehr leistungsfähiges Werkzeug für die Interaktion mit Benutzern. Sie können beispielsweise den Newsletter Ihres Unternehmens abonnieren, indem sie ihre E-Mail-Adresse und andere Daten eingeben, die Sie sammeln möchten. Oder vielleicht sind Sie ein E-Commerce-Unternehmen, das ein Verkaufsauftragsformular auf Ihrer Website integrieren möchte, um es Ihren Kunden zu erleichtern. Eine andere Art von Formular, das für Ihr Unternehmen nützlich sein kann, ist ein Kundenfeedback-Formular, damit Sie besser wissen, was in Ihrem Unternehmen funktioniert und was nicht.

Elementor Pro enthält viele native Widgets. Eines der Widgets zum einfachen Erstellen eines Formulars auf Ihrer Website ist das Formular-Widget. Mit dem Formular-Widget können Sie eine Vielzahl von Formularen auf Ihrer WordPress-Website erstellen. Weitere Informationen zum Widget finden Sie in unserem vorherigen Artikel über Elementor Form Builder.

Während Elementor über eine integrierte Funktion zum Verwalten von Formularübermittlungen (Daten) verfügt, möchten Sie die Daten möglicherweise an Google Sheets senden, um Daten in einem logischen Format zu organisieren und zu kategorisieren.

In diesem Artikel zeigen wir Ihnen, wie Sie Daten von Elementor Form in Google Sheet übertragen, einem Cloud-Tabellen-Editor, der den Zugriff und die Verwendung für die Benutzer erleichtert.

Starten Sie eine neue Tabelle in Google Sheets

Sie können über Sheets.google.com mit einem kostenlosen Google-Konto (für den privaten Gebrauch) oder einem Google Workspace-Konto (für den geschäftlichen Gebrauch) auf Google Sheets zugreifen. Erstellen Sie eine neue leere Tabelle, um zu beginnen.

Öffnen Sie den Apps-Skripteditor

Früher unter dem Namen Skripteditor im Menü Extras platziert, heißt es heute Apps Script im Menü Erweiterung .

Holen Sie sich die Codes, um die Datenübertragung zu aktivieren

Um die Elementor-Formulardaten in Google Sheets übertragen zu können, müssen Sie sie zuerst mit dem folgenden Code verbinden.

 // Auf true ändern, um E-Mail-Benachrichtigungen zu aktivieren
var emailNotification = false;
var emailAddress = "Change_to_your_Email";

// DIESE NÄCHSTEN PARAMETER NICHT BEARBEITEN
var isNewSheet = falsch;
var recivedData = [];
/**
 * Dies ist eine Funktion, die ausgelöst wird, wenn die Webapp eine GET-Anforderung erhält
 * Nicht verwendet, aber erforderlich.
 */
Funktion doGet( e ) {
	return HtmlService.createHtmlOutput( "Ja, das ist die Webhook-URL, Anfrage erhalten" );
}
// Webhook-Empfänger – ausgelöst mit Formular-Webhook an veröffentlichte App-URL.
Funktion doPost( e ) {
	var params = JSON.stringify(e.parameter);
	Parameter = JSON.parse (Parameter);
	insertToSheet(params);
	// HTTP-Antwort
	return HtmlService.createHtmlOutput( "Post-Request erhalten" );
}
// Verflacht ein verschachteltes Objekt zur einfacheren Verwendung mit einer Tabellenkalkulation
Funktion flattenObject( ob ) {
	var toReturn = {};
	für ( var ich in ob ) {
		if ( ! ob.hasOwnProperty( i ) ) Continue;
		if ( ( typeof ob[ i ] ) == 'Objekt' ) {
			var flatObject = flattenObject( ob[ i ] );
			for ( var x in flatObject ) {
				if ( ! flatObject.hasOwnProperty( x ) ) Continue;
				toReturn[ i + '.' + x ] = flachesObjekt[ x ];
			}
		} anders {
			toReturn[ ich ] = ob[ ich ];
		}
	}
	zurück zuZurück;
}
// Kopfzeilen normalisieren
Funktion getHeaders (formSheet, Schlüssel) {
	var Header = [];
  
	// Vorhandene Header abrufen
    if ( ! isNewSheet ) {
	  Header = formSheet.getRange( 1, 1, 1, formSheet.getLastColumn() ).getValues()[0];
    }
	// zusätzliche Header hinzufügen
	var neueHeader = [];
	newHeaders = keys.filter( function( k ) {
		headers.indexOf( k ) > -1 zurückgeben? falsch: k;
	} );
	newHeaders.forEach( function( h ) {
		headers.push(h);
	} );
	Kopfzeilen zurückgeben;
}
// Werte normalisieren
Funktion getValues ​​(Kopfzeilen, flach) {
	var-Werte = [];
	// Push-Werte basierend auf Headern
	headers.forEach( function( h ){
		Werte.push (flach [ h ] );
	});
	Rückgabewerte;
}
// Kopfzeilen einfügen
Funktion setHeaders( Blatt, Werte ) {
	var headerRow = sheet.getRange( 1, 1, 1, values.length )
	headerRow.setValues ​​([Werte]);
	headerRow.setFontWeight( "fett" ).setHorizontalAlignment( "center" );
}
// Daten in Blatt einfügen
Funktion setValues( Blatt, Werte ) {
	var lastRow = Math.max (sheet.getLastRow(),1);
	sheet.insertRowAfter (lastRow);
	sheet.getRange( lastRow + 1, 1, 1, values.length ).setValues( [ values ​​] ).setFontWeight( "normal" ).setHorizontalAlignment( "center" );
}
// Blatt für Formular suchen oder erstellen
Funktion getFormSheet( Formularname ) {
	var Formularblatt;
	var activeSheet = SpreadsheetApp.getActiveSpreadsheet();
	// Bei Bedarf Blatt erstellen
	if ( activeSheet.getSheetByName( formName ) == null ) {
      formSheet = activeSheet.insertSheet();
      formSheet.setName( formName );
      isNewSheet = wahr;
	}
	activeSheet.getSheetByName (formName) zurückgeben;
}

// magische Funktion, wo alles passiert
Funktion insertToSheet( Daten ){
	var flat = flattenObject( data );
	var keys = Object.keys(flach);
	var formName = data["form_name"];
	var formSheet = getFormSheet( formName );
	var headers = getHeaders( formSheet, keys );
	var values ​​= getValues( headers, flat );
	setHeaders(formSheet, Header);
	setValues ​​(formSheet, Werte);
	
    if ( emailBenachrichtigung ) {
		sendNotification( data, getSeetURL() );
	}
}
Funktion getSeetURL() {
  var Tabellenkalkulation = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = tabellenkalkulation.getActiveSheet();
  Spreadsheet.getUrl zurückgeben ();
}
Funktion sendNotification( Daten, URL ) {
	var subject = "Eine neue Elementor Pro Froms-Einreichung wurde in Ihr Blatt eingefügt";
  var message = "Eine neue Einreichung wurde über das Formular " + data['form_name'] + " empfangen und in Ihr Google-Blatt eingefügt unter: " + url;
	MailApp.sendEmail( E-Mail-Adresse, Betreff, Nachricht, {
		name: 'Automatisches E-Mail-Skript'
	} );
}

Kredit für den Code an bainternet.

Löschen Sie den gesamten Code und fügen Sie den Code ein

Nachdem Sie den Code erhalten haben, fügen Sie ihn in den Apps-Skripteditor ein und löschen Sie zuerst den gesamten vorhandenen Code, damit er funktioniert.

Benennen Sie das Projekt um und speichern Sie die Änderungen

Sobald der Code fertig ist, können Sie den Skripttitel umbenennen und dann auf die Schaltfläche Speichern klicken .

Stellen Sie das Skript bereit und kopieren Sie die Web-App-URL

Nachdem die Änderung gespeichert wurde, stellen wir das Skript bereit, indem wir auf die Schaltfläche Bereitstellen klicken und aus den Optionen Neue Bereitstellung auswählen.

Klicken Sie im erscheinenden Fenster auf das Zahnradsymbol , und wählen Sie die Option Web-App aus.

Ändern Sie im neu erscheinenden Formular den Zugriff auf Jeder und klicken Sie auf die Schaltfläche Bereitstellen .

Wenn die Bereitstellung des Skripts irgendwie um Erlaubnis für den Zugriff auf Ihre Tabelle bittet, autorisieren Sie bitte den Zugriff, damit das Skript die Daten in Ihre Tabelle schreiben kann.

Kopieren Sie nach erfolgreicher Bereitstellung des Skripts die Web-App- URL.

Fügen Sie die Web-App-URL in die Elementor-Formular-Webhook-Einstellung ein

Klicken Sie im Elementor-Editor auf das Formular, das Sie mit dem Google-Blatt verbinden möchten, es öffnet die Formulareinstellung auf der linken Seite des Editors, scrollen Sie dann nach unten und klicken Sie auf den Block „ Aktion nach Absenden“ – Webhook- Aktion hinzufügen – und öffnet dann ein neues Webhook- Block unten, wenn Sie darauf klicken, erhalten Sie ein URL-Feld zum Platzieren des kopierten Web-App-Links.

Okay, das war's, Sie können das Formular testen, indem Sie das Textfeld ausfüllen und auf die Schaltfläche "Senden" klicken.

Wir haben das von uns erstellte Formular getestet, indem wir das Formular ausgefüllt und dreimal auf die Schaltfläche „Senden“ geklickt haben.

Auf dem Google-Blatt erstellt der Code ein neues Blatt unter dem Namen des Formulars auf Elementor. Wir haben das Formular in google sheet umbenannt , und der neue Blattname ist derselbe.

Auf dem neu erstellten Blatt sind alle Daten, die wir aus dem Elementor-Formular senden, vorhanden, ohne dass überhaupt Daten fehlen.

Etwas zusammenfassen

Webformulare sind ein nützliches Werkzeug, um bestimmte Informationen von Ihren Website-Besuchern zu verfolgen. Und sie sind wahrscheinlich eines der wichtigsten Elemente auf Ihrer Website, wenn es darum geht, Ihre Ziele zu erreichen. Indem wir das Formular mit unserem Google-Blatt verbinden, können wir Daten in einem logischen Format organisieren und kategorisieren. Sobald diese Daten in die Tabelle eingegeben wurden, können wir sie verwenden, um unser Geschäft zu organisieren und auszubauen.