Hướng dẫn đồng bộ đẩy thông tin Email từ Form Elementor đến Google sheet

5/5 - (1 bình chọn)

Hướng dẫn cách đồng bộ đẩy thông tin Email từ Form Elementor đến Google Sheet

Việc sử dụng Elementor để tạo các form liên hệ trên website khi thiết kế web bằng WordPress giúp bạn thu thập thông tin người dùng một cách dễ dàng. Tuy nhiên, để quản lý dữ liệu hiệu quả hơn, việc đồng bộ thông tin từ Form Elementor lên Google Sheet là một giải pháp tối ưu. Trong bài viết này, Zubi sẽ hướng dẫn bạn cách thực hiện chi tiết và đơn giản nhất.

Huong-dan-dong-bo-day-thong-tin-email-tu-form-elementor-den-google-sheet-51032

1. Tại sao cần đồng bộ dữ liệu từ Form Elementor đến Google Sheet?

Google Sheet là công cụ mạnh mẽ giúp bạn lưu trữ, phân tích và chia sẻ dữ liệu. Đồng bộ dữ liệu từ Form Elementor đến Google Sheet mang lại những lợi ích sau:

  • Quản lý dễ dàng: Dữ liệu được lưu trữ tập trung trên Google Sheet, thuận tiện cho việc theo dõi và quản lý.
  • Chia sẻ nhanh chóng: Có thể chia sẻ quyền truy cập Google Sheet với đội nhóm hoặc khách hàng.
  • Tự động hóa: Tiết kiệm thời gian nhập liệu và giảm thiểu lỗi thủ công.

2. Chuẩn bị trước khi thực hiện

Để bắt đầu, bạn cần đảm bảo các yêu cầu sau:

  • Website WordPress đã cài đặt Elementor Pro.
  • Tài khoản Google có quyền truy cập vào Google Sheet.

3. Hướng dẫn chi tiết cách đồng bộ

Bước 1: Tạo Google Sheet để lưu trữ dữ liệu

  1. Đăng nhập vào tài khoản Google và truy cập Google Sheet.
  2. Tạo một Google Sheet mới với các cột tương ứng với trường dữ liệu trong form Elementor (Ví dụ: Họ tên, Email, Số điện thoại, Lời nhắn).
  3. Lưu lại URL của Google Sheet.

Bước 2: Tạo Form trên Elementor

  1. Mở trang hoặc bài viết cần chèn form bằng Elementor.
  2. Thêm widget Form vào giao diện trang.
  3. Tùy chỉnh các trường thông tin theo nhu cầu (Họ tên, Email, Số điện thoại, v.v.).
  4. Cấu hình Actions After Submit, chọn mục Webhook.

Bước 3: Cấu hình Webhook để kết nối với Google Sheet

Tạo file Google Sheet

Tiếp theo chúng ta hãy tạo 1 google sheet với cách đặt tên theo nhu cầu của bạn

Huong-dan-dong-bo-day-thong-tin-email-tu-form-elementor-den-google-sheet-93970

 

Bước 3: Tạo Apps Script 

Tiếp theo chúng ta thêm Script vào sheet, bạn chọn Tiện ích mở rộng -> Apps Script

Huong-dan-dong-bo-day-thong-tin-email-tu-form-elementor-den-google-sheet-95945

Ở cửa sổ Apps script mới hiện ra, ta copy code dưới đây và dán vào ô soạn thảo, Chú ý thay youremail@email.com thành email của bạn

/* Google app-script to utilise Elementor Pro Forms webhook
 */
var emailNotification = false; /* Change to true to enable email notifications */
var emailAddress = "youremail@email.com"; /* EDIT this to your email */

// DO NOT EDIT THESE NEXT PARAMS
var isNewSheet = false;
var receivedData = [];

/**
 * this is a function that fires when the webapp receives a GET request
 * Not used but required.
 */
function doGet( e ) {
	return HtmlService.createHtmlOutput( "Yep this is the webhook URL, request received" );
}

// Webhook Receiver - triggered with form webhook to published App URL.
function doPost( e ) {
	var params = JSON.stringify(e.parameter);
	params = JSON.parse(params);
	insertToSheet(params);

	// HTTP Response
	return HtmlService.createHtmlOutput( "post request received" );
}

// Flattens a nested object for easier use with a spreadsheet
function flattenObject( ob ) {
	var toReturn = {};
	for ( var i in ob ) {
		if ( ! ob.hasOwnProperty( i ) ) continue;
		if ( ( typeof ob[ i ] ) == 'object' ) {
			var flatObject = flattenObject( ob[ i ] );
			for ( var x in flatObject ) {
				if ( ! flatObject.hasOwnProperty( x ) ) continue;
				toReturn[ i + '.' + x ] = flatObject[ x ];
			}
		} else {
			toReturn[ i ] = ob[ i ];
		}
	}
	return toReturn;
}

// normalize headers
function getHeaders( formSheet, keys ) {
	var headers = [];

	// retrieve existing headers
    if ( ! isNewSheet ) {
	  headers = formSheet.getRange( 1, 1, 1, formSheet.getLastColumn() ).getValues()[0];
    }

	// add any additional headers
	var newHeaders = [];
	newHeaders = keys.filter( function( k ) {
		return headers.indexOf( k ) > -1 ? false : k;
	} );

	newHeaders.forEach( function( h ) {
		headers.push( h );
	} );
	return headers;
}

// normalize values
function getValues( headers, flat ) {
	var values = [];
	// push values based on headers
	headers.forEach( function( h ){
		values.push( flat[ h ] );
	});
	return values;
}

