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.
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="widget-title">
</div>
<div class="contact-form-widget">
<div class="form">
<form action="https://formsubmit.co/Email_Kamu" method="POST" name="contact-form" onsubmit="return submitUserForm();" >
<input name="_template" type="hidden" value="table" />
<input name="_subject" type="hidden" value="Preview Inputekno.Com Submission!" />
<input name="_captcha" type="hidden" value="false" />
<input name="_next" type="hidden" value="https://preview.inputekno.com/p/thanks-you.html" />
<div class='formcolumn1'>
<input id="ContactForm1_contact-form-name" class="contact-form-name" name="Name" placeholder='Name' size="30" type="text" value="" />
</div>
<div class='formcolumn2'>
<input id="ContactForm1_contact-form-email" name="Email" placeholder='Email' size="30" type="text" value="" />
</div>
<div class='formcolumn1'>
<input id="ContactForm1_contact-form-name" name="Phone" placeholder='Phone' size="30" type="number" value="" />
</div>
<div class='formcolumn2'>
<input id="ContactForm1_contact-form-email" name="attachment" placeholder='attachment' size="30" type="file" accept="image/png, image/jpeg" />
</div>
<div class='formcolumn3'>
<textarea cols="25" id="contact-form-email-message" name="Message" placeholder='Message' rows="5"></textarea>
</div>
<div class='formcolumn4'>
<button class='button' id="ContactForm1_contact-form-submit" type="submit" value="Send Now">Send Message</button>
</div>
<div style="max-width: 100%; text-align: center; width: 100%;">
</div>
</form>
<!--Form Code End Here-->
<!--reCaptcha Code Begin Here-->
<div id="g-recaptcha-error"></div>
<div class="g-recaptcha" data-callback="verifyCaptcha" data-sitekey="your_sitekey"></div>
<br /><br /><br /> <br /><br /><br /><br /><br /><br />
<div id="g-recaptcha-error"></div>
<br /><br /><br />
<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 scoped="" type="text/css">
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#contact-form-email-message{width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
.formcolumn4{position:relative}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</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 :1. Konfigurasi atribut method="POST"
- 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/example@gmail.com" 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
- 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>
<div class="g-recaptcha" data-callback="verifyCaptcha" data-sitekey="6Lc1cc8fAAAAABfX-kTQWL06BpvaV3ySZh1bRi7c"></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.- Buka
Halaman Kontak
- Kirim pesan melalui melalui formulir tersebut
- Buka email masuk dari formsubmit > Klik Aktivate Form
- Sekarang halaman kontak sudah aktif
4. Opsi Tambahan [Optional]
Langkah ini opsi tambahan yang bisa kamu gunakan, seperti merubah subjek email masuk dll.<input name="_subject" type="hidden" value="Preview Inputekno.Com Submission!" />
<input name="_next" type="hidden" value="https://preview.inputekno.com/p/thanks-you.html" />
enctype="multipart/form-data"
untuk mengaktifkan form 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">
<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