Jak wysłać dane formularza Elementor do Arkuszy Google

Formularze internetowe są bardzo potężnym narzędziem do interakcji z użytkownikami, na przykład mogą zapisać się do biuletynu Twojej firmy, wprowadzając swój adres e-mail i wszelkie inne dane, które chcesz zebrać. A może jesteś firmą e-commerce, która chce umieścić formularz zamówienia sprzedaży na swojej stronie internetowej jako udogodnienie dla swoich klientów. Innym rodzajem formularza, który może być przydatny w Twojej firmie, jest formularz opinii klientów, dzięki któremu możesz uzyskać lepszą wiedzę na temat tego, co działa, a co nie jest w Twojej firmie.

Elementor Pro zawiera wiele natywnych widżetów, jednym z widżetów do łatwego tworzenia formularzy w witrynie jest widżet Formularz. Dzięki widżetowi Formularz możesz tworzyć różnego rodzaju formularze w swojej witrynie WordPress. Aby uzyskać więcej informacji na temat widżetu, możesz zapoznać się z naszym poprzednim artykułem na temat Kreatora formularzy Elementor.

Chociaż Elementor ma wbudowaną funkcję zarządzania przesyłaniem formularzy (danymi), możesz chcieć wysłać dane do Arkuszy Google, aby uporządkować i skategoryzować dane w formacie logicznym.

W tym artykule pokażemy, jak pobrać dane z Elementor Form do Arkusza Google, który jest edytorem arkuszy kalkulacyjnych w chmurze, który ułatwia użytkownikom dostęp i korzystanie z niego.

Rozpocznij nowy arkusz kalkulacyjny w Arkuszach Google

Możesz uzyskać dostęp do arkuszy Google ze strony Sheets.google.com za pomocą bezpłatnego konta Google (do użytku osobistego) lub konta Google Workspace (do użytku biznesowego). Aby rozpocząć, utwórz nowy pusty arkusz kalkulacyjny.

Otwórz Edytor skryptów aplikacji

Wcześniej umieszczany w menu Narzędzia przez edytor skryptów nazw, obecnie nazywa się Apps Script w menu Rozszerzenie .

Uzyskaj kody, aby umożliwić transfer danych

Aby móc przenieść dane formularza Elementora do Arkuszy Google, musisz je najpierw połączyć za pomocą następującego kodu.

 // Zmień na true, aby włączyć powiadomienia e-mail
var emailNotification = false;
var adres e-mail = "Zmień_na_twój_e-mail";

// NIE EDYTUJ KOLEJNYCH PARAMETRÓW
var isNewSheet = false;
var odebraneDane = [];
/**
 * jest to funkcja, która uruchamia się, gdy aplikacja internetowa otrzyma żądanie GET
 * Nieużywane, ale wymagane.
 */
funkcja get( e ) {
	return HtmlService.createHtmlOutput( "Tak, to jest adres URL webhooka, żądanie odebrane" );
}
// Odbiornik webhooka — wyzwalany przez webhook formularza do opublikowanego adresu URL aplikacji.
funkcja doPost( e ) {
	var parametry = JSON.stringify(e.parametr);
	parametry = JSON.parse(parametry);
	wstawDoArkusza(parametry);
	// Odpowiedź HTTP
	return HtmlService.createHtmlOutput( "otrzymano żądanie post" );
}
// Spłaszcza zagnieżdżony obiekt w celu łatwiejszego użycia w arkuszu kalkulacyjnym
function flattenObject( ob ) {
	var toReturn = {};
	for ( var i in ob ) {
		if ( ! ob.hasOwnProperty( i ) ) kontynuuj;
		if ( ( typ obiektu[ i ] ) == 'obiekt' ) {
			var flatObject = flattenObject( ob[ i ] );
			for ( var x in flatObject ) {
				if ( ! flatObject.hasOwnProperty( x ) ) kontynuuj;
				do zwrotu[ i + '.' + x ] = obiekt płaski[ x ];
			}
		} w przeciwnym razie {
			toReturn[i] = ob[i];
		}
	}
	powrót do Zwrotu;
}
// normalizuj nagłówki
function getHeaders( formSheet, keys ) {
	var nagłówki = [];
  
	// pobierz istniejące nagłówki
    if (! isNewSheet) {
	  headers = formSheet.getRange( 1, 1, 1, formSheet.getLastColumn() ).getValues()[0];
    }
	// dodaj dodatkowe nagłówki
	var nowe nagłówki = [];
	newHeaders = keys.filter( function( k ) {
		return headers.indexOf( k ) > -1 ? fałsz : k;
	} );
	newHeaders.forEach( function( h ) {
		nagłówki.push( h );
	} );
	nagłówki zwrotne;
}
// normalizuj wartości
function getValues( headers, flat ) {
	wartości zmiennych = [];
	// wypychanie wartości na podstawie nagłówków
	headers.forEach( function( h ){
		wartości.push( flat[ h ] );
	});
	zwracać wartości;
}
// Wstaw nagłówki
funkcja setHeaders( arkusz, wartości ) {
	var headerRow = sheet.getRange( 1, 1, 1, values.length )
	headerRow.setValues( [ wartości ] );
	headerRow.setFontWeight( "pogrubienie" ).setHorizontalAlignment( "środek" );
}
// Wstaw dane do arkusza
funkcja setValues( arkusz, wartości ) {
	var lastRow = Math.max(sheet.getLastRow(),1 );
	sheet.insertRowAfter(ostatniRow);
	sheet.getRange( lastRow + 1, 1, 1, wartości.długość ).setValues( [ wartości ] ).setFontWeight( "normalny" ).setHorizontalAlignment( "środek" );
}
// Znajdź lub utwórz arkusz dla formularza
function getFormSheet(formName) {
	var formArkusz;
	var activeSheet = Aplikacja Arkusza kalkulacyjnego.getActiveSpreadsheet();
	// w razie potrzeby utwórz arkusz
	if ( activeSheet.getSheetByName(formName) == null ) {
      formSheet = activeSheet.insertSheet();
      FormArkusz.ZestawNazwa(FormularzNazwa);
      isNewSheet = prawda;
	}
	return activeSheet.getSheetByName(formName);
}

