วิธีส่งข้อมูลแบบฟอร์ม Elementor ไปยัง Google ชีต

แบบฟอร์มบนเว็บเป็นเครื่องมือที่มีประสิทธิภาพมากสำหรับการโต้ตอบกับผู้ใช้ เช่น พวกเขาสามารถสมัครรับจดหมายข่าวของบริษัทของคุณโดยป้อนที่อยู่อีเมลและข้อมูลอื่น ๆ ที่คุณต้องการรวบรวม หรือบางทีคุณอาจเป็นบริษัทอีคอมเมิร์ซที่ต้องการรวมแบบฟอร์มใบสั่งขายบนเว็บไซต์ของคุณเพื่อความสะดวกแก่ลูกค้าของคุณ แบบฟอร์มอีกประเภทหนึ่งที่อาจเป็นประโยชน์ต่อธุรกิจของคุณคือการรวมแบบฟอร์มคำติชมของลูกค้า เพื่อให้คุณได้รับความรู้ที่ดีขึ้นว่าอะไรที่ได้ผลและสิ่งที่ไม่อยู่ในธุรกิจของคุณ

Elementor Pro มาพร้อมกับวิดเจ็ตดั้งเดิมมากมาย หนึ่งในวิดเจ็ตที่สร้างแบบฟอร์มอย่างง่ายดายบนเว็บไซต์ของคุณคือวิดเจ็ตแบบฟอร์ม ด้วยวิดเจ็ต Form คุณสามารถสร้างแบบฟอร์มได้หลากหลายบนเว็บไซต์ WordPress ของคุณ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิดเจ็ต คุณสามารถตรวจสอบบทความก่อนหน้าของเราเกี่ยวกับ Elementor Form Builder

แม้ว่า Elementor จะมีฟีเจอร์ในตัวเพื่อจัดการการส่งแบบฟอร์ม (ข้อมูล) คุณอาจต้องการส่งข้อมูลไปยัง Google ชีตเพื่อจัดระเบียบและจัดหมวดหมู่ข้อมูลให้อยู่ในรูปแบบตรรกะ

ในบทความนี้ เราจะแสดงวิธีรับข้อมูลจาก Elementor Form ลงใน Google ชีต ซึ่งเป็นโปรแกรมแก้ไขสเปรดชีตบนคลาวด์ที่ทำให้ผู้ใช้เข้าถึงและใช้งานได้ง่าย

เริ่มสเปรดชีตใหม่ใน Google ชีต

คุณเข้าถึง Google ชีตได้จาก sheets.google.com โดยใช้บัญชี Google ฟรี (สำหรับการใช้งานส่วนตัว) หรือบัญชี Google Workspace (สำหรับการใช้งานทางธุรกิจ) สร้างสเปรดชีตเปล่าใหม่เพื่อเริ่มต้น

เปิดตัวแก้ไขสคริปต์ของแอป

ก่อนหน้านี้วางไว้ใต้เมนู เครื่องมือ โดยตัวแก้ไขสคริปต์ชื่อ ปัจจุบันเรียกว่า Apps Script ใต้เมนู ส่วนขยาย

รับรหัสเพื่อเปิดใช้งานการถ่ายโอนข้อมูล

เพื่อให้สามารถโอนข้อมูลแบบฟอร์ม Elementor ไปยัง Google ชีตได้ คุณต้องเชื่อมต่อก่อนโดยใช้รหัสต่อไปนี้

 // เปลี่ยนเป็น true เพื่อเปิดใช้งานการแจ้งเตือนทางอีเมล
var emailNotification = false;
var emailAddress = "Change_to_your_Email";

// ห้ามแก้ไข PARAMS ถัดไปเหล่านี้
var isNewSheet = เท็จ;
var recivedData = [];
/**
 * นี่คือฟังก์ชันที่เริ่มทำงานเมื่อเว็บแอปได้รับคำขอ GET
 * ไม่ได้ใช้ แต่จำเป็น
 */
