Beranda
Blogger
Tips

Cara Pasang reCaptcha dan Upload File di Contact Form Blogger

Cara Mudah Memasang Google reCaptcha dan Fitur Upload File di Contact Formulir Blogger.
Cara Membuat Contact Form dengan Verifikasi Captcha di Blogger

Cara Pasang reCaptcha dan Upload File di Contact Form Blogger - Verifikasi Captcha sangat berguna untuk menghindari spamming dan pengguna robot, biasanya fitur captcha ini diterapkan pada formulir kontak atau login untuk memastikan bahwa pengguna tersebut memang bukan robot.

Lalu form upload file umum sering digunakan untuk melakukan konfirmasi seperti pembayaran, mengirim gambar. Di wordpress fitur captcha dan upload file untuk halaman kontak sudah tersedia di plugin contact form 7 dimana penggunanya hanya tinggal melakukan konfigurasi di dalam plugin. Tapi bagaimana dengan Blogger?

Fitur Captcha dan Upload file juga bisa diterapkan halaman formulir kontak blogger dengan melakukan integrasi kontak form yang kita buat ke layanan formsubmit. Nah sesuai judul artikel kali ini kita akan membahas cara membuat atau menerapkan reCaptcha dan Upload File pada kontak formulir blogger.

Table of Contents

Memasang Google reCaptcha & Upload File di Contact Form Blogger

Langkah pertama yaitu membuat form halaman kontak terlebih dahulu, kamu bisa menggunakan kode yang sudah di sediakan di bawah:

  • Buka Dashboard Blogger
  • Pilih Menu Halaman
  • Klik Buat Halaman > Tampilan Mode HTML
  • Salin kode dibawah ini kemudian paste kedalam halaman
<!--Form Code Start Here-->
<div class="ContactFormWidget">
  <div class="form">
    <form action="https://formsubmit.co/Email_Kamu" method="POST" name="contact-form" onsubmit="return submitUserForm();" enctype='multipart/form-data' autocomplete="off">
      <input name="_template" type="hidden" value="box"/>
      <input name="_subject" type="hidden" value="New submission!"/>
      <input name="_captcha" type="hidden" value="false"/>
      <input name="_next" type="hidden" value="https://www.inputekno.com/p/thanks.html"/>
      
      <div class='formColum'>
        <div class="FormControl">
          <input id="ContactName" name="Name" placeholder='Name' type="text" value="" />
          <input id="ContactEmail" name="Email" placeholder='Email' type="email" value="" required/>
          <input id="ContactPhone" name="Phone" placeholder='Phone' type="number" value="" />
          <input id="ContactAtt" name="attachment" placeholder='attachment' type="file" accept="image/png, image/jpeg" /> 
        </div>
        
          <textarea id="ContactMessage" name="Message" placeholder='Message' rows="3"></textarea>
        
        <div class="FormControlBtn">
          <!--reCaptcha Code Begin Here-->
          <div id="g-recaptcha-error"></div>
          <div class="g-recaptcha" data-callback="verifyCaptcha" data-sitekey="your_sitekey"></div>
          <div id="g-recaptcha-error"></div>
          <button class='button' id="ContactForm1_contact-form-submit" type="submit" value="Send Now">
            Send Message <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/></svg>
          </button>
        </div>
      </div>
    </form>
        <!--Form Code End Here-->

        <script src="https://www.google.com/recaptcha/api.js"></script>
        <script>
            function submitUserForm() {
                var response = grecaptcha.getResponse();
                if (response.length == 0) {
                    document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">Solve below reCAPTCHA.</span>';
                    return false;
                }
                return true;
            }

            function verifyCaptcha() {
                document.getElementById('g-recaptcha-error').innerHTML = '';
            }
        </script>
        <!--reCaptcha Code Ends Here-->
  </div>
</div>

