Membuat Formulir Kontak dengan Google Drive

Cara membuat formulir kontak dengan Google Drive dengan pesan terkirim yang bisa dikustomisasi.

Tabel Konten
  1. Membuat Spreadsheet 
  2. Menyunting Formulir 
  3. Membuat Skrip Pemicu 
  4. Mengirim Pesan 
  5. Tingkat Lanjut 
    1. Mengirim HTML 
    2. Mengurutkan Data 
    3. Bidang Perihal sebagai Kategori 
    4. Validasi Alamat Surel 

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.

Membuat Spreadsheet Baru
Membuat spreadsheet baru.

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

Mengganti nama spreadsheet.

Sekarang pilih menu Alat kemudian pilih Buat formulir.

Buat formulir baru.

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

Sheet baru dibuat secara otomatis.

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.

Menyunting 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.

Membuka 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:

Pesan masuk.

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.

14 Komentar

  • San Muliadi

    Maaf oot mas, cara membuat link tautan di halaman homepage seperti di blog ini bagaimana ya?

    • Dista

      Mungkin artikel ini bisa jadi referensi Mas.
      https://bloggercode-blogconnexion.blogspot.com/1973/09/Blog-data-posts-link.html

  • Mas Iwan

    Jujur aja, sudah saya baca dan tetep gak paham. ada Demo nya mas..? =p*

    • Taufik Nurrohman

      https://docs.google.com/forms/d/e/1FAIpQLSd0YEQG0Y3D_e6D0Pf7IkjKx8eqjBXE2FpAEB3zq62h8FO2jw/viewform

  • Samsul Arif

    Wah, keren juga ya. Dengan trik ini kita bisa terima pesan dari web kita dan langsung masuk ke email tanpa modal, hehe. Cocok banget bagi blogger di platform blogspot.

    BTW untuk membuat form di web kita dan menghubungkannya ke google form cukup mudah, pindahkan url action dari google form ke web kita serta inputnya juga sesuaikan namenya.

    Dulu saya coba berhasil, gk tau kalo sekarang, hehehe.

    Blogku: Zoel.me

    • Taufik Nurrohman

      Masih bisa mas, formulir kontak di blog ini juga dibuat dengan metode yang sama.

  • Maulida Dzul Fikri

    Mas taufik, adakah cara, misalnya, kita membuat formulir html sendiri berupa input-input dan textarea layaknya seperti formulir kontak, lantas kita memindahkan seluruh isian formulir html di atas, baik itu input dan/atau textarea, ke dalam textarea Kontak Blogger yang asli, sehingga pada akhirnya kita dapat mengirimkan data ke email kita sendiri dengan wadah Kontak Blogger. Pada intinya, kita memanfaatkan textarea di formulir Kontak Blogger untuk mengirimkan formulir html yang kita kustomisasi sendiri sesuai kebutuhan. Biasanya data itu dikirim oleh email Blogger-- yang tidak bisa kita balas--ke email akun Blogger yang bersangkutan.

    Jika tidak ada sumber, barangkali Mas Taufik memahami ide pokok di atas sehingga berkenan merealisasikan untuk, terutama seluruh pembaca DTE, dan secara umum, bagi pengguna Blogger.

    Sekian, terimakasih atas respons baiknya. Salam ... ... ...

    • Maulida Dzul Fikri

      Saya membuat formulir html di sembarang halaman untuk disubmit ke sebuah url, lantas mencoba menggunakan fitur dari https://www.dte.web.id/2018/05/query-string-parser.html untuk kemudian mendapatkan data formulir html tersebut di dalam textarea Kontak Blogger yang sebenarnya. Artinya, di dalam email masuklah data berupa json. Namun, ini tidak efisien. Sangat disayangkan jika fitur Kontak Blogger diabaikan oleh penggunanya, bahkan jika widget ini dihapus oleh pihak Blogger karena jarang yang menggunakannya. Barangkali kita sebagai pengguna bisa berusaha memanfaatkan fitur Blogger secara maksimal.

      • Taufik Nurrohman

        Saya belum pernah menyentuh formulir kontak Blogger yang asli sampai sekarang. Kalaupun data formulir nantinya bisa ter-input melalui kueri di URL, untuk menekan tombol Submit kita tetap memerlukan JavaScript, jadi agak kurang praktis menurut Saya.

  • Kiddy Dot ID

    saya coba kode lengkap pada bagian Mengirim HTML, namun pas saya test submit form tidak ada pesan yang masuk ke email ?

    • Taufik Nurrohman

      Sudah melakukan langkah ini?

      Sekarang pilih menu yang tampak seperti simbol jam untuk mengaktifkan pemicu. Jendela baru akan terbuka untuk memuat halaman pemicu proyek.

  • Saeful Rahman

    Tahun lalu saya coba masih bisa, barusan saya coba lagi udah gak bisa ya. Sepertinya ada masalah pada kode dibawah ini. Untuk kode onFormSubmit yang lain masih berfungsi, namun ketika menggunakan fungsi dibawah ini sudah tidak berfungsi.

    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
        });
    }
    • Taufik Nurrohman

      Supaya bisa berfungsi pastikan nama fungsi tersebut sudah didaftarkan di halaman pemicu proyek.

    • Kandra Wilko

      Saya mencoba menambahkan nama fungsi onformsubmit sebelum value dan skripnya berjalan. Begini yang saya gunakan:

      // Ubah karakter `\n` menjadi `<br>`
      function onFormSubmit(){value = value.replace(/\n/g, '<br>')}






Semua kode HTML akan dihapus kecuali kode-kode HTML yang dituliskan sebagai contoh. Gunakan sintaks Markdown untuk memberi gaya pada komentar.


Batal