ฟังก์ชัน doGet( อี ) {
	ส่งคืน HtmlService.createHtmlOutput( "ใช่ นี่คือ URL ของเว็บฮุค ได้รับคำขอแล้ว" );
}
// Webhook Receiver - ทริกเกอร์ด้วย webhook แบบฟอร์มไปยัง URL ของแอปที่เผยแพร่
ฟังก์ชัน doPost( อี ) {
	var params = JSON.stringify(e.พารามิเตอร์);
	params = JSON.parse (พารามิเตอร์);
	insertToSheet (พารามิเตอร์);
	// การตอบสนอง HTTP
	ส่งคืน HtmlService.createHtmlOutput ( "ได้รับคำขอโพสต์แล้ว" );
}
// ปรับวัตถุที่ซ้อนกันเพื่อให้ใช้งานได้ง่ายขึ้นด้วยสเปรดชีต
ฟังก์ชัน flattenObject (ob) {
	var toReturn = {};
	สำหรับ ( var i ใน ob ) {
		ถ้า ( ! ob.hasOwnProperty( i ) ) ดำเนินการต่อ;
		if ( ( typeof ob[i ] ) == 'object' ) {
			var flatObject = flattenObject ( ob[i ] );
			สำหรับ ( var x ใน flatObject ) {
				ถ้า ( ! flatObject.hasOwnProperty( x ) ) ดำเนินการต่อ;
				กลับ[ i + '.' + x ] = flatObject[ x ];
			}
		} อื่น {
			กลับ[ i ] = ob[ i ];
		}
	}
	กลับไปกลับมา;
}
// ปรับส่วนหัวให้เป็นปกติ
ฟังก์ชัน getHeaders (formSheet, คีย์) {
	var ส่วนหัว = [];
  
	// ดึงข้อมูลส่วนหัวที่มีอยู่
    ถ้า ( ! isNewSheet ) {
	  ส่วนหัว = formSheet.getRange( 1, 1, 1, formSheet.getLastColumn() ).getValues()[0];
    }
	// เพิ่มส่วนหัวเพิ่มเติม
	var newHeaders = [];
	newHeaders = keys.filter (ฟังก์ชัน (k) {
		ส่งคืน headers.indexOf( k ) > -1 ? เท็จ : k;
	} );
	newHeaders.forEach (ฟังก์ชัน (h) {
		headers.push( ชั่วโมง );
	} );
	กลับส่วนหัว;
}
// ปรับค่าให้เป็นปกติ
ฟังก์ชั่น getValues ​​(ส่วนหัวแบน) {
	ค่า var = [];
	// ดันค่าตามส่วนหัว
	headers.forEach (ฟังก์ชัน (h){
		ค่า.push( แบน[ h ] );
	});
	ส่งกลับค่า;
}
// แทรกส่วนหัว
ฟังก์ชั่น setHeaders (แผ่นงาน, ค่า) {
	var headerRow = sheet.getRange( 1, 1, 1, values.length )
	headerRow.setValues ​​( [ ค่า ] );
	headerRow.setFontWeight("ตัวหนา" ).setHorizontalAlignment("center" );
}
// แทรกข้อมูลลงในชีต
ฟังก์ชัน setValues ​​(ชีต, ค่า) {
	var lastRow = Math.max( แผ่น.getLastRow(),1 );
	sheet.insertRowAfter (แถวสุดท้าย);
	sheet.getRange (แถวสุดท้าย + 1, 1, 1, ค่าความยาว ).setValues ​​( [ ค่า ] ).setFontWeight ( "ปกติ" ).setHorizontalAlignment ( "กลาง" );
}
// ค้นหาหรือสร้างชีตสำหรับ form
ฟังก์ชัน getFormSheet (formName) {
	var formSheet;
	var activeSheet = SpreadsheetApp.getActiveSpreadsheet();
	// สร้างชีตถ้าจำเป็น
	ถ้า (activeSheet.getSheetByName (formName) == null ) {
      formSheet = activeSheet.insertSheet ();
      formSheet.setName ( ชื่อแบบฟอร์ม );
      isNewSheet = จริง;
	}
	ส่งคืน activeSheet.getSheetByName ( formName );
}

// ฟังก์ชันมายากลที่ทุกอย่างเกิดขึ้น
ฟังก์ชัน insertToSheet (ข้อมูล){
	var flat = flattenObject (ข้อมูล);
	var keys = Object.keys (แบน);
	var formName = data["form_name"];
	var formSheet = getFormSheet ( formName );
	var headers = getHeaders ( formSheet, คีย์ );
	ค่า var = getValues ​​(ส่วนหัวแบน);
	setHeaders (แบบฟอร์มชีต, ส่วนหัว );
	setValues ​​( formSheet ค่า);
	
    ถ้า ( การแจ้งเตือนทางอีเมล ) {
		sendNotification( ข้อมูล, getSeetURL() );
	}
}
ฟังก์ชัน getSeetURL () {
  var สเปรดชีต = SpreadsheetApp.getActiveSpreadsheet();
  var แผ่น = spreadsheet.getActiveSheet();
  ส่งคืน spreadsheet.getUrl();
}
ฟังก์ชั่น sendNotification ( data, url ) {
	var subject = "แทรก Elementor Pro Froms ใหม่ลงในแผ่นงานของคุณแล้ว";
  var message = "ได้รับ subbmition ใหม่ผ่านแบบฟอร์ม " + data['form_name'] + " และแทรกลงใน Google ชีตของคุณที่: " + url;
	MailApp.sendEmail ( emailAddress, subject, ข้อความ, {
		ชื่อ: 'สคริปต์อีเมลอัตโนมัติ'
	} );
}