// magiczna funkcja, w której wszystko się dzieje
function insertToSheet( dane ){
	var flat = flattenObject( dane );
	var klucze = Object.keys( flat );
	var nazwaformy = dane["nazwa_formularza"];
	var formSheet = getFormSheet(formName );
	var headers = getHeaders(formSheet, keys );
	var wartości = getValues(nagłówki, płaskie);
	setHeaders(formArkusz, nagłówki);
	setValues(formSheet, wartości);
	
    jeśli (powiadomienie e-mail) {
		sendNotification( dane, getSeetURL() );
	}
}
funkcja getSeetURL() {
  var arkusz kalkulacyjny = SpreadsheetApp.getActiveSpreadsheet();
  var arkusz = arkusz kalkulacyjny.getActiveSheet();
  return arkusz kalkulacyjny.getUrl();
}
funkcja sendNotification( dane, url ) {
	var subject = "Nowa podpowiedź Elementor Pro Froms została wstawiona do Twojego arkusza";
  var message = "Nowe zgłoszenie zostało odebrane przez formularz " + data['form_name'] + " i wstawione do arkusza Google pod adresem: " + url;
	MailApp.sendEmail( adres e-mail, temat, wiadomość, {
		nazwa: „Automatyczny skrypt e-maila”
	} );
}

Kredyt na kod do bainternet.

Wyczyść cały kod i wklej kod

Po otrzymaniu kodu wklej go w edytorze Apps Script, najpierw wyczyść cały istniejący kod, aby działał.

Zmień nazwę projektu i zapisz zmiany

Gdy kod będzie gotowy, możesz zmienić nazwę skryptu, a następnie kliknąć przycisk Zapisz .

Wdróż skrypt i skopiuj adres URL aplikacji internetowej

Po zapisaniu zmiany wdróżmy skrypt, klikając przycisk Wdróż i wybierając z opcji Nowe wdrożenie .

W wyświetlonym oknie kliknij ikonę koła zębatego i wybierz opcję Aplikacja internetowa .

Na nowo pojawiającym się formularzu zmień dostęp na Każdy i kliknij przycisk Wdróż .

Jeśli w jakiś sposób wdrożenie skryptu prosi o pozwolenie na dostęp do arkusza kalkulacyjnego, autoryzuj jego dostęp, aby skrypt mógł zapisywać dane w arkuszu kalkulacyjnym.

Po pomyślnym wdrożeniu skryptu skopiuj adres URL aplikacji sieci Web .

Wklej adres URL aplikacji internetowej do ustawienia Webhooka Elementor Form

W edytorze Elementor kliknij formularz, który chcesz połączyć z arkuszem Google, otworzy się ustawienie formularza w lewym panelu edytora, a następnie przewiń w dół i kliknij blok Action After Submit — Add Webhook — a następnie otworzy nowy Poniższy blok Webhook , kliknięcie go spowoduje wyświetlenie pola adresu URL do umieszczenia skopiowanego linku do aplikacji internetowej.

Ok, to wszystko, możesz przetestować formularz wypełniając pole tekstowe i klikając przycisk wyślij.

Stworzony przez nas formularz przetestowaliśmy, wypełniając go i klikając 3 razy przycisk wyślij.

W arkuszu Google kod utworzy nowy arkusz pod nazwą formularza na Elementorze. Nazwaliśmy formularz google sheet , a nazwa nowego arkusza jest taka sama.

Na nowo utworzonym arkuszu znajdują się wszystkie dane, które wysyłamy z formularza Elementor, bez pominięcia żadnych danych.

Podsumowując

Formularze internetowe to przydatne narzędzie do śledzenia określonych informacji od odwiedzających witrynę. I są prawdopodobnie jednym z najważniejszych elementów na Twojej stronie, jeśli chodzi o osiąganie celów. Łącząc formularz z naszym arkuszem Google, możemy organizować i kategoryzować dane w logiczny format. Po wprowadzeniu tych danych do arkusza kalkulacyjnego możemy je wykorzystać do organizacji i rozwoju naszej działalności.