Elementor Form Verileri Google E-Tablolara Nasıl Gönderilir?

Web formları, kullanıcılarla etkileşim kurmak için çok güçlü bir araçtır; örneğin, e-posta adreslerini ve toplamak istediğiniz diğer verileri girerek şirketinizin haber bültenine abone olabilirler. Belki de müşterilerinize kolaylık olması için web sitenize satış siparişi formu eklemek isteyen bir e-ticaret firmasısınız. İşletmeniz için faydalı olabilecek başka bir form türü, işletmenizde neyin işe yarayıp neyin yaramadığı konusunda daha iyi bilgi sahibi olabilmeniz için bir müşteri geri bildirim formu eklemektir.

Elementor Pro birçok yerel widget ile birlikte gelir, web sitenizde kolayca form oluşturmak için kullanılan widget'lardan biri Form widget'ıdır. Form widget'ı ile WordPress web sitenizde çok çeşitli form türleri oluşturabilirsiniz. Widget hakkında daha fazla bilgi için Elementor Form Builder hakkındaki önceki makalemize göz atabilirsiniz.

Elementor, form gönderimlerini (verileri) yönetmek için yerleşik bir özelliğe sahip olsa da, verileri organize etmek ve mantıksal bir biçimde kategorilere ayırmak için verileri Google E-Tablolar'a göndermek isteyebilirsiniz.

Bu makalede, Elementor Form'dan, kullanıcılar için erişimi ve kullanımı kolaylaştıran bir bulut elektronik tablo düzenleyicisi olan Google Sheet'e nasıl veri alacağınızı göstereceğiz.

Google E-Tablolar'da Yeni Bir E-Tablo Başlatın

Google sayfalarına ücretsiz bir Google hesabı (kişisel kullanım için) veya bir Google Workspace hesabı (iş amaçlı kullanım için) kullanarak Sheets.google.com adresinden erişebilirsiniz. Başlamak için yeni bir boş e-tablo oluşturun.

Apps Komut Dosyası Düzenleyicisini açın

Önceden, komut dosyası düzenleyicisi tarafından Araçlar menüsü altına yerleştirilmiş, günümüzde Uzantı menüsü altında Apps Komut Dosyası olarak adlandırılmıştır.

Veri Aktarımını etkinleştirmek için Kodları Alın

Elementor form verilerini Google E-Tablolar'a aktarabilmek için önce aşağıdaki kodu kullanarak bunları bağlamanız gerekir.

 // E-posta bildirimlerini etkinleştirmek için true olarak değiştirin
var emailNotification = false;
var emailAddress = "Change_to_your_Email";

// BU SONRAKİ PARAMLARI DÜZENLEMEYİN
var isNewSheet = false;
var recivedData = [];
/**
 * bu, web uygulaması bir GET isteği aldığında tetiklenen bir işlevdir
 * Kullanılmaz ancak gereklidir.
 */
işlev doGet( e ) {
	return HtmlService.createHtmlOutput("Evet, bu webhook URL'sidir, istek alındı");
}
// Web kancası Alıcısı - yayınlanan Uygulama URL'sine web kancası formuyla tetiklendi.
işlev doPost( e ) {
	var params = JSON.stringify(e.parameter);
	parametreler = JSON.parse(paramlar);
	insertToSheet(paramlar);
	// HTTP Yanıtı
	dönüş HtmlService.createHtmlOutput("istek gönderildi");
}
// Elektronik tabloyla daha kolay kullanım için yuvalanmış bir nesneyi düzleştirir
function flattenObject( ob ) {
	var toReturn = {};
	for ( var i in ob ) {
		eğer ( ! ob.hasOwnProperty( i ) ) devam ederse;
		if ( ( typeof ob[ i ] ) == 'nesne' ) {
			var flatObject = flattenObject( ob[ i ] );
			for ( flatObject içinde var x ) {
				eğer ( ! flatObject.hasOwnProperty( x ) ) devam ederse;
				toReturn[ ben + '.' + x ] = flatObject[ x ];
			}
		} başka {
			toReturn[ ben ] = ob[ ben ];
		}
	}
	Dönüş'e dönüş;
}
// başlıkları normalleştir
function getHeaders(formSheet,keys ) {
	var başlıklar = [];
  
	// mevcut başlıkları al
    if ( !isNewSheet ) {
	  başlıklar = formSheet.getRange( 1, 1, 1, formSheet.getLastColumn() ).getValues()[0];
    }
	// herhangi bir ek başlık ekleyin
	var newHeaders = [];
	newHeaders = tuşlar.filtre( işlev( k ) {
		dönüş headers.indexOf( k ) > -1 ? yanlış: k;
	} );
	newHeaders.forEach( işlev( h ) {
		headers.push(h);
	} );
	dönüş başlıkları;
}
// değerleri normalleştir
function getValues(başlıklar, düz ) {
	var değerler = [];
	// üstbilgilere dayalı değerleri itin
	headers.forEach( fonksiyon( h ){
		değerler.push( düz[ h ]);
	});
	dönüş değerleri;
}
// Başlıkları ekle
function setHeaders( sayfa, değerler ) {
	var headerRow = sayfa.getRange( 1, 1, 1, değerler.uzunluk )
	headerRow.setValues([değerler]);
	headerRow.setFontWeight("kalın" ).setHorizontalAlignment("orta");
}
// Verileri Sayfaya Ekle
function setValues( sayfa, değerler ) {
	var lastRow = Math.max(sheet.getLastRow(),1 );
	sayfa.insertRowAfter( lastRow );
	tabaka.getRange( lastRow + 1, 1, 1, değerler.uzunluk ).setValues( [ değerler ] ).setFontWeight( "normal" ).setHorizontalAlignment( "merkez" );
}
// Form için sayfa bul veya oluştur
function getFormSheet( formName ) {
	var formSheet;
	var activeSheet = SpreadsheetApp.getActiveSpreadsheet();
	// gerekirse sayfa oluştur
	if ( activeSheet.getSheetByName( formName ) == null ) {
      formSheet = activeSheet.insertSheet();
      formSheet.setName(formName);
      isNewSheet = doğru;
	}
	activeSheet.getSheetByName( formName );
}

