Tutorial Membuat Halaman Kontak Personalisasi Mengirim Data Langsung ke Google Sheets

296 Blog

Pernah gak sih kamu merasa bosan dengan tampilan halaman kontak blog yang itu-itu saja? Biasanya, blogger pemula akan memasang Google Forms yang di-embed ke dalam halaman. Memang praktis, sih. Tapi jujur saja, tampilannya sering kali kaku dan kurang menyatu dengan desain template blog kita.

Sebagai seorang blogger, memiliki halaman Contact Us yang estetik dan profesional bisa meningkatkan nilai kredibilitas blog di mata pengunjung maupun calon pengiklan. Kabar baiknya, kamu bisa membuat formulir kontak sendiri yang desainnya bisa diatur sesuka hati.

Melalui artikel ini, kita akan membahas tutorial membuat halaman kontak personalisasi mengirim data langsung ke Google Sheets. Jadi, setiap ada pengunjung yang mengirim pesan, datanya tidak akan masuk ke email yang menumpuk, melainkan tersusun rapi di dalam spreadsheet milikmu. Keren dan praktis, kan? Yuk, ikuti panduan lengkapnya di bawah ini!

Mengapa Harus Menggunakan Google Sheets untuk Formulir Kontak?

Sebelum masuk ke langkah teknis, mungkin kamu bertanya-tanya, kenapa harus repot-repot menyambungkannya ke Google Sheets?

Berikut adalah beberapa keuntungan utama yang akan kamu dapatkan:

Bebas Kustomisasi Desain: Kamu bisa menggunakan HTML dan CSS untuk membuat form yang sangat cocok dengan tema blog milikmu, baik di Blogger (Blogspot) maupun WordPress.
Ringan dan Cepat: Tanpa perlu plugin tambahan yang memberatkan loading blog. Kita hanya bermodalkan script JavaScript ringan.
Penyimpanan Data Rapi: Semua pesan dari pengunjung, mulai dari nama, email, hingga isi pesan, akan langsung masuk ke baris-baris tabel Google Sheets secara otomatis (real-time).
Gratis: Kamu tidak perlu membayar biaya langganan pihak ketiga untuk membuat database formulir.

Langkah 1: Menyiapkan Google Sheets sebagai Database

Langkah pertama dalam tutorial membuat halaman kontak personalisasi mengirim data langsung ke Google Sheets ini adalah menyiapkan tempat penampungan datanya terlebih dahulu.

Buka Google Sheets di akun Google milikmu.
Buat dokumen baru (Blank spreadsheet) dan beri nama, misalnya Data Kontak Blog.
Pada baris pertama (Kolom A, B, C, dan D), buat judul kolom sebagai berikut:
- Kolom A: Tanggal
- Kolom B: Nama
- Kolom C: Email
- Kolom D: Pesan
Biarkan baris-baris di bawahnya kosong karena nanti akan terisi otomatis.

Langkah 2: Membuat Google Apps Script

Agar formulir di blog bisa "berbicara" dan mengirim data ke Google Sheets, kita butuh bantuan jembatan kecil bernama Google Apps Script. Tenang, kamu tidak perlu jago coding, cukup ikuti langkah ini:

Di dalam Google Sheets yang tadi sudah kamu buat, klik menu Ekstensi (Extensions) di bagian atas, lalu pilih Apps Script.
Hapus semua kode bawaan yang ada di sana, lalu salin dan tempel (copy-paste) kode di bawah ini:

JavaScript
function doPost(e) {
  try {
    var doc = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = doc.getActiveSheet();
    
    // Mengambil data dari form berdasarkan name atribut
    var tanggal = new Date();
    var nama = e.parameter.nama;
    var email = e.parameter.email;
    var pesan = e.parameter.pesan;
    
    // Memasukkan data ke baris baru di Sheets
    sheet.appendRow([tanggal, nama, email, pesan]);
    
    return ContentService
      .createTextOutput(JSON.stringify({"result":"success", "message":"Pesan berhasil dikirim!"}))
      .setMimeType(ContentService.MimeType.JSON);
  } catch(error) {
    return ContentService
      .createTextOutput(JSON.stringify({"result":"error", "error": error.toString()}))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

Klik ikon Simpan (gambar disket) atau tekan Ctrl + S.

Langkah 3: Menyebarkan (Deploy) Script sebagai Web App

Supaya script ini bisa diakses oleh blogmu, kita harus mengubahnya menjadi Aplikasi Web publik.

Klik tombol Terapkan (Deploy) di pojok kanan atas, lalu pilih Terapkan baru (New deployment).
Pada jenis konfigurasi (ikon gerigi), pilih Aplikasi web (Web app).
Isi deskripsi bebas, misalnya: Form Kontak Blog.
Pada bagian Jalankan sebagai (Execute as), pilih Saya (Me / akun emailmu).
Pada bagian Yang memiliki akses (Who has access), ubah menjadi Siapa saja (Anyone). Langkah ini sangat penting agar pengunjung blog bisa mengirim data.
Klik tombol Terapkan (Deploy).
Jika muncul pop-up otorisasi, klik Berikan akses (Authorize access) dan pilih akun Google milikmu. Jika ada peringatan keamanan, klik Advanced lalu pilih Go to Untitled project (unsafe).
Setelah selesai, kamu akan melihat URL Aplikasi Web. Salin URL tersebut dan simpan di Notepad. Kita akan membutuhkannya sebentar lagi.

Langkah 4: Memasang Kode HTML dan JavaScript di Blog

Sekarang kita masuk ke tahap akhir dari tutorial membuat halaman kontak personalisasi mengirim data langsung ke Google Sheets, yaitu memasang formulir di halaman blog.

Silakan buat halaman baru (Page) di Blogger atau WordPress kamu, ubah mode menulis dari Visual/Compose menjadi Tampilan HTML, lalu masukkan kode di bawah ini:

HTML
<div class="contact-form-container">
  <h3>Hubungi Kami</h3>
  <p>Punya pertanyaan atau kerja sama? Silakan isi formulir di bawah ini.</p>
  
  <form id="my-contact-form">
    <div class="form-group">
      <label>Nama Lengkap</label>
      <input type="text" name="nama" required placeholder="Nama Anda...">
    </div>
    
    <div class="form-group">
      <label>Alamat Email</label>
      <input type="email" name="email" required placeholder="Email Anda...">
    </div>
    
    <div class="form-group">
      <label>Isi Pesan</label>
      <textarea name="pesan" rows="5" required placeholder="Tulis pesan Anda di sini..."></textarea>
    </div>
    
    <button type="submit" id="btn-kirim">Kirim Pesan</button>
  </form>
  
  <div id="status-pesan" style="display:none; margin-top:15px; padding:10px; border-radius:5px;"></div>
</div>
<style>
/* CSS Sederhana agar form rapi di HP */
.contact-form-container { max-width: 500px; margin: 0 auto; padding: 15px; font-family: sans-serif; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
#btn-kirim { background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; width: 100%; font-size: 16px; }
#btn-kirim:hover { background-color: #0056b3; }
</style>
<script>
const scriptURL = 'PASTE_URL_WEB_APP_KAMU_DISINI';
const form = document.getElementById('my-contact-form');
const btnKirim = document.getElementById('btn-kirim');
const statusPesan = document.getElementById('status-pesan');
form.addEventListener('submit', e => {
  e.preventDefault();
  btnKirim.disabled = true;
  btnKirim.innerText = 'Mengirim...';
  
  fetch(scriptURL, { method: 'POST', body: new FormData(form)})
    .then(response => {
      btnKirim.disabled = false;
      btnKirim.innerText = 'Kirim Pesan';
      statusPesan.style.display = 'block';
      statusPesan.style.backgroundColor = '#d4edda';
      statusPesan.style.color = '#155724';
      statusPesan.innerText = 'Keren! Pesanmu berhasil terkirim langsung ke database kami.';
      form.reset();
    })
    .catch(error => {
      btnKirim.disabled = false;
      btnKirim.innerText = 'Kirim Pesan';
      statusPesan.style.display = 'block';
      statusPesan.style.backgroundColor = '#f8d7da';
      statusPesan.style.color = '#721c24';
      statusPesan.innerText = 'Waduh, ada masalah saat mengirim pesan. Coba lagi ya!';
      console.error('Error!', error.message);
    });
});
</script>

PENTING: Cari teks PASTE_URL_WEB_APP_KAMU_DISINI di dalam kode JavaScript di atas, lalu ganti dengan URL Aplikasi Web yang sudah kamu salin pada Langkah 3 tadi. Jangan sampai tanda petiknya terhapus ya!

Setelah itu, klik Publikasikan halaman tersebut.

Langkah 5: Waktunya Uji Coba!

Sekarang, buka halaman kontak yang baru saja kamu buat di blog. Coba isi nama, email, dan pesan asal-asalan, lalu klik tombol Kirim Pesan.

Jika muncul notifikasi sukses, silakan langsung cek dokumen Google Sheets yang kamu buat di awal tadi. Tadaaa! Data yang kamu ketikkan di blog akan langsung muncul di baris baru Google Sheets secara instan tanpa perlu memuat ulang halaman blog (refresh).

Tips Tambahan untuk Keamanan dan Tampilan

Sesuaikan Desain (CSS): Kamu bebas mengubah warna tombol, jenis font, atau bentuk kotak input pada bagian <style> di dalam kode HTML agar makin selaras dengan desain blogmu.
Validasi Input: Pastikan atribut required tetap terpasang pada tag input agar pengunjung tidak bisa mengirimkan pesan kosong.
Gunakan untuk Formulir Lain: Trik ini tidak cuma buat halaman kontak, lho! Kamu bisa menggunakannya untuk membuat form pendaftaran giveaway, form orderan toko online sederhana, atau kuesioner singkat di blog.

Kesimpulan

Membuat formulir kontak yang menyatu dengan desain blog kini bukan lagi hal yang sulit. Dengan mengikuti tutorial membuat halaman kontak personalisasi mengirim data langsung ke Google Sheets ini, kamu sudah berhasil menghemat penggunaan plugin sekaligus memiliki sistem penyimpanan pesan yang jauh lebih rapi dan terorganisir.

Tampilan blog jadi lebih keren, profesional, dan tentunya membuat pengunjung makin nyaman berinteraksi denganmu. Tunggu apa lagi? Yuk, langsung praktikkan panduan ini di blog kesayanganmu sekarang juga! Jika ada langkah yang membingungkan, jangan ragu untuk bertanya di kolom komentar ya. Selamat mencoba!