reCAPTCHA biasanya mengharuskan pengguna untuk menyelesaikan tugas tertentu atau mengidentifikasi objek pada gambar untuk membuktikan bahwa mereka adalah manusia, bukan bot. Tugas ini dapat berupa memasukkan teks dari gambar yang buram atau menjawab pertanyaan sederhana.

reCAPTCHA juga membantu meningkatkan digitalisasi buku dan proyek-proyek lain yang memerlukan pengenalan karakter atau objek dalam gambar. Dengan meminta pengguna untuk membantu mengidentifikasi teks pada gambar, reCAPTCHA dapat mengumpulkan data yang diperlukan untuk proyek-proyek tersebut.

Penggunaan reCAPTCHA umumnya terlihat pada formulir pendaftaran, proses login, atau area lain di situs web yang memerlukan verifikasi keamanan.

Menggunakan Google reCAPTCHA dalam formulir kontak atau area interaksi pengguna di situs web memiliki beberapa kelebihan:

1. **Melindungi dari Bot dan Spam:**

   reCAPTCHA membantu mencegah serangan otomatis oleh bot dengan memastikan bahwa yang mengisi formulir adalah manusia sejati, bukan program komputer atau skrip otomatis. Hal ini membantu mengurangi jumlah spam yang diterima melalui formulir kontak.

2. **Peningkatan Keamanan:**

   Dengan menggunakan reCAPTCHA, situs web dapat meningkatkan tingkat keamanan dan mencegah aktivitas berbahaya seperti serangan brute force atau upaya penipuan.

3. **Meningkatkan Kualitas Data:**

   Dengan memverifikasi bahwa pengguna adalah manusia, reCAPTCHA dapat membantu memastikan bahwa data yang diisi dalam formulir kontak adalah asli dan bermanfaat. Ini membantu meningkatkan kualitas informasi yang diterima melalui formulir.

4. **Mendukung Proyek Digitalisasi:**

   reCAPTCHA juga dapat digunakan untuk mendukung proyek-proyek digitalisasi, seperti mengidentifikasi teks pada gambar atau verifikasi gambar untuk keperluan lainnya. Dengan demikian, sambil melindungi situs dari spam, pengguna juga dapat berkontribusi pada proyek-proyek positif ini.

5. **Fleksibilitas Pengaturan Keamanan:**

   Google reCAPTCHA memberikan opsi pengaturan keamanan yang dapat disesuaikan, seperti tingkat kesulitan tes atau tipe tes yang diterapkan. Ini memungkinkan situs web untuk menyesuaikan tingkat keamanan sesuai dengan kebutuhan dan preferensi mereka.

6. **Integrasi Mudah:**

   reCAPTCHA dapat diintegrasikan dengan relatif mudah dalam berbagai platform dan bahasa pemrograman. Google menyediakan dokumentasi yang baik untuk membantu pengembang mengimplementasikan reCAPTCHA dengan efisien.

Membuat form kontak blog dengan google reCaptcha

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="Pesan dari www.raperiadisepti.com!"/>
      <input name="_captcha" type="hidden" value="false"/>
      <input name="_next" type="hidden" value="https://www.raperiadisepti.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>

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  yang ditandai

Cari kode ini

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

Ganti dengan ini

<form action="https://formsubmit.co/ Email anda yang sudah didaftarkan @gmail.com" method="POST" name="contact-form" onsubmit="return submitUserForm();" enctype="multipart/form-data">

Selanjutnya membuat keperluan untuk recaptanya

• 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 “your sitekey” pada baris kode dibawah ini:

<div class="g-recaptcha" data-callback="verifyCaptcha" data-sitekey="your sitekey"></div>

Langkah terakhir hanya tinggal verifikasi form kontak yang sudah anda buat tadi dengan cara coba kirim pesan melalui form kontak yang sudah anda buat tersebut, seharusnya setelah kirim email untuk pertama kali anda akan diberikan link verifikasi ke email untuk mengaktifkan formulirnya

• Buka email masuk dari formsubmit > Klik Aktivate Form

• Sekarang halaman kontak sudah aktif

Setting optional

cari kode ini dan ganti www.raperiadisepti.com dengan nama domain blog anda

<input name="_subject" type="hidden" value="Pesan dari www.raperiadisepti.com!"/>

Seting page thanks (halaman redirect setelah pengunjung berhasil mengirim pesan, semacam halaman ucapan terimakasih sudah mengirim pesan)

Cari kode ini dan ganti url https://www.raperiadisepti.com/p/thanks.html dengan url “page thanks” yang sudah anda buat tadi

<input name="_next" type="hidden" value="https://www.raperiadisepti.com/p/thanks.html"/>