Cara Mengirim Data Formulir Elementor ke Google Spreadsheet

Formulir web adalah alat yang sangat ampuh untuk berinteraksi dengan pengguna, misalnya, mereka dapat berlangganan buletin perusahaan Anda dengan memasukkan alamat email mereka dan data lain yang ingin Anda kumpulkan. Atau mungkin Anda adalah perusahaan e-commerce yang ingin menyertakan formulir pesanan penjualan di situs web Anda sebagai kemudahan bagi pelanggan Anda. Jenis formulir lain yang mungkin berguna untuk bisnis Anda adalah menyertakan formulir umpan balik pelanggan sehingga Anda dapat memperoleh pengetahuan yang lebih baik tentang apa yang berhasil dan apa yang tidak dalam bisnis Anda.

Elementor Pro hadir dengan banyak widget asli, salah satu widget untuk membuat formulir dengan mudah di situs web Anda adalah widget Formulir. Dengan widget Formulir, Anda dapat membuat berbagai jenis formulir di situs web WordPress Anda. Untuk informasi lebih lanjut tentang widget, Anda dapat memeriksa artikel kami sebelumnya tentang Elementor Form Builder.

Meskipun Elementor memiliki fitur bawaan untuk mengelola pengiriman formulir (data), Anda mungkin ingin mengirim data ke Google Spreadsheet untuk mengatur dan mengkategorikan data ke dalam format logis.

Pada artikel ini, kami akan menunjukkan kepada Anda cara memasukkan data dari Elementor Form ke Google Sheet yang merupakan editor spreadsheet cloud yang memudahkan akses dan penggunaan bagi pengguna.

Mulai Spreadsheet Baru di Google Spreadsheet

Anda dapat mengakses google sheets dari sheets.google.com menggunakan akun Google gratis (untuk penggunaan pribadi) atau akun Google Workspace (untuk penggunaan bisnis). Buat spreadsheet kosong baru untuk memulai.

Buka Editor Skrip Aplikasi

Sebelumnya ditempatkan di bawah menu Alat dengan nama editor skrip, sekarang disebut Skrip Aplikasi di bawah menu Ekstensi .

Dapatkan Kode Untuk mengaktifkan Transfer Data

Untuk dapat mentransfer data formulir Elementor ke Google Spreadsheet, Anda harus menghubungkannya terlebih dahulu menggunakan kode berikut.

 // Ubah ke true untuk mengaktifkan notifikasi email
var emailNotifikasi = salah;
var emailAddress = "Ubah_ke_Email_anda";

// JANGAN EDIT PARAMS BERIKUTNYA INI
var isNewSheet = salah;
var diterimaData = [];
/**
 * ini adalah fungsi yang diaktifkan ketika aplikasi web menerima permintaan GET
 * Tidak digunakan tetapi diperlukan.
 */
fungsi doGet( e ) {
	return HtmlService.createHtmlOutput("Ya, ini adalah URL webhook, permintaan diterima");
}
// Penerima Webhook - dipicu dengan formulir webhook ke URL Aplikasi yang diterbitkan.
fungsi doPost( e ) {
	var params = JSON.stringify(e.parameter);
	params = JSON.parse(params);
	insertToSheet(params);
	// Respon HTTP
	return HtmlService.createHtmlOutput("permintaan kiriman diterima");
}
// Meratakan objek bersarang agar lebih mudah digunakan dengan spreadsheet
fungsi flattenObject( ob ) {
	var toReturn = {};
	untuk ( var i di ob ) {
		jika ( ! ob.hasOwnProperty( i ) ) lanjutkan;
		if ( ( typeof ob[ i ] ) == 'objek' ) {
			var flatObject = flattenObject( ob[i ] );
			untuk ( var x di flatObject ) {
				jika ( ! flatObject.hasOwnProperty( x ) ) lanjutkan;
				untukKembali[ i + '.' + x ] = objek datar[ x ];
			}
		} lain {
			toReturn[ i ] = ob[ i ];
		}
	}
	kembali keKembali;
}
// menormalkan header
function getHeaders( formSheet, keys ) {
	var header = [];
  
	// mengambil header yang ada
    jika ( ! isNewSheet ) {
	  header = formSheet.getRange( 1, 1, 1, formSheet.getLastColumn() ).getValues()[0];
    }
	// tambahkan header tambahan apa pun
	var newHeaders = [];
	newHeaders = keys.filter( function( k ) {
		kembalikan headers.indexOf( k ) > -1 ? salah : k;
	} );
	newHeaders.forEach( function( h ) {
		headers.push( h );
	} );
	kembali tajuk;
}
// menormalkan nilai
function getValues( header, flat ) {
	nilai var = [];
	// mendorong nilai berdasarkan header
	headers.forEach( function( h ){
		nilai.push( datar[ h ] );
	});
	mengembalikan nilai;
}
// Sisipkan header
fungsi setHeaders( lembar, nilai ) {
	var headerRow = sheet.getRange( 1, 1, 1, values.length )
	headerRow.setValues( [ nilai ] );
	headerRow.setFontWeight("tebal" ).setHorizontalAlignment("tengah" );
}
// Masukkan Data ke dalam Lembar
fungsi setValues( lembar, nilai ) {
	var lastRow = Math.max( sheet.getLastRow(),1 );
	sheet.insertRowAfter(baris terakhir);
	sheet.getRange( lastRow + 1, 1, 1, values.length ).setValues( [ nilai ] ).setFontWeight( "normal" ).setHorizontalAlignment( "center" );
}
// Temukan atau buat lembar untuk formulir
fungsi getFormSheet( formName ) {
	var formSheet;
	var activeSheet = SpreadsheetApp.getActiveSpreadsheet();
	// buat lembar jika perlu
	if ( activeSheet.getSheetByName( formName ) == null ) {
      formSheet = activeSheet.insertSheet();
      formSheet.setName( formName );
      isNewSheet = benar;
	}
	kembali activeSheet.getSheetByName( formName );
}

