Cara Membuat Contact Form Blogger dengan Verifikasi Captcha

Cara Membuat Contact Form dengan Verifikasi Captcha di Blogger

Halaman kontak merupakan fitur yang wajib harus ada pada sebuah blog ataupun website. Dimana dengan adanya laman kontak pengunjung akan lebih mudah menghubungi Administrator atau pemilik blog jika ada hal-hal yang perlu ditanyakan atau hal lainnya.

Memasang halaman kontak di blog sangat mudah, tergantung platform apa yang digunakan, jika di wordpress membuat halaman kontak bisa menggunakan plugin contact form 7 yang sudah mendukung fitur verifikasi captcha.

Lalu bagaimana di Blogger? Blogger juga sudah menyediakan widget kontak melalui tata letak, tapi contact form bawaan blogger tidak mendukung verifikasi captcha dan hanya bisa dipasang pada widget bukan pada halaman statis.

Fungsi Verifikasi Captcha

Verifikasi Captcha sangat berguna untuk menghindari spamming dan pengguna bot, biasanya proses ini diterapkan pada kolom komentar atau form login untuk memastikan bahwa pengguna tersebut memang bukan bot.

Contact Form Blogger Dengan Fitur Captcha

Nah di tutorial ini saya akan berbagi cara menambahkan formulir kontak di halaman blogger dengan Verifikasi Captcha, tujuannya agar terhindar dari spam email masuk yang dikirim melalui formlir kontak di blogger.

Login ke Dashboard Blogger akun kamu.
Pilih Menu Tata Letak > Tambahkan Widget > scroll kebawah lalu pilih Formulir Kontak dan klik simpan.
Berikutnya buka menu Halaman, lalu buat Halaman Baru, ubah tampilan editor halaman jadi mode HTML.

Selanjutnya copy kode dibawah dan paste pada di halaman tersebut.

<div class='contact-form'>
  <form name="ContactForm">
    <div class='cFsection'>
      <label class='cFtitle'>Name</label>
      <input class='cFcontrol' id='ContactForm1_contact-form-name' name='name' placeholder='Your name' type='text'/>
    </div>
    <div class='cFsection'>
      <label class='cFtitle'>Email<span class="cFrequired">Request</span></label>
      <input class='cFcontrol' id='ContactForm1_contact-form-email' name='email' placeholder='[email protected]' type='email'/>
    </div>
    <div class='cFsection'>
      <label class='cFtitle'>Message</label>
      <textarea class='cFcontrol' id='ContactForm1_contact-form-email-message' name='message' placeholder='Empty messages not accepted' rows='3'></textarea>
    </div>
    <div class='cFsection'>
      <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
    </div>
    <div class='cFsection'>
      <input class='cFbtn' id='ContactForm1_contact-form-submit' type='button' value='Send Now'/>
    </div>
    <div class='cFsection cFntf'>
      <span id='ContactForm1_contact-form-error-message'></span>
      <span id='ContactForm1_contact-form-success-message'></span>
    </div>
  </form>
</div>

Ganti YOUR_SITE_KEY dengan kode reCaptcha milik kamu

Kemudian letakan javascript berikut di bawah kode html barusan.

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script type='text/javascript'>/*<![CDATA[*/
  document.addEventListener("DOMContentLoaded", function() {
    let t = document.getElementById("ContactForm1_contact-form-email-message"),
        e = t => {
          t.style.height = "auto", t.style.height = t.scrollHeight + "px"
        };
    e(t), t.addEventListener("input", function() {
      e(t)
    }), document.getElementById("ContactForm1_contact-form-submit").addEventListener("click", function() {
      if (0 === grecaptcha.getResponse().length) {
        document.getElementById("ContactForm1_contact-form-error-message").innerText = "Please complete the reCaptcha.";
        return
      }
      document.forms.ContactForm.submit()
    })
  });
/*]]>*/</script>

Jika kamu mengoptimasi blog dengan menyembunyikan CSS dan JS Blogger, gunakan kode javascript berikut.

<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script type='text/javascript'>/*<![CDATA[*/ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '0000000000000000000';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d0000000000000000000','//www.yourDomain.com/','0000000000000000000'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '0000000000000000000', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); document.addEventListener("DOMContentLoaded",function(){let t=document.getElementById("ContactForm1_contact-form-email-message"),e=t=>{t.style.height="auto",t.style.height=t.scrollHeight+"px"};e(t),t.addEventListener("input",function(){e(t)}),document.getElementById("ContactForm1_contact-form-submit").addEventListener("click",function(){if(0===grecaptcha.getResponse().length){document.getElementById("ContactForm1_contact-form-error-message").innerText="Please complete the reCaptcha.";return}document.forms.ContactForm.submit()})}); /*]]>*/</script>

Ganti 0000000000000000000 dengan ID Blog kamu
Ganti //www.yourDomain.com/ dengan URL blog kamu

Jika sudah Kemudian klik publishkan halaman

Berikutnya, buka menu Tema > Edit HTML. Cari penutup </style> dan Paste kode dibawah tepat diatas kode tersebut.

.cFsection+* {
  margin-top: 1.5rem
}
.cFtitle {
  margin-bottom: 1rem;
  font-weight:500;
  display: block
}
.cFcontrol {
  background-color: #fff;
  border: 1px solid #cfd8dc;
  padding: .75rem;
  border-radius: .5rem;
  transition: border .3s,box-shadow .3s;
  width: 100%;
  min-height: 3.125rem;
}
textarea.cFcontrol {
  field-sizing: content;
  overflow: hidden;
}
.cFcontrol::-moz-placeholder {
  color: #cfd8dc
}
.cFcontrol::placeholder {
  color: #cfd8dc
}
.cFcontrol:focus {
  border: 1px solid #098a91;
  box-shadow: 0 0 0 3px #9dd0d3;
  outline: 0
}
.cFrequired {
  font-weight: 300;
  font-size: 90%;
  margin-left: .5rem;
  color: #71767b
}
.cFbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -moz-column-gap: .5rem;
  column-gap: .5rem;
  background-color: #098a91;
  padding: .75rem .875rem;
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
  border-radius: .5rem;
  line-height: 1.5;
  transition-property: box-shadow,background-color,color;
  transition-duration: .3s;
  outline: 0;
  border: 0;
}
.cFbtn:hover {
  background-color: #9dd0d3;
  color: #098a91
}
.cFntf {
  display: flex;
  flex-direction: column;
}
.cFntf .contact-form-error-message-with-border {
  color: #d32f2f;
}
.cFntf .contact-form-success-message-with-border {
  color: #2e7b32;
}
#ContactForm1, #ContactForm1 br {
  display: none
}

Save Tema

Sampai disini tutorial memasang contact form dengan Verifikasi Captcha berhasil, sekarang lihat halaman kontak yang sudah kamu buat dan coba test dengan cara mengirim pesan.

Cara Pasang reCaptcha dan Upload File di Contact Form Blogger - InpuTekno

Cara Mudah Memasang Google reCaptcha dan Fitur Upload File di Contact Formulir Blogger.

www.inputekno.com

Penutup

Nah itu tadi Cara Membuat Contact Form Blogger dengan Verifikasi Captcha. Jika artikel ini bermanfaat bisa kamu share dan rekomendasikan ke teman-teman yang membutuhkan, jika ada kendala kamu bisa bertanya melalui kolom komentar.