Mengirim Email Dari Form HTML Statis Menggunakan Google Script

Mengirim Email dari Formulir HTML Statis menggunakan Google Apps Mail ini untuk keperluan email atau untuk membuat fitur Contact Us melalui email tanpa server backend, hanya menggunakan Google Script - Tidak ada code PHP, Python, Ruby, Java, Node.js dll.

Jika sobat tidak memiliki server cara ini pass untuk sobat, dan jika ingin melihat demo silahkan lihat ini contact us my own. 

Apa Keuntungannya

1. Tidak ada "Backend" untuk Menyebarkan / Mempertahankan / Membayar 
2. Sepenuhnya Dapat disesuaikan 
3. Email dikirim melalui Google Mail yang Whitelisted Everywhere (kesuksesan pengiriman lebih cepat) 
4. Kumpulkan / Simpan data formulir apapun dalam Spreadsheet agar mudah dilihat (Sempurna jika agan perlu membaginya dengan orang non-teknis) 

Bagaimana Caranya ?

Ikutilah langkah-langkah dibawah ini

1. Kunjungi Google Spreadsheet : https://docs.google.com/spreadsheets/u/0/
Selanjutnya buat baru dengan tekan tombol (+).

2. Persiapan untuk menampung output data
Perhatikan gambar dibawah ini, dan ikuti seperti gambar.

Ganti Nama 1 => (terserah sobat)
Ganti Nama 2 => ganti nama jadi responses
Jika sudah isi data field sesuai dengan gambar di atas.

3. Buka script editor
Klik "Alat > Editor Script"

4. Masukan kode google script
Copy & paste kode di bawah ini kedalam editor script

/******************************************************************************
 * This tutorial is based on the work of Martin Hawksey twitter.com/mhawksey  *
 * But has been simplified and cleaned up to make it more beginner friendly   *
 * All credit still goes to Martin and any issues/complaints/questions to me. *
 ******************************************************************************/

var TO_ADDRESS = "webmestudio@gmail.com"; // change this ...

function formatMailBody(obj) { // function to spit out all the keys/values from the form in HTML
  var result = "";
  for (var key in obj) { // loop over the object passed to the function
    result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key] + "</div>";
    // for every key, concatenate an `<h4 />`/`<div />` pairing of the key name and its value, 
    // and append it to the `result` string created at the start.
  }
  return result; // once the looping is done, `result` will be one long string to put in the email body
}

function doPost(e) {

  try {
    Logger.log(e); // the Google Script version of console.log see: Class Logger
    record_data(e);

    var mailData = e.parameters; // just create a slightly nicer variable name for the data
    
    MailApp.sendEmail({
      to: TO_ADDRESS,
      subject: "Webme Studio - Contact Us",
      // replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`
      htmlBody: formatMailBody(mailData)
    });

    return ContentService    // return json success results
          .createTextOutput(
            JSON.stringify({"result":"success",
                            "data": JSON.stringify(e.parameters) }))
          .setMimeType(ContentService.MimeType.JSON);
  } catch(error) { // if error return this
    Logger.log(error);
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "error": e}))
          .setMimeType(ContentService.MimeType.JSON);
  }
}


/**
 * record_data inserts the data received from the html form submission
 * e is the data received from the POST
 */
function record_data(e) {
  Logger.log(JSON.stringify(e)); // log the POST data in case we need to debug it
  try {
    var doc     = SpreadsheetApp.getActiveSpreadsheet();
    var sheet   = doc.getSheetByName('responses'); // select the responses sheet
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow()+1; // get next row
    var row     = [ new Date() ]; // first element in the row should always be a timestamp
    // loop through the header columns
    for (var i = 1; i < headers.length; i++) { // start at 1 to avoid Timestamp column
      if(headers[i].length > 0) {
        row.push(e.parameter[headers[i]]); // add data to row
      }
    }
    // more efficient to set values as [][] array than individually
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
  }
  catch(error) {
    Logger.log(e);
  }
  finally {
    return;
  }

}

Lihat penjelasan kode di bawah ini

var TO_ADDRESS = "webmestudio@gmail.com"; //ubah dengan email pribadi sobat
subject: "Webme Studio - Contact Us" //ubah terserah sobat
var sheet = doc.getSheetByName('responses'); //ini adalah nama sheetnya

5. Simpan versi skrip barunya
Perhatikan gambar di bawah ini

6. Publikasikan dan terapkan sebagai aplikasi web
Perhatikan gambar di bawah ini

7. Implementasi - Buatlah Form di HTML
Sekarang buka software editor sobat, Setiap elemen formulir sobat harus memiliki atribut nama sama dengan nama kolom di sheet Google.

Lihat contoh gambar di bawah ini

8. Buka file HTML/PHP di browser
Isi beberapa data di dalam form HTML sobat

Setelah melakukan submit, Lihat hasil responnya :

9. Cek email sobat dan spreadsheets

Selesai ! Itu dia. Sobat baru saja membuat form HTML yang mengirim email !

Kesimpulannya

1. Dari cara yang tadi implementasikan itu cukup mudah di praktekan.
2. Sobat dapat bebas menerima email dari form yang Sobat sediakan untuk pengguna lain.
3. Sobat juga dapat memodifikasi form agar tampilan lebih enak di pandang.
4. Sobat juga dapat menambahkan AJAX ke dalam form supaya lebih efektif.
5. Sobat juga bisa memodifikasi script sesuai ke inginan apakah untuk fitur contact us atau kirim mengirim email dari pengguna ke pengguna lainnya.
6. Google Spreadsheet bisa di jadikan penyimpanan data (Database).

Sumber

• Google Apps Scripts Basics: https://developers.google.com/apps-script/articles 
• Logger (like console.log): https://developers.google.com/apps-script/reference/base/logger 
• Simple Mail Merge using Google Spreadsheets: https://developers.google.com/apps-script/articles/mail_merge 
• Orignal Post: https://mashe.hawksey.info/2011/10/google-spreadsheets-as-a-database-insert-with-apps-script-form-postget-submit-method/

Mudah mudahan ini bermanfaat dan berguna. Terima kasih telah berkunjung.