เครดิตสำหรับรหัสไปยัง bainternet

ล้างรหัสทั้งหมดและวางรหัส

หลังจากที่คุณได้รับโค้ดแล้ว ให้วางลงในตัวแก้ไข Apps Script ล้างโค้ดที่มีอยู่ทั้งหมดก่อนเพื่อให้ใช้งานได้

เปลี่ยนชื่อโครงการและบันทึกการเปลี่ยนแปลง

เมื่อโค้ดพร้อมแล้ว คุณสามารถเปลี่ยนชื่อสคริปต์ได้ จากนั้นคลิกปุ่มบันทึก .

ปรับใช้สคริปต์และคัดลอก URL ของเว็บแอป

หลังจากบันทึกการเปลี่ยนแปลงแล้ว เรามาปรับใช้สคริปต์โดยคลิกปุ่ม ปรับใช้ และเลือกการ ปรับใช้ใหม่ จากตัวเลือก

ในหน้าต่างที่ปรากฏ ให้คลิกไอคอนรูปเฟือง และเลือกตัวเลือก เว็บแอป

ในแบบฟอร์มที่ปรากฏใหม่ ให้เปลี่ยนการเข้าถึงเป็น " ใครก็ได้ " แล้วคลิกปุ่ม ปรับใช้

หากการทำให้สคริปต์ใช้งานได้ขออนุญาตในการเข้าถึงสเปรดชีตของคุณ โปรดให้สิทธิ์การเข้าถึงสคริปต์เพื่อให้สคริปต์สามารถเขียนข้อมูลในสเปรดชีตของคุณได้

หลังจากการปรับใช้สคริปต์สำเร็จแล้ว ให้คัดลอก URL ของ เว็บแอป

วาง URL ของ Web App ลงใน Elementor Form Webhook Setting

ในตัวแก้ไข Elementor ให้คลิกแบบฟอร์มที่คุณต้องการเชื่อมต่อกับ Google ชีต จะเป็นการเปิดการตั้งค่าแบบฟอร์มที่แผงด้านซ้ายของตัวแก้ไข จากนั้นเลื่อนลงมาและคลิกที่บล็อก Action After Submit — Add Webhook action — จะเปิดขึ้นใหม่ บล็อก เว็บฮุ คด้านล่าง เมื่อคลิกที่มันจะให้ช่อง URL สำหรับวางลิงก์เว็บแอปที่คัดลอกมา

เท่านี้ก็เรียบร้อย คุณสามารถทดสอบแบบฟอร์มได้โดยกรอกข้อมูลในช่องข้อความแล้วคลิกปุ่มส่ง

เราทดสอบแบบฟอร์มที่เราสร้างโดยกรอกแบบฟอร์มแล้วคลิกปุ่มส่ง 3 ครั้ง

ใน Google แผ่นงาน รหัสจะสร้างแผ่นงานใหม่ภายใต้ชื่อแบบฟอร์มใน Elementor เราตั้งชื่อแบบฟอร์ม เป็น Google แผ่นงาน และชื่อแผ่นงานใหม่ก็เหมือนกัน

ในแผ่นงานที่สร้างขึ้นใหม่ ข้อมูลที่เราส่งจากแบบฟอร์ม Elementor จะอยู่ที่นั่นโดยไม่มีข้อมูลขาดหายไปเลย

เพื่อสรุป

แบบฟอร์มบนเว็บเป็นเครื่องมือที่มีประโยชน์สำหรับการติดตามข้อมูลบางอย่างจากผู้เยี่ยมชมเว็บไซต์ของคุณ และอาจเป็นหนึ่งในองค์ประกอบที่สำคัญที่สุดในเว็บไซต์ของคุณเมื่อต้องบรรลุเป้าหมาย การเชื่อมต่อแบบฟอร์มกับ Google ชีต ทำให้เราสามารถจัดระเบียบและจัดหมวดหมู่ข้อมูลให้อยู่ในรูปแบบตรรกะได้ เมื่อป้อนข้อมูลนี้ลงในสเปรดชีตแล้ว เราจะใช้ข้อมูลดังกล่าวเพื่อช่วยจัดระเบียบและทำให้ธุรกิจเติบโตได้