// Insert headers
function setHeaders( sheet, values ) {
	var headerRow = sheet.getRange( 1, 1, 1, values.length )
	headerRow.setValues( [ values ] );
	headerRow.setFontWeight( "bold" ).setHorizontalAlignment( "center" );
}

// Insert Data into Sheet
function setValues( sheet, values ) {
	var lastRow = Math.max( sheet.getLastRow(),1 );
	sheet.insertRowAfter( lastRow );
	sheet.getRange( lastRow + 1, 1, 1, values.length ).setValues( [ values ] ).setFontWeight( "normal" ).setHorizontalAlignment( "center" );
}

// Find or create sheet for form
function getFormSheet( formName ) {
	var formSheet;
	var activeSheet = SpreadsheetApp.getActiveSpreadsheet();

	// create sheet if needed
	if ( activeSheet.getSheetByName( formName ) == null ) {
      formSheet = activeSheet.insertSheet();
      formSheet.setName( formName );
      isNewSheet = true;
	}
	return activeSheet.getSheetByName( formName );
}


// key function where it all happens
function insertToSheet( data ){
	var flat = flattenObject( data );
	var keys = Object.keys( flat );
	var formName = data["form_name"];
	var formSheet = getFormSheet( formName );
	var headers = getHeaders( formSheet, keys );
	var values = getValues( headers, flat );
	setHeaders( formSheet, headers );
	setValues( formSheet, values );

    if ( emailNotification ) {
		sendNotification( data, getSeetURL() );
	}
}

function getSeetURL() {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getActiveSheet();
  return spreadsheet.getUrl();
}

function sendNotification( data, url ) {
	var subject = "A new Elementor Pro Forms submission has been inserted to your sheet";
  var message = "A new submission has been received via " + data['form_name'] + " form and inserted into your Google sheet at: " + url;
	MailApp.sendEmail( emailAddress, subject, message, {
		name: 'Automatic Emailer Script'
	} );
}

Chúng ta hãy đặt tên cho dự án một cái tên bất kỳ  mục đích để quản lý

Huong-dan-dong-bo-day-thong-tin-email-tu-form-elementor-den-google-sheet-10212

 

Bước 4. Publish App Script vừa tạo

Tiếp đến chúng ta Publish app script vừa tạo, bạn chọn Triển Khai -> Tùy chọn triển khai mới.

Huong-dan-dong-bo-day-thong-tin-email-tu-form-elementor-den-google-sheet-88115

Sau đó sẽ có popup hiện ra, ta click vào bánh răng ở phần Chọn Loại -> Ứng dụng web

Huong-dan-dong-bo-day-thong-tin-email-tu-form-elementor-den-google-sheet-87620

Kế tiếp ta điền mô tả ứng dụng vào phần Nội dung mô tả mới có thể là: Elementor form nhập tuỳ ý bạn.
Ở ô Người có quyền truy cập, ta chọn Bất kỳ ai -> Triển khai

Huong-dan-dong-bo-day-thong-tin-email-tu-form-elementor-den-google-sheet-33067

Sau khi ấn triển khai tài khoản sẽ bắt chúng ta Uỷ quyền truy cập các bạn hãy uỷ quyền và đợi 1 vài phút  ta sẽ được ID triển khai và URL ở phần Ứng dụng web. Ta copy URL này. Nó là URL Webhook sẽ dùng ở bước tiếp theo:

Huong-dan-dong-bo-day-thong-tin-email-tu-form-elementor-den-google-sheet-77116

Copy xong click nút Xong để đóng popup lại

 

Bước 5. Kết nối webhook vào elementor form

Quay trở lại trình edit với Elementor Form, ở Tab Actions After Submit, ta click dấu + rồi chọn Webhook

Huong-dan-dong-bo-day-thong-tin-email-tu-form-elementor-den-google-sheet-15225

Phần cấu hình Webhook hiện ra, ta dán URL đã copy ở trên vào sau đó chúng ta ấn update lại.

Huong-dan-dong-bo-day-thong-tin-email-tu-form-elementor-den-google-sheet-50175

 

Bước 6. Kiểm thử demo kết quả

Huong-dan-dong-bo-day-thong-tin-email-tu-form-elementor-den-google-sheet-93970

Bên trên là hướng dẫn chi tiết cách để gửi data từ form elementor về google sheet chúc các bạn thành công.

Bước 4: Kiểm tra và hoàn tất

  1. Truy cập trang chứa form và gửi thử một thông tin.
  2. Kiểm tra Google Sheet để đảm bảo dữ liệu được đồng bộ thành công.
  3. Nếu có lỗi, kiểm tra lại cấu hình Webhook

4. Lưu ý quan trọng

  • Bảo mật thông tin: Đảm bảo chỉ những người được phép mới có quyền truy cập Google Sheet.
  • Kiểm tra định kỳ: Theo dõi hoạt động đồng bộ để phát hiện và xử lý lỗi kịp thời.

5. Kết luận

Việc đồng bộ dữ liệu từ Form Elementor đến Google Sheet không chỉ giúp bạn quản lý thông tin hiệu quả mà còn tối ưu hóa quy trình làm việc. Hy vọng với hướng dẫn chi tiết từ Zubi, bạn có thể triển khai thành công và nâng cao hiệu quả vận hành website của mình.

Chúc bạn thành công!
Zubi – Đồng hành cùng bạn trong thế giới số.

5/5 - (1 bình chọn)


Để lại một bình luận