Membuat Kontak Form Blogger Page dengan Google From dan Otomatis Kirim Ke Email Pribadi

code.ruidrive.com - Membuat Kontak Form Blogger Page dengan Google From dan Otomatis Kirim Ke Email Pribadi - 01

Halo coder rui. Karena beberapa kali mengalami error dengan kontak page blogger, aku kepikiran membuat sebauh form kontak blogger yang terhubung dengan google form.

Di tutorial ini aku menggunakan google form dan spreadsheets serta beberapa kode app script yang bisa membuat auto kirim pesan yang di input user akan langsung di kirim ke email pribadi.

Langsung ajalah.

{tocify} $title={Table of Contents}

Pastikan kalian sudah login google akun. Rekomendasi aku pakai blog dan email test dulu sebelum terapkan ke blog utama. Dan jalankan di private mode saja, agar akun google hanya ada 1.

Buat form input di google forms

  • Kunjungi google forms lalu pilih blank.
  • Kalian buat input yang dibutuhkan, biasanya nama, email, dan pesan. Jangan lupa berikan nama form.
  • Pada bagian input nama dan email pilih Short Answare, lalu di input Pesan pilih Paragraph. Kalian bia atur pada bagian Required, aktipkan atau tidak. Jika aktip user wajib mengisi input, jika tidak user bisa kosongkan.
  • code.ruidrive.com - Membuat Kontak Form Blogger Page dengan Google From dan Otomatis Kirim Ke Email Pribadi - 01
  • Klik Setting, lalu pada bagian Responses > Collect email addresses dan Defaults > Form defaults pillh Do not Collect.
  • code.ruidrive.com - Membuat Kontak Form Blogger Page dengan Google From dan Otomatis Kirim Ke Email Pribadi - 02
  • Setelah selesai kalian publish.
  • Tombol publish akan berubah putih, kalian klik lagi, lalu klik copy responder link, kalian copy linknya dan simpan dulu. Linknya akan seperti berikut.
  • https://docs.google.com/forms/d/e/ID_GOOGLE_FORM/viewform
    code.ruidrive.com - Membuat Kontak Form Blogger Page dengan Google From dan Otomatis Kirim Ke Email Pribadi - 03
  • Selesai.

Membuat Halaman baru di blogger.

Disini kita tidak akan menggunakan langsung link google form dengan iframe karena tampilannya yang kurang bagus menurutku. Jadi kita coba custom aja ya.

Di tahap ini aku mau kalian teliti ya, agak ribet juga.
  • Masuk Blogger > halaman / page > tambah halaman baru.
  • Copy dan pastekan kode berikut, pastikan dalam mode HTML ya
  • 
    
    <form id="contactForm" action="https://docs.google.com/forms/d/e/ID_GOOGLE_FORM/formResponse" method="POST" target="hidden_iframe" onsubmit="return validateCaptcha();">
                    <input type="text" name="entry.ID_Nama" placeholder="Nama Anda" class='contact-form-name' required><br>
                    <input type="email" name="entry.ID_EMAIL" placeholder="Email Anda" class="contact-form-email" required><br>
                    <textarea name="entry.ID_PESAN" placeholder="Pesan Anda" class="contact-form-email-message" required></textarea><br><br><br><br>
    
                    <div class="g-recaptcha" data-sitekey="SECRET_KEY"></div><br><br>
                    <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
    
                    <button type="submit" class='contact-form-button btn contact-form-button-submit'>Kirim</button>
                  </form>
    
                  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    
                  <script>
                    function validateCaptcha() {
                      var response = grecaptcha.getResponse();
                      if(response.length == 0) {
                        alert("Harap verifikasi bahwa Anda bukan robot.");
                        return false;
                      }
                      document.getElementById("g-recaptcha-response").value = response;
                      return true;
                    }
                  </script>
    
            
  • Publish jangan lupa berikan nama pada halaman.

Keterangan:

Katakanlah kalian sudah dapat id dan key captcha nya. Kalian test dulu berfungsi gak nih form.

Coba masukkan nama, email dan pesan dummy / random. Lalu buka google forms > response. Disana harusnya ada data yang masuk.

code.ruidrive.com - Membuat Kontak Form Blogger Page dengan Google From dan Otomatis Kirim Ke Email Pribadi - 01
code.ruidrive.com - Membuat Kontak Form Blogger Page dengan Google From dan Otomatis Kirim Ke Email Pribadi - 02
code.ruidrive.com - Membuat Kontak Form Blogger Page dengan Google From dan Otomatis Kirim Ke Email Pribadi - 03

Tandanya form sudah berfungsi.

Membuat agar input user masuk ke email pribadi.

Setelah membuat halaman kontak bloggernya, kurang pas rasanya kalo gak ada notifikasi ke email pribadi kan? Disinilah kita akan menggunakan spreadsheet dan apps scriptnya.

Sebenarnya dengan google form saja sudah bisa agar notifikasi pesan masuk ke email blogger kalian, namun tampilannya serta pesan tidak masuk. Hanya notifikasi saja. Tampilan pesannya seperti berikut.

code.ruidrive.com - Membuat Kontak Form Blogger Page dengan Google From dan Otomatis Kirim Ke Email Pribadi - 01