<style type="text/css">
.FormControl{--gap:10px;--width:280px;display:grid;grid-template-columns:repeat(auto-fit,minmax(49%,0fr));grid-gap:10px}
@media screen and (max-width: 820px){.FormControl{grid-template-columns:auto}}
.formColum input[type=text], .formColum input[type=email], .formColum input[type=number], .formColum input[type=file]{height:auto;padding:14px;background:#fff;font-size:14px;border:1px solid rgba(0,0,0,0.08);outline:none;line-height:1.6em;transition:all .1s ease;border-radius:5px} 
.formColum textarea{width:99%;height:auto;margin:10px 0;padding:14px;background:#fff;font-size:14px;border:1px solid rgba(0,0,0,0.08);outline:none;line-height:1.6em;transition:all .1s ease;border-radius:5px}
@media screen and (max-width: 820px){.formColum textarea{width:100%}}
.formColum input[type=text]:hover, .formColum input[type=email]:focus, .formColum input:hover, .formColum textarea:hover{border:1px solid #333;background:#F9F9F9}
.formColum input[type=text]:focus, .formColum input[type=email]:focus, .formColum input:focus, .formColum textarea:focus{border:1px solid #333;background:#F9F9F9}
.formColum input[type=file]::file-selector-button{border:none;background:#0d45a5;padding:5px 10px;border-radius:5px;color:#fff;cursor:pointer;transition:background .2s ease-in-out}
.formColum input[type=file]::file-selector-button:hover{background:#eee;color:#333}
.button{display:flex;align-items:center;margin:10px 0;padding:15px;outline:0;border:0;border-radius:5px;line-height:1.3;color:#fffdfc;background:#ffc107;font-size:14px;max-width:320px;gap:5px;cursor:pointer}
.ContactFormWidget .button svg{width:22px;height:22px;opacity:0.8;fill:#fff}
.drK .formColum input[type=text], .drK .formColum input[type=email], .drK .formColum input[type=number], .drK .formColum input[type=file]{background:#1f2224;border-color:rgba(255,255,255,.15)}
.drK .formColum input[type=text]:hover, .drK .formColum input[type=email]:focus, .drK .formColum input:hover, .drK .formColum textarea:hover{background:#1f2224;border-color:rgba(255,255,255,.15)}
.drK .formColum input[type=text]:focus, .drK .formColum input[type=email]:focus, .drK .formColum input:focus, .drK .formColum textarea:focus{background:#1f2224;border-color:rgba(255,255,255,.15)}
</style>

Kamu bisa membuat halaman baru atau menggunakan halaman kontak yang sudah ada, jika menggunakan halaman kontak sebelumnya hapus terlebih dahulu semua kode halaman kontak kamu dan ganti dengan kode di atas.

Ubah semua kode yang di tandai sesuai dengan data blog kamu, untuk langkahnya ikuti tahap selanjutnya :

Demo Contact ReCaptcha

1. Konfigurasi atribut method="POST"

Pasang reCaptcha dan Upload File di Contact Form Blogger Pasang reCaptcha dan Upload File di Contact Form Blogger Pasang reCaptcha dan Upload File di Contact Form Blogger
  • Buka Halaman https://formsubmit.co/email-link
  • Masukan alamat email pada kolom "Enter your email address" (Gunakan email khusus untuk menerima kontak masuk dari blog kamu)
  • Klik Create Email Link kemudian cek email masuk
  • Klik tautan aktivasi untuk mengaktifkan tautan email
  • Jika sudah aktif, sekarang edit kode atribut method="POST" yang ditandai
<!--Ganti Kode Yang di Tandai-->
<form action="https://formsubmit.co/Email_Kamu" method="POST" name="contact-form" onsubmit="return submitUserForm();" enctype="multipart/form-data">
<!--Menjadi alamat email yang kamu daftarkan sebelumnya di formsubmit.com-->
<form action="https://formsubmit.co/[email protected]" method="POST" name="contact-form" onsubmit="return submitUserForm();" enctype="multipart/form-data">

2. Menambahkan Data Site Kay reCaptcha

  • Buka Halaman https://www.google.com/recaptcha/admin/create
  • Masukan Nama pada kolom "Label"
  • Pilih Tipe reCaptcha V2 pada kolom berikutnya
  • Masukan URL Blog pada kolom "Domain"
  • Ceklis "Accept the reCAPTCHA Terms of Service"
  • Klik Submit
Menambahkan Data Site Kay reCaptcha
  • Copy Site Key yang sudah kamu dapatkan
  • Ganti your sitekey pada kode kontak sebelumnya dengan Site Key yang sudah kamu copy tadi
<!--Ganti Kode Yang di Tandai-->
<div class="g-recaptcha" data-callback="verifyCaptcha" data-sitekey="your sitekey"></div>

3. Verifikasi Form Contact Agar Aktif

Jika kamu sudah mengikuti kedua langkah diatas, sekarang formulir kontak sudah bisa digunakan. Tapi perlu langkah verifikasi telebih dahulu agar aktif.

Caranya gunakan kirim pesan melalui kontak tersebut, nanti akan ada link verifikasi ke email untuk mengaktifkan formulir.

Pasang reCaptcha dan Upload File di Contact Form Blogger Pasang reCaptcha dan Upload File di Contact Form Blogger Pasang reCaptcha dan Upload File di Contact Form Blogger
  • Buka Halaman Kontak
  • Kirim pesan melalui melalui formulir tersebut
  • Buka email masuk dari formsubmit > Klik Aktivate Form
  • Sekarang halaman kontak sudah aktif

Sampai disini menerapkan Google reCaptcha di halaman kontak blogger sudah bisa digunakan, ketika orang lain ingin menggunakan halaman kontak untuk mengirim pesan mereka diharuskan melewati identifikasi Captcha.

Jika tidak formulir tidak akan berhasil terkirim, langkah ini untuk menghindari spamming dari pengguna boot yang menyalah gunakan form tersebut.

Lalu bagaimana Mengaktifkan form Upload File? untuk mengaktifkannya ikuti panduan selanjutnya berikut ini.

4. Opsi Tambahan [Optional]

Langkah ini opsi tambahan yang bisa kamu gunakan, seperti merubah subjek email masuk dll.

Ubah tulisan yang ditandai sesuai dengan yang ingin kamu gunakan, ini pesan subjek jika ada pesan masuk

<input name="_subject" type="hidden" value="Preview Inputekno.Com Submission!" />

Ganti URL halaman yang ditandai dengan URL halaman blog kamu, ketika pesan sudah terkirim pengunjung akan diarahkan ke halaman URL tersebut.

<input name="_next" type="hidden" value="https://preview.inputekno.com/p/thanks-you.html" />

Tambahkan atribut enctype="multipart/form-data" pada tag form untuk mengaktifkan upload file

<form action="https://formsubmit.co/Email_Kamu" method="POST" name="contact-form" onsubmit="return submitUserForm(); ">
<form action="https://formsubmit.co/Email_Kamu" method="POST" name="contact-form" onsubmit="return submitUserForm();" enctype="multipart/form-data">

Ganti alamat email kamu dengan random-like string, fungsinya untuk menyamarkan alamat kamu agar tidak diketahui oleh orang lain.

<form action="https://formsubmit.co/Email_Kamu" method="POST" name="contact-form" onsubmit="return submitUserForm();" enctype="multipart/form-data">
<form action="https://formsubmit.co/your-random-string" method="POST" name="contact-form" onsubmit="return submitUserForm();" enctype="multipart/form-data">

String acak ini akan dikirimkan ke kamu saat mengkonfirmasi alamat email. Contoh email lihat langkah poin ketiga diatas

Dokumentasi formsubit bisa cek tautan berikut:
formsubmit.co/documentation

Video Tutorial

Penutup

Nah itu tadi Cara Pasang reCaptcha dan Upload File di Contact Form Blogger. Cukup mudah bukan? Jika artikel ini bermanfaat bisa kamu share dan rekomendasikan ke teman-teman yang membutuhkan, jika ada kendala kamu bisa bertanya melalui kolom komentar.

Hi. Lets connect and be friends!
Gabung dalam percakapan