// her şeyin olduğu sihirli fonksiyon
function insertToSheet( veri ){
	var flat = flattenObject( data );
	var tuşları = Object.keys( düz );
	var formName = data["form_name"];
	var formSheet = getFormSheet( formName );
	var headers = getHeaders(formSheet,keys);
	var değerler = getValues(başlıklar, düz);
	setHeaders (formSheet, başlıklar);
	setValues(formSheet,değerler);
	
    if (emailBildirim) {
		sendNotification(veri, getSeetURL());
	}
}
function getSeetURL() {
  var elektronik tablo = SpreadsheetApp.getActiveSpreadsheet();
  var sayfa = spreadsheet.getActiveSheet();
  elektronik tabloyu döndür.getUrl();
}
function sendNotification( veri, url ) {
	var konu = "Sayfanıza yeni bir Elementor Pro Froms gönderimi eklendi";
  var message = "" + data['form_name'] + " formu aracılığıyla yeni bir başvuru alındı ​​ve şu adresteki Google sayfanıza eklendi: " + url;
	MailApp.sendEmail( emailAddress, konu, mesaj, {
		ad: 'Otomatik E-posta Gönderici Komut Dosyası'
	} );
}

Bainternet kodu için kredi.

Tüm Kodu Temizle ve Kodu Yapıştır

Kodu aldıktan sonra, Apps Komut Dosyası düzenleyicisine yapıştırın, çalışması için önce mevcut tüm kodu temizleyin.

Projeyi Yeniden Adlandırın ve Değişiklikleri Kaydedin

Kod hazır olduğunda, komut dosyası başlığını yeniden adlandırabilir ve ardından kaydet düğmesine tıklayabilirsiniz. .

Komut Dosyasını Dağıtın ve Web uygulaması URL'sini Kopyalayın

Değişiklik kaydedildikten sonra, Dağıt düğmesine tıklayıp seçeneklerden Yeni dağıtım'ı seçerek betiği dağıtalım.

Görünen pencerede dişli simgesine tıklayın tıklayın ve Web uygulaması seçeneğini belirleyin.

Yeni görünen formda, Herkes erişimini değiştirin ve Dağıt düğmesini tıklayın.

Komut dosyasının dağıtımı bir şekilde elektronik tablonuza erişmek için izin istiyorsa, komut dosyasının verileri elektronik tablonuza yazabilmesi için lütfen erişimi yetkilendirin.

Komut dosyasının dağıtımı başarılı olduktan sonra Web uygulaması URL'sini kopyalayın.

Web Uygulaması URL'sini Elementor Form Webhook Ayarına yapıştırın

Elementor düzenleyicide, Google sayfasına bağlanmak istediğiniz formu tıklayın, düzenleyicinin sol panelindeki form ayarını açacak, ardından aşağı kaydırıp Gönderdikten Sonra Eylem bloğuna tıklayın - Web kancası eylemi ekle - ardından yeni bir Aşağıdaki Web kancası bloğu, üzerine tıklamak, kopyalanan web uygulaması bağlantısını yerleştirmek için size bir URL alanı verecektir.

Tamam bu kadar, metin alanını doldurup gönder butonuna tıklayarak formu test edebilirsiniz.

Oluşturduğumuz formu formu doldurup 3 defa gönder butonuna tıklayarak test ettik.

Google sayfasında, kod, Elementor'daki formun adı altında yeni bir sayfa oluşturacaktır. Formu google sayfası olarak adlandırdık ve yeni sayfa adı aynı.

Yeni oluşturulan sayfada, Elementor formundan gönderdiğimiz tüm veriler hiçbir veriyi kaçırmadan oradadır.

Özetlersek

Web formları, web sitenizin ziyaretçilerinden gelen belirli bilgileri izlemek için kullanışlı bir araçtır. Ve hedeflerinize ulaşma konusunda muhtemelen web sitenizdeki en önemli unsurlardan biridir. Formu Google sayfamıza bağlayarak verileri organize edebilir ve mantıksal bir biçimde kategorilere ayırabiliriz. Bu veriler elektronik tabloya girildiğinde, işimizi organize etmeye ve büyütmeye yardımcı olmak için kullanabiliriz.