Cara Membuat Google reCaptcha Responsive Menggunakan CSS dan JQuery

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
June 09, 2018

Selamat malam sobat blogger kali ini kami akan share Cara Membuat Google reCaptcha Responsive Menggunakan CSS dan JQuery.


Tutorial ini bertujuan untuk menjelaskan bagaimana cara membuat kode keamanan ReCaptcha dari Google yang responsif. Memang, secara default, modul pemeriksaan robot tidak "responsif", yaitu untuk mengatakan bahwa dimensinya tidak beradaptasi dengan lingkungannya.

Versi baru Google ReCaptcha sangat mudah digunakan dan terintegrasi, tetapi tidak beradaptasi dengan semua situasi, termasuk media seluler. Untuk jelasnya lihat gambar dibawah ini.


Kami akan lakukan untuk memecahkan lebar modul reCaptcha ini mengubah skalanya. Awalnya kita akan menerapkan gaya langsung pada div yang memiliki kelas. G-recaptcha, ini adalah div di mana formulir verifikasi Google ditampilkan.

Untuk memvalidasi bahwa itu berhasil, lihat kode dibawah ini.

 <div class="g-recaptcha" data-sitekey="your_key" style="transform:scale(0.50);-webkit-transform:scale(0.50);transform-origin:0 0;-webkit-transform-origin:0 0;"></div> 

Berikut hasilnya. Pada gambar dibawah kita masih mempunyai masalah yaitu Google Recaptcha terlalu mengecil saat di akses melalui smartphone, itu berarti Google Recaptcha di atas mempunyai dimensi yang tidak menyesuaikan dengan form yang sedang kita gunakan.


Untuk melakukan ini, kita akan memilih div. G-recaptcha dan induknya untuk mengambil lebarnya. Dengan demikian kita akan tahu lebar yang kita miliki tersedia. Kemudian kita akan mengambil lebar yang tersedia yang kita miliki dan bagi dengan lebar modul reCaptcha kita (302 piksel) untuk mendapatkan nilai skala.

Oleh karena itu kita perlu memberikan sentuhan sederhana dengan menambahkan kode JavaScript, berikut kodenya.

 var width = $('.g-recaptcha').parent().width();
if (width < 302) {
 var scale = width / 302;
 $('.g-recaptcha').css('transform', 'scale(' + scale + ')');
 $('.g-recaptcha').css('-webkit-transform', 'scale(' + scale + ')');
 $('.g-recaptcha').css('transform-origin', '0 0');
 $('.g-recaptcha').css('-webkit-transform-origin', '0 0');
} 


Gimana apakah anda berhasil melakukannya, Jika kalian masih kebingunan dengan tutorial diatas silahkan tinggalkan koment dibawah dan mulai berdiskusi dengan kami, atau anda bisa langsung mengunjungi sumber referensi yang kami jadikan acuan pada link dibawah.

 http://online-free-tools.com/en/tutorial/recaptcha_responsive_google 


Artikel Menarik Lainnya

SUBSCRIBE TO OUR NEWSLETTER