// fungsi ajaib di mana semuanya terjadi
fungsi insertToSheet( data ){
	var datar = flattenObject( data );
	var keys = Object.keys( datar );
	var formName = data["form_name"];
	var formSheet = getFormSheet(namaform);
	var header = getHeaders( formSheet, keys );
	var values ​​= getValues( header, flat );
	setHeaders( formSheet, header );
	setValues(formSheet, nilai);
	
    jika ( emailNotifikasi ) {
		sendNotification( data, getSeetURL() );
	}
}
fungsi getSeetURL() {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var lembar = spreadsheet.getActiveSheet();
  kembalikan spreadsheet.getUrl();
}
fungsi sendNotification( data, url ) {
	var subject = "Subbmition Elementor Pro Froms baru telah dimasukkan ke lembar Anda";
  var message = "Pengiriman baru telah diterima melalui formulir " + data['form_name'] + " dan dimasukkan ke dalam lembar Google Anda di: " + url;
	MailApp.sendEmail( emailAddress, subjek, pesan, {
		nama: 'Skrip Emailer Otomatis'
	} );
}

Kredit untuk kode ke bainternet.

Hapus Semua Kode dan Tempel Kode

Setelah Anda mendapatkan kode, rekatkan di editor Apps Script, hapus semua kode yang ada terlebih dahulu untuk membuatnya berfungsi.

Ganti Nama Proyek dan Simpan Perubahan

Setelah kode siap, Anda dapat mengganti nama judul skrip, lalu klik tombol simpan .

Deploy Script dan Salin URL aplikasi Web

Setelah perubahan disimpan, mari kita gunakan skrip dengan mengklik tombol Deploy dan pilih New Deployment dari opsi.

Pada jendela yang muncul, klik ikon roda gigi , dan pilih opsi Aplikasi web .

Pada formulir yang baru muncul, ubah akses ke Siapa saja dan klik tombol Deploy .

Jika entah bagaimana penerapan skrip tersebut meminta izin untuk mengakses spreadsheet Anda, harap Otorisasi aksesnya agar skrip dapat menulis data di spreadsheet Anda.

Setelah penerapan skrip berhasil, salin URL aplikasi Web .

Rekatkan URL Aplikasi Web ke dalam Pengaturan Webhook Formulir Elementor

Pada editor Elementor, klik formulir yang ingin Anda hubungkan dengan lembar Google, itu akan membuka pengaturan formulir di panel kiri editor, lalu gulir ke bawah dan klik pada blok Tindakan Setelah Kirim — Tambahkan tindakan Webhook — lalu buka yang baru Blok webhook di bawah, mengkliknya akan memberi Anda bidang URL untuk menempatkan tautan aplikasi web yang disalin.

Oke, itu saja, Anda dapat menguji formulir dengan mengisi kolom teks dan mengklik tombol kirim.

Kami menguji formulir yang kami buat dengan mengisi formulir dan mengklik tombol kirim 3 kali.

Pada Google sheet, kode tersebut akan membuat sheet baru dengan nama form pada Elementor. Kami menamai formulir tersebut dengan google sheet , dan nama sheet yang baru adalah sama.

Pada lembar yang baru dibuat, data yang kami kirim dari formulir Elementor ada di sana, tanpa ada data yang hilang sama sekali.

Untuk Menyimpulkannya

Formulir web adalah alat yang berguna untuk melacak informasi tertentu dari pengunjung situs web Anda. Dan mereka mungkin salah satu elemen terpenting di situs web Anda dalam hal mencapai tujuan Anda. Dengan menghubungkan formulir ke lembar Google kami, kami dapat mengatur dan mengkategorikan data ke dalam format logis. Setelah data ini dimasukkan ke dalam spreadsheet, kami dapat menggunakannya untuk membantu mengatur dan mengembangkan bisnis kami.