Membuat Formulir Kontak dengan Google Drive

Tutorial kali ini merupakan tindak lanjut dari tutorial sejenis yang pernah Saya publikasikan sebelumnya di sini. Sebelum artikel tersebut ditandai sebagai artikel kadaluarsa, layanan Google Drive saat itu masih bernama Google Docs. Saya sempat berpikir untuk memperbarui artikel tersebut saja, tapi karena terdapat unsur historis pada artikel tersebut maka Saya memutuskan untuk membuat artikel yang baru saja.

Tutorial kali ini Saya harap akan jauh lebih mudah untuk diikuti karena di sini Anda tidak lagi membutuhkan ID spreadsheet untuk membuat formulir kontak bekerja. Tidak perlu panjang-panjang, kita langsung ke langkah-langkahnya saja ya!

Membuat Spreadsheet 

Berbeda dari tutorial sebelumnya yang dimulai dengan membuat formulir baru, di sini Anda buat spreadsheet-nya terlebih dahulu. Spreadsheet ini nantinya akan kita gunakan sebagai basis-data untuk semua pesan yang berhasil dikirim. Buka https://drive.google.com/drive kemudian klik pada tombol Baru di pojok kiri atas. Pilih Google Spreadsheet kemudian pilih Spreadsheet kosong.

Jendela baru akan terbuka untuk memuat editor spreadsheet dari Google. Setelah termuat, klik pada judulnya kemudian ubah namanya menjadi ‘Pesan Masuk’.

Sekarang pilih menu Alat kemudian pilih Buat formulir.

Tunggu beberapa saat maka akan muncul tab baru di bagian bawah editor dengan label ‘Form Responses 1’.

Klik untuk mengaktifkan sheet tersebut! Anda boleh menghapus sheet sebelumnya karena itu tidak ada gunanya.

Formulir Anda sebenarnya sudah jadi, tapi masih belum berisi apa-apa kecuali satu bidang dengan label Timestamp dan satu bidang lagi yang hanya berfungsi sebagai contoh saja.

Menyunting Formulir 

Pilih menu Formulir kemudian pilih Edit formulir. Maka jendela baru akan terbuka untuk memuat editor formulir.

Pada editor tersebut, hapus atau sunting bidang contoh, kemudian buat bidang-bidang baru dengan rincian seperti berikut:

• Perihal
  • Tipe: Jawaban singkat
  • Wajib diisi: Ya
• Nama
  • Tipe: Jawaban singkat
  • Wajib diisi: Ya
• Surel
  • Tipe: Jawaban singkat
  • Wajib diisi: Ya
• Situs Web
  • Tipe: Jawaban singkat
  • Wajib diisi: Tidak
• Pesan
  • Tipe: Paragraf
  • Wajib diisi: Ya

Semua perubahan akan tersimpan secara otomatis.

Membuat Skrip Pemicu 

Skrip ini nantinya akan bekerja setiap kali pesan dikirimkan melalui formulir terkait. Untuk membuatnya, pilih menu Alat kemudian pilih Editor skrip. Jendela baru akan terbuka untuk memuat editor skrip.

Pada bidang Kode.gs, tempelkan kode ini:

function onFormSubmit(e) {
    GmailApp.sendEmail('you@example.com', 'Tes', JSON.stringify(e));
}

Simpan kode tersebut dengan nama ‘Kirim Pesan’.

Ganti kode yang Saya beri tanda dengan alamat surel Anda. Sekarang pilih menu yang tampak seperti simbol jam untuk mengaktifkan pemicu (biasanya bernama ‘Pemicu proyek saat ini’). Jendela baru akan terbuka untuk memuat halaman pemicu proyek.

Klik tombol Tambahkan Pemicu di pojok kanan bawah. Pada bidang Pilih fungsi yang ingin dijalankan pilih onFormSubmit (sesuai dengan nama fungsi yang kita buat sebelumnya). Pada bidang Pilih penerapan mana yang harus dijalankan pilih Head. Pada bidang Pilih sumber acara pilih Dari Spreadsheet. Pada bidang Pilih jenis acara pilih Saat mengirim formulir. Pada bidang Setelan notifikasi kegagalan ambil pilihan sesuai kebutuhan saja.

Setelah itu tekan tombol Simpan. Anda akan diminta untuk mengautentikasi pemicu tersebut melalui jendela munculan. Ikuti petunjuk yang ada, kemudian tekan tombol Izinkan di akhir tahapan.

Mengirim Pesan 

Sekarang kita coba kirimkan pesan. Pilih menu Formulir kemudian pilih Buka formulir langsung. Jendela baru akan terbuka untuk memuat formulir publik Anda. Salin URL pada jendela tersebut untuk dibagikan nanti. Isi semua bidang yang ada kemudian tekan tombol Kirim untuk mengetes. Jika berhasil, maka Anda akan mendapatkan pesan masuk yang kurang lebihnya tampak seperti ini:

Di situ akan tampak semua data yang telah kita kirimkan tadi. Untuk saat ini kita fokus ke bidang values dan namedValues saja. Kita pilih bidang namedValues karena bidang ini memiliki format {"key": "value"} yang lebih mudah untuk diproses.

Buka kembali editor skrip kemudian ubah fungsi onFormSubmit menjadi seperti ini:

function onFormSubmit(e) {
    var to = 'you@example.com',
        values = e.namedValues,
        key, value,
        body = "";
    for (key in values) {
        value = values[key];
        if (typeof value === "object" && value[0]) {
            value = value[0];
        }
        body += key + ': ' + value + '\n';
    }
    GmailApp.sendEmail(to, 'Pesan baru!', body.trim());
}

Simpan perubahan. Kemudian Anda coba kirim pesan lagi, maka format pesan yang masuk akan tampak lebih mudah dibaca sekarang!

Tingkat Lanjut 

Mengirim HTML 

Pada fungsi sebelumnya, setiap pesan yang dikirim akan diperlakukan sebagai data yang mentah, dimana karakter ganti baris akan diubah menjadi <br> dan tag-tag HTML yang lain akan dianggap sebagai teks biasa. Untuk mengirimkan kode HTML seperti apa adanya, Anda perlu mengosongkan bidang body kemudian ambil parameter berikutnya untuk menempatkan data pada bidang htmlBody agar data yang dikirimkan nantinya dapat dianggap sebagai kode HTML:

GmailApp.sendEmail(to, 'Pesan baru!', "", {
    htmlBody: body
});

Berikut ini adalah fungsi yang telah Saya modifikasi sedemikian rupa agar pesan yang masuk nantinya lebih nyaman untuk dibaca:

function onFormSubmit(e) {
    var to = 'you@example.com',
        values = e.namedValues,
        key, value,
        body = "";
    body += '<table style="width:100%;font-size:13px;font-family:sans-serif;line-height:1.5em;;background:#fff;color:#000;table-layout:fixed;border-collapse:separate;border-spacing:2px;">';
    body += '<tbody>';
    for (key in values) {
        value = values[key];
        if (typeof value === "object" && value[0]) {
            value = value[0];
        }
        // Ubah karakter `\n` menjadi `<br>`
        value = value.replace(/\n/g, '<br>');
        body += '<tr>';
        body += '<th style="font:inherit;font-size:100%;font-weight:bold;width:12em;background:#c3d9ff;padding:.5em 1em;vertical-align:top;text-align:right;">' + key + '</th>';
        body += '<td style="font:inherit;font-size:100%;background:#e0ecff;padding:.5em 1em;vertical-align:top;text-align:left;">' + value + '</td>';
        body += '</tr>';
    }
    body += '</tbody>';
    body += '</table>';
    GmailApp.sendEmail(to, values['Perihal'][0] || 'Pesan Baru!', "", {
        htmlBody: body
    });
}

Mengurutkan Data 

Jika pesan yang terkirim tampak tidak sesuai dengan urutan yang seharusnya, Anda bisa mengatur data yang ditampilkan secara manual tanpa melalui pengulangan for:

values['Perihal'] && (body += 'Perihal: ' + values['Perihal'][0] + '\n');
values['Nama'] && (body += 'Nama: ' + values['Nama'][0] + '\n');
values['Surel'] && (body += 'Surel: ' + values['Surel'][0] + '\n');
values['Situs Web'] && (body += 'Situs Web: ' + values['Situs Web'][0] + '\n');
values['Pesan'] && (body += 'Pesan: ' + values['Pesan'][0]);

Atau seperti ini juga bisa:

var orders = ['Perihal', 'Nama', 'Surel', 'Situs Web', 'Pesan'],
    values = e.namedValues,
    key, value,
    body = "";
for (key in orders) {
    if (value = values[key = orders[key]]) {
        if (typeof value === "object" && value[0]) {
            value = value[0];
        }
        body += key + ': ' + value + '\n';
    }
}

Bidang Perihal sebagai Kategori 

Anda bisa memanfaatkan fitur editor formulir untuk membatasi bidang yang ada agar hanya bisa diisi oleh nilai-nilai tertentu saja, misalnya dengan memilih tipe bidang Pilihan ganda.

Validasi Alamat Surel 

Klik menu tambahan di samping sakelar Wajib diisi kemudian pilih Validasi respons. Pada pilihan Panjang ganti nilainya menjadi Ekspresi reguler (Anda menggunakan Panjang untuk menentukan batasan panjang pesan yang dikirimkan). Dan pada pilihan tambahan di sampingnya ganti nilainya dari Berisi menjadi Kecocokan. Pada bidang Pola, isi dengan ekspresi reguler yang cocok dengan alamat surel (tanpa awalan / dan akhiran /), misalnya seperti ini. Pada bidang Teks kesalahan khusus, isi dengan ‘Pola alamat surel tidak valid.’

Anda juga bisa menerapkan ini pada bidang Situs Web.