Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Membuat Formulir Kontak Google Doc Agar Bisa Mengirimkan Datanya Langsung ke Kotak Pesan Email

Posting ini membutuhkan pembaharuan → Google Apps Script – Error: “DocsList” not Defined

Pembaharuan: 16 Januari 2014

Sebenarnya Google Doc bukan merupakan layanan untuk membuat aplikasi-aplikasi semacam ini. Membuat formulir kontak menggunakan Google Doc hanya bisa menampilkan pesan di spreadsheet, dan bukannya langsung menuju kotak masuk pesan seperti yang kita kehendaki. Karena fungsi utama Google Doc pada dasarnya memang bukan untuk membuat formulir kontak semacam itu, melainkan untuk membuat formulir yang terintegrasi dengan dokumen, sehingga ini memungkinkan pengguna untuk bisa mengirimkan data secara online. Dan dari formulir itulah data bisa langsung terkirim dan akan tersimpan ke dalam dokumen berbentuk tabel.

Blogger Xpertise memiliki solusi agar data pesan yang dikirimkan melalui formulir Google Doc bisa langsung terkirim menuju pesan masuk email Anda seperti ini:

Contact results - Google Drive
Data kontak langsung terlihat di pesan masuk.

Di sini Saya akan menjelaskan langkah-langkah pembuatan formulir kontak dimulai dari awal sampai akhir. Ada dua bagian utama yang harus Anda kerjakan di sini, yaitu membuat formulir kontak dan mengelola spreadsheet yang terkait dengan formulir kontak tersebut.

Membuat Formulir Kontak

Di sini Anda akan diajak untuk membuat formulir kontak menggunakan Google Doc.

Pertama-tama buka halaman dasbor Google Drive Anda, lalu buat sebuah formulir:

Create a new form - Google Drive
Membuat formulir baru.

Tentukan judul dan deskripsi formulir, serta buat beberapa kotak pertanyaan yang umum terdapat pada formulir kontak di web. Misalnya: Perihal, Nama, Email, Alamat Web dan Pesan:

Form configuration - Google Drive
Membuat formulir.

Pada bagian Laman Konfirmasi, tuliskan pesan terima kasih yang ingin Anda tampilkan ketika pesan telah berhasil terkirim:

Sent message setup - Google Drive
Menyunting pesan ucapan terima kasih.

Klik tombol Kirim Formulir. Akan muncul kotak dialog baru. Klik tombol Sematkan. Di situ Anda akan diberi kode embed formulir kontak yang bisa Anda pasang pada halaman web Anda. Atau Anda juga bisa melihat hasil jadinya pada halaman formulir khusus dengan menekan tombol Lihat Bentuk Jadi di panel atas, tepat di bawah menu utama.

Klik tombol Pilih Tujuan Tanggapan, lalu cek opsi Spreasheet baru. Berikan judul, misalnya Data Tanggapan:

Create new spreadsheet - Google Drive
Membuat spreadsheet baru.

Klik tombol Buat. Tunggu sampai tombol Lihat Tanggapan muncul. Pada tampilan Google Doc saat ini, tombol Lihat Tanggapan akan muncul untuk menggantikan tombol Pilih Tujuan Tanggapan. Klik tombol tersebut untuk melihat spreadsheet formulir kontak Anda.

Mengelola Data yang Masuk

Setelah spreadsheet tercipta, sekarang adalah saatnya untuk mengelola data yang masuk agar setiap kali data baru terkirim ke dokumen, maka salinan data tersebut bisa langsung masuk ke kotak pesan email.

Pilih menu Alat » Editor skrip:

Script editor menu - Google Drive
Editor skrip.

Anda akan dibawa menuju halaman proyek tak berjudul. Pada formulir bernama Kode.gs tempelkan JavaScript ini:

function sendFormByEmail(e) {

  // Tentukan teks subjek/perihal yang nantinya akan muncul pada pesan masuk email setiap kali pesan baru terkirim
  var emailSubject = "PESAN BARU!";

  // Tentukan alamat email di sini atau beberapa alamat email sekaligus yang dipisahkan dengan tanda koma
  var yourEmail = "email@domain.com";

  // Masukkan kunci spreadsheet yang terhubung dengan formulir kontak ini
  // Bisa ditemukan pada URL ketika Anda melihat spreadsheet tersebut
  var docKey = "0Ah0bOy8H_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

  // Jika Anda menginginkan skrip ini mengirim data secara otomatis ke semua editor sheet, set nilainya menjadi `1`
  // Jika Anda hanya ingin mengirimkan data ke `yourEmail`, set nilainya menjadi `0`
  var useEditors = 1;

  // Apakah Anda telah menambahkan kolom yang ternyata tidak Anda gunakan pada formulir?
  // Jika ya, set nilai ini ke nomor urut kolom terakhir yang Anda tambahkan pada spreadsheet.
  // Sebagai contoh: Kolom `C` ada pada nomor urut ke 3
  var extraColumns = 0;

  if (useEditors) {
    var editors = DocsList.getFileById(docKey).getEditors();
    var notify = (editors) ? editors.join(',') : yourEmail;
  } else {
    var notify = yourEmail;
  }

  // Variabel `e` memegang semua data di dalam array.
  // Loop semua data di dalam array dan sisipkan nilainya ke pesan.
  var s = SpreadsheetApp.getActive().getSheetByName("Data1");
  if (extraColumns) {
    var headers = s.getRange(1, 1, 1, extraColumns).getValues()[0];
  } else {
    var headers = s.getRange(1, 1, 1, s.getLastColumn()).getValues()[0];
    var message = "";
  }
  for (var i in headers) {
    message += headers[i] + ' = ' + e.values[i].toString() + '\n';
  }
  MailApp.sendEmail(notify, emailSubject, message);
}

Tentukan subjek email, alamat email dan kunci/ID spreadsheet yang tadi Anda buat. ID spreadsheet bisa Anda temukan pada URL spreadsheet terkait:

https://docs.google.com/spreadsheet/ccc?key=0Ah0bOy8H_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX#gid=0

Data1 adalah nama sheet. Pastikan nilainya sama dengan sheet terkait:

Sheet rename - Goole Drive
Memberi nama sheet.

Sekarang pilih menu Sumber Daya » Pemicu proyek saat ini. Akan muncul kata “No triggers set up. Click to add one now”. Klik pada tautan tersebut untuk menambahkan trigger. Pada kolom Events, pastikan opsi yang terpilih adalah From spreadsheet dan On form submit.

Script trigger authorization - Google Drive
Pemicu proyek.…

Klik opsi notification. Pada opsi ke dua di kotak dialog Execution failure notifications, pilih immediately.

Klik OK.

Akan muncul pesan authorisasi skrip. Klik tombol Terima/Authorize. Ini akan menyetujui authorisasi untuk trigger yang Anda buat.

Anda akan dibawa kembali menuju layar editor. Klik Simpan/Save. Sekarang Anda sudah bisa mencoba mengirimkan pesan melalui formulir kontak buatan Anda. Pembuatan formulir kontak ini sudah selesai.

Setelah ini mungkin Anda akan menerima pesan error ke kotak pesan email. Beruntung jika tidak. Selebihnya hanyalah mengenai pemecahan masalah error yang terjadi. Saya pribadi belum pernah mengalami masalah-masalah yang rumit. Jadi Saya masih belum bisa membuat daftar kemungkinan error yang terjadi di sini. Berikut ini adalah beberapa hal yang perlu diperhatikan menurut Blogger Xpertise:

  1. Pastikan nama sheet tidak mengandung karakter spasi. Ini mungkin bisa menimbulkan errorSheet Saya mengandung karakter spasi, tetapi Saya tidak mengalami masalah itu.
  2. Jangan sampai ada kolom yang kosong yang Anda tambahkan ke dalam spreadsheet kontak. Ini akan menciptakan masalah pada perataan data yang masuk serta membuat skrip gagal bekerja ⇐ Saya mengalami masalah ini sebelumnya gara-gara menambahkan dan memindahkan kolom baru, serta karena menambahkan field pertanyaan baru pada formulir kontak yang Saya buat. Jadi pastikan formulir yang Anda buat sudah benar-benar menetap.
  3. Nama kolom terkadang juga dapat menimbulkan masalah. Pastikan Anda membuat nama kolom/pertanyaan formulir dengan karakter teks yang standar.

Menonaktifkan Notifikasi pada Kiriman Email Spam

Karena formulir kontak ini tidak memiliki captcha maka seringkali Anda akan mendapatkan pesan-pesan aneh yang datang entah dari mana. Berikut ini adalah sebuah cara untuk membuat agar pesan notifikasi tidak dikirimkan ke email Anda jika submisi pesan yang dilakukan terdeteksi sepagai spam:

function sendFormByEmail(e) {

  // Tentukan teks subjek/perihal yang nantinya akan muncul pada pesan masuk email setiap kali pesan baru terkirim
  var emailSubject = "PESAN BARU!";

  // Tentukan alamat email di sini atau beberapa alamat email sekaligus yang dipisahkan dengan tanda koma
  var yourEmail = "email@domain.com";

  // Masukkan kunci spreadsheet yang terhubung dengan formulir kontak ini
  // Bisa ditemukan pada URL ketika Anda melihat spreadsheet tersebut
  var docKey = "0Ah0bOy8H_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

  // Jika Anda menginginkan skrip ini mengirim data secara otomatis ke semua editor sheet, set nilainya menjadi `1`
  // Jika Anda hanya ingin mengirimkan data ke `yourEmail`, set nilainya menjadi `0`
  var useEditors = 1;

  // Apakah Anda telah menambahkan kolom yang ternyata tidak Anda gunakan pada formulir?
  // Jika ya, set nilai ini ke nomor urut kolom terakhir yang Anda tambahkan pada spreadsheet.
  // Sebagai contoh: Kolom `C` ada pada nomor urut ke 3
  var extraColumns = 0;

  if (useEditors) {
    var editors = DocsList.getFileById(docKey).getEditors();
    var notify = (editors) ? editors.join(',') : yourEmail;
  } else {
    var notify = yourEmail;
  }

  // Cek pesan spam: `0` berarti tidak ada spam
  var isSpam = 0;

  // Isi dengan pola-pola spam yang ingin Anda blokir dalam format regular ekspresi
  var spamKeywords = [
    /beijing escort|louis vuitton|www\.nama_web_1\.com|www\.nama_web_2\.com/i,
    /(buy|cheap)(ing|est)/i,
    /fuck|shit|sex|xxx/i
    ...
    ...
  ];

  // Variabel `e` memegang semua data di dalam array.
  // Loop semua data di dalam array dan sisipkan nilainya ke pesan.
  var s = SpreadsheetApp.getActive().getSheetByName("Data1");
  if (extraColumns) {
    var headers = s.getRange(1, 1, 1, extraColumns).getValues()[0];
  } else {
    var headers = s.getRange(1, 1, 1, s.getLastColumn()).getValues()[0];
    var message = "";
  }
  for (var i in headers) {
    message += headers[i] + ' = ' + e.values[i].toString() + '\n';
    for (var j = 0, sk = spamKeywords.length; j < sk; ++j) {
      // Jika data terdeteksi sebagai spam, tingkatkan nilai variabel `isSpam`
      if (spamKeywords[j].test(e.values[i].toString())) isSpam++;
    }
  }
  if (isSpam === 0) { // Kirimkan notifikasi jika nilai `isSpam` adalah `0`
    MailApp.sendEmail(notify, emailSubject, message);
  }
}

Anda bisa mengatur pola spam pada variabel spamKeywords sesuka hati dengan jumlah pola sebanyak yang Anda mau dalam bentuk regular ekspresi. Jika Anda tidak mengerti atau belum menguasai regular ekspresi, Anda bisa menggunakan deteksi spam yang lebih sederhana menggunakan pengecekan indeks teks:

var spamKeywords = [
  "beijing escort"
  "louis vuitton"
  "www.nama_web_1.com",
  "www.nama_web_2.com",
  "buy",
  "cheap",
  ...
  ...
];
if (e.values[i].toString().indexOf(spamKeywords[j]) > -1) isSpam++;

Walaupun begitu, cara ini hanya bisa digunakan untuk mencegah terkirimnya notifikasi pesan masuk saja jika pesan yang dikirimkan adalah pesan spam, dan tidak bisa mencegah terkirimnya data pesan spam ke dalam spreadsheet. Saya sarankan Anda untuk secara rutin membuka sheet terkait formulir kontak ini minimal setiap satu bulan sekali untuk menghapus data-data yang tidak diperlukan. Karena Saya tidak bisa menjamin tentang apa yang akan terjadi pada data Google Doc Anda jika jumlah data yang masuk nanti sudah terlalu besar.

Bacaan Lebih Lanjut

  

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

 57 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Komunitas

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!