Jadi kalau ada pesan baru kalian harus masuk ke google form untuk lihat isi pesannya. Nah, disinilah kita pergunakan spreadsheet dan apps script.

  • Masuk ke google form lagi, lalu pilih form yang kalian buat sebelumnya.
  • Klik responses > link to sheets
  • code.ruidrive.com - Membuat Kontak Form Blogger Page dengan Google From dan Otomatis Kirim Ke Email Pribadi - 01
  • Akan muncul popup, kalian pilih Create a new spreadsheet biarkan default saja, klik tombol create.
  • Akan terbuka google spreadsheet.
  • code.ruidrive.com - Membuat Kontak Form Blogger Page dengan Google From dan Otomatis Kirim Ke Email Pribadi - 02
  • Setelah itu, kalian klik Extensions > Apps Script. Akan terbuka tab baru dari url https://script.google.com
  • Ganti semua kode yang ada di editornya dengan kode berikut.
  • 
               function kirimEmailPemilik(e) {
                    var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
                    var lastRow = sheet.getLastRow();
                    var data = sheet.getRange(lastRow, 1, 1, sheet.getLastColumn()).getValues()[0];
    
                    Logger.log("📌 Data terakhir: " + JSON.stringify(data));
    
                    var emailPemilik = "EMAIL_KALIAN@gmail.com";  // Pastikan email ini benar
                    var subject = "📩 Respon Baru dari Google Form";
    
                    var nama = data[1] || "Tidak Diketahui";
                    var emailPengirim = data[2] || "";
                    var pilihan = data[3] || "Tidak Dipilih";
                    var pesan = data[4] || "Tidak Ada Pesan";
    
                    var body = "📥 Respon Baru dari Google Formnn" +
                               "📝 Nama: " + nama + "n" +
                               "📧 Email: " + emailPengirim + "n" +
                               "💬 Pesan: " + pesan + "n" +
                               "✅ Pilihan: " + pilihan + "nn" +
                               "Cek lebih lanjut di Google Form.";
    
                    try {
                        // Kirim email ke pemilik
                        MailApp.sendEmail(emailPemilik, subject, body);
                        Logger.log("✅ Email berhasil dikirim ke pemilik: " + emailPemilik);
                    } catch (error) {
                        Logger.log("⛔ Gagal mengirim email ke pemilik: " + error.message);
                    }
    
                    // Kirim auto-reply ke pengirim jika email valid
                    if (emailPengirim && emailPengirim.includes("@")) {
                        try {
                            var replySubject = "📩 Terima Kasih! Pesan Anda Telah Diterima";
                            var replyBody = "Halo " + nama + ",nn" +
                                            "Terima kasih telah menghubungi kami. Kami telah menerima pesan Anda dan akan segera merespons.nn" +
                                            "Pesan Anda:n" + pesan + "nn" +
                                            "Salam,nTim Admin";
    
                            MailApp.sendEmail(emailPengirim, replySubject, replyBody);
                            Logger.log("✅ Auto-reply berhasil dikirim ke: " + emailPengirim);
                        } catch (error) {
                            Logger.log("⛔ Gagal mengirim auto-reply: " + error.message);
                        }
                    } else {
                        Logger.log("⚠️ Email pengirim tidak valid, auto-reply tidak dikirim.");
                    }
                }
            
  • Lalu klik simpan bukan deploy.
  • code.ruidrive.com - Membuat Kontak Form Blogger Page dengan Google From dan Otomatis Kirim Ke Email Pribadi - 01
  • Pada menu kalian klik Trigger icon jam.
  • code.ruidrive.com - Membuat Kontak Form Blogger Page dengan Google From dan Otomatis Kirim Ke Email Pribadi - 01
  • Kalian klik create trigger dan isi seperti gambar. Lalu klik save.
  • code.ruidrive.com - Membuat Kontak Form Blogger Page dengan Google From dan Otomatis Kirim Ke Email Pribadi - 02
  • Jika muncul pop up seperti dibawah. Pilih email kalian, lalu advanced, Go to untitle project klik allow.
  • code.ruidrive.com - Membuat Kontak Form Blogger Page dengan Google From dan Otomatis Kirim Ke Email Pribadi - 01
    code.ruidrive.com - Membuat Kontak Form Blogger Page dengan Google From dan Otomatis Kirim Ke Email Pribadi - 02
  • Done
Perhatikan: Ganti EMAIL_KALIAN dengan email pribadi kalian yang ingin menerima pesan masuk dari kontak blogger.

Hasil

Jika berhasil maka user dan email pribadi akan memiliki repson langsung. Berikut ini tampilan pesan masuk dari kontak blogger dari bagian user dan penerima (yaitu anda).

Gambar pesan user.

code.ruidrive.com - Membuat Kontak Form Blogger Page dengan Google From dan Otomatis Kirim Ke Email Pribadi - 04

Gambar pesan admin (email kamu)

code.ruidrive.com - Membuat Kontak Form Blogger Page dengan Google From dan Otomatis Kirim Ke Email Pribadi - 03

Begitu saja tutorialnya, jika berhasil tinggalkan komentar, jika gagal komentar juga dong.

Akhir kata, donasinya dong.

Post a Comment

Previous Post Next Post