Hướng dẫn kết nối Elementor Form với google sheet

Hiện tại plugin elementor là một trong những builder hàng đầu làm landing page. Có hỗ trợ form khá tốt.

Tuy nhiên để gửi nội dung form qua google sheet thì lại cần plugin khá đắt đỏ hoặc phải gửi qua zapier (tốn phí).

Hôm nay mình chia sẻ một đoạn script dành cho google sheet, giúp elementor form có thể lưu data lại một cách dễ dàng.

Bước 1. Tạo form

Trong elementor, bạn tạo form theo nhu cầu của mình. Ví dụ chúng ta sẽ có các trường Họ tên, Email, Số điện thoại.

elementor form

Bước 2. Tạo Google Sheet

Chúng ta tạo 1 google sheet với tên bất kỳ. Các heading lần lượt là label vừa tạo ở form

google sheet

Bước 3: Tạo Apps Script

Để thêm Script vào sheet, bạn chọn Tiện ích mở rộng -> Apps Script

google sheet apps script

Ở cửa sổ Apps script mới hiện ra, ta copy code sau và dán vào ô soạn thảo

/*
 * In order to enable this script, follow these steps:
   ***   Open the Google Sheet you want to use,
    **   From the Tools menu select "Script Editor"
     *   Paste this script into code editor and hit Save.
     *   
   ***   Then click: 
    **     "Publish" & select "Deploy as web app...
   ***   Select: 
    **      Execute the app as: Me (youremail@gmail.com)
    **      Who has access to the app: Anyone, even anonymous
   *                           - Note, depending on your Google Apps instance, this option may not be available. You will need to contact your Google Apps administrator, or else use a Gmail account. 
   *
   ***    Now click Deploy. You may be asked to review permissions now.
   *                           - It will probably give you a warning, click "Advanced" on the bottom left and continue.
   *      
   ***    The URL that you get will be the webhook that you can use in your elementor form.
   *                            - You can test this webhook in your browser first by pasting it. 
   *                              It will say: "Yepp this is the webhook URL, request received".
   *         
   ***    EMAIL NOTIFICATIONS: 
            *  By default, email notifications are turned off in this script.
            *  To turn them on:
              *  on line 37 Change "false to "true"
              *  on line 40 replace "Change_to_your_Email" with, well, whatever your email is, but leave the "quotes"
              *  re-save the script. collect leades, make that $$$
 */    

function doGet(e) {}
function doPost(e) {
var o = e.parameter;
SpreadsheetApp.getActiveSheet().appendRow([ o.name, o.email, o.sdt, o.timestamp ]);
}


// Change to true to enable email notifications
var emailNotification = false;

// Enter your email address below (keep the quotation marks!) 
var emailAddress = "legiang360@gmail.com";

/**
 * Google app-script to utilise Elementor Pro Froms webhook
 * For Usage see: https://github.com/pojome/elementor/issues/5894
 * Origionally found: https://gist.github.com/bainternet/4b539b00a4bd7490ac3809d7ff86bd14
 * by bainternet
 * Minor tweaks to the directions by AvlSEONinja
 */
 
 
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// DO NOT EDIT THESE NEXT PARAMS
var isNewSheet = false;
var recivedData = [];

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

// Webhook Receiver - triggered with form webhook to pusblished 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 );
}


// magic 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 Froms subbmition has been inserted to your sheet";
  var message = "A new subbmition has been recived 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 sẽ có vài điều chỉnh sau:

  • Đặt tên cho App Script: Ở phía trên, kế logo, đặt tên gì cũng được
  • Đặt tên cho file script: Đặt gì cũng được (xem hình)
  • Bật tắt tính năng thông báo email khi có người điền form: Ở dòng 37, nếu ta muốn nó thông báo qua email khi có người điền form và nội dung được ghi vào google sheet, ta sửa false thành true. Ở dòng 40, ta sửa email legiang360@gmail.com thành email nhận thông báo của mình.

apps script

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

Để Publish app script vừa tạo, bạn chọn Triển Khai -> Tùy chọn triển khai mới.

connect google sheet 6

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

connect google sheet 7

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

connect google sheet 8

Đợi 1 lát chúng ta sẽ được ID triển khai và URL ở phần Ứng dụng web. Copy URL này nhé. Nó là URL Webhook sẽ dùng ở bước sau

connect google sheet 9

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

Bước 5. Cấp quyền cho App Script

Sau khi thiết lập xong, ta vào tab Kích hoạt (hình đồng hồ bên trái) -> Chọn Thêm trình kích hoạt

kich hoat 1

Ở popup hiện ra, ta cấu hình như sau:

  • Chọn hàm sẽ chạy: Chọn doPost
  • Chọn sự kiện: Đang gửi biểu mẫu

Cấu hình xong bấm Lưu

kich hoat 2

Sau đó chọn email đăng nhập để cấp quyền. ở đây chọn email ứng với email đã tạo google sheet nhé

xac thuc quyen 2

Kế tiếp là bước cấp quyền, do ứng dụng tự viết, nên không có chứng chỉ SSL, sẽ có báo lỗi truy cập. Ở Đây ta chọn Nâng cao -> truy cập Testform (tên app script đã tạo ở trên)

xac thuc quyen 3

Cuối cùng click Cho phép là được

xac thuc quyen 4

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

Quay về với Elementor Form, ở Tab Actions After Submit, ta click dấu + rồi chọn Webhook

connect google sheet 10

Phần cấu hình Webhook hiện ra, ta dán URL đã copy ở trên vào. Rồi bấm Cập nhật

connect google sheet 11

Bước 7. Kiểm thử

Mở trang chứa Form và điền thử. Kết quả ra như hình là đã thành công.

noi dung update google sheet

 

5/5 - (1 bình chọn)
guest
0 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận
0
Rất thích suy nghĩ của bạn, hãy bình luận.x
()
x
Scroll to Top