Menyesuaikan Tampilan dan Nuansa reCAPTCHA

Penting: reCAPTCHA API versi 1.0 tidak lagi didukung. Harap upgrade ke Versi 2.0. Pelajari lebih lanjut

Setelah berhasil menginstal reCAPTCHA di situs, Anda mungkin ingin mengubah tampilannya. Halaman ini menjelaskan: (1) cara memilih salah satu tema reCAPTCHA standar; (2) cara menyesuaikan tampilan reCAPTCHA sepenuhnya; dan (3) cara menginternasionalkan reCAPTCHA dengan mengubah bahasa Widget.

Tema Standar

Agar widget reCAPTCHA menampilkan tema yang berbeda, Anda harus terlebih dahulu menambahkan kode berikut pada bagian utama Halaman HTML di mana saja sebelum <form> di mana reCAPTCHA muncul (ini tidak akan berfungsi jika ditempatkan setelah skrip utama di mana reCAPTCHA pertama kali dipanggil):

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'theme_name'
 };
 </script>

Untuk menggunakan tema standar, Anda harus mengganti 'theme_name' dengan salah satu dari empat tema berikut nama:

'merah' (tema default)	'putih'
'kacamata hitam'	'bersih'

Tema Kustom

Tema kustom memungkinkan Anda mengontrol tampilan gambar reCAPTCHA dengan tepat. (Berikut adalah demo tema kustom.) Untuk menggunakan tema kustom, Anda harus terlebih dahulu menetapkan properti tema RecaptchaOptions ke 'custom'. Hal ini memberi tahu reCAPTCHA bahwa reCAPTCHA tidak boleh membuat antarmuka penggunanya sendiri. reCAPTCHA akan mengandalkan keberadaan elemen HTML dengan ID berikut untuk menampilkan CAPTCHA kepada pengguna:

• Div kosong dengan ID recaptcha_image. Di sinilah gambar yang sebenarnya akan ditempatkan. Div akan berukuran 300x57 piksel.
• Input teks dengan ID dan nama telah disetel ke recaptcha_response_field. Di sinilah pengguna dapat memasukkan jawabannya.
• Opsional, div yang berisi seluruh reCAPTCHA . Div ID ini harus ditempatkan ke dalam custom_theme_widget dan gaya div harus ditetapkan ke display:none. Setelah kode tema reCAPTCHA dimuat sepenuhnya, kode tersebut akan membuat div terlihat. Elemen ini menghindari membuat halaman berkedip saat dimuat.

Untuk menerapkan semua ini, pertama-tama tempatkan kode berikut di halaman HTML utama di mana saja sebelum <form> yang menampilkan reCAPTCHA:

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'
 };
 

Kemudian, di dalam elemen <form> tempat Anda ingin reCAPTCHA muncul, tempatkan:

 <div id="recaptcha_widget" style="display:none">

   <div id="recaptcha_image"></div>
   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

   <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

   <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

   <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
   <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
   <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

   <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>

 </div>

 <script type="text/javascript"
    src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
 </script>
 <noscript>
   <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
        height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   </textarea>
   <input type="hidden" name="recaptcha_response_field"
        value="manual_challenge">
 </noscript>

Perhatikan bahwa beberapa baris terakhir hanyalah cara standar untuk menampilkan reCAPTCHA yang dijelaskan dalam pengantar panduan ini.

Inilah yang terjadi pada kode di atas. Objek JavaScript Recaptcha menyediakan metode yang memungkinkan Anda mengubah status CAPTCHA. Metode reload akan menampilkan tantangan CAPTCHA baru, dan metode tersebut switch_type mengalihkan antara CAPTCHA gambar dan audio. Untuk membuat UI lengkap untuk reCAPTCHA, kita menampilkan informasi yang berbeda ketika CAPTCHA berada dalam keadaan yang berbeda. Misalnya, saat pengguna melihat CAPTCHA gambar, link ke "Dapatkan CAPTCHA audio" akan ditampilkan. Empat kelas CSS tersedia bagi Anda untuk membuat UI stateful:

Class CSS	Terlihat saat...
recaptcha_only_if_image	CAPTCHA gambar ditampilkan
recaptcha_only_if_audio	CAPTCHA audio ditampilkan
recaptcha_only_if_incorrect_sol	solusi sebelumnya salah
recaptcha_only_if_no_incorrect_sol	solusi sebelumnya tidak salah

Meskipun penerapan tema memberi Anda banyak pilihan, Anda harus mengikuti beberapa aturan konsistensi antarmuka pengguna:

• Anda harus menyatakan bahwa Anda menggunakan reCAPTCHA di dekat widget CAPTCHA.
• Anda harus menyediakan tombol yang terlihat yang memanggil fungsi muat ulang.
• Anda harus menyediakan cara bagi pengguna penyandang gangguan penglihatan untuk mengakses CAPTCHA audio.
• Anda harus memberikan teks alternatif untuk gambar apa pun yang Anda gunakan sebagai tombol di widget reCAPTCHA.

Internasionalisasi: Mengubah Bahasa Widget

Ada dua cara untuk menginternasionalkan widget reCAPTCHA:

Terjemahan bawaan

reCAPTCHA memiliki sejumlah terjemahan bawaan. Anda dapat menggunakannya dengan menyetel parameter lang RecaptchaOptions:

<script type="text/javascript">
var RecaptchaOptions = {
   lang : 'fr',
};
</script>

Terjemahan Kustom

Jika tidak ada terjemahan untuk bahasa Anda, Anda dapat membuatnya sendiri. Anda perlu menerjemahkan semua string dalam JavaScript reCAPTCHA dan menetapkan variabel "custom_translations" RecaptchaOptions. String yang tidak Anda setel akan diambil dari terjemahan default untuk di bahasa target. Anda dapat menggunakannya untuk mengganti sebagian terjemahan default saja (mis., jika terjemahan yang kami pilih tidak sesuai dengan wilayah Anda). Contoh:

<script type= "text/javascript">
var RecaptchaOptions = {
   custom_translations : { instructions_visual : "This is my text:" }
};
</script>

Berikut adalah contoh yang berfungsi dari terjemahan Italia kustom (tempatkan kode ini sebelum Anda memanggil reCAPTCHA):

<script type="text/javascript">
        var RecaptchaOptions = {
                custom_translations : {
                        instructions_visual : "Scrivi le due parole:",
                        instructions_audio : "Trascrivi ci\u00f2 che senti:",
                        play_again : "Riascolta la traccia audio",
                        cant_hear_this : "Scarica la traccia in formato MP3",
                        visual_challenge : "Modalit\u00e0 visiva",
                        audio_challenge : "Modalit\u00e0 auditiva",
                        refresh_btn : "Chiedi due nuove parole",
                        help_btn : "Aiuto",
                        incorrect_try_again : "Scorretto. Riprova.",
                },
                lang : 'it', // Unavailable while writing this code (just for audio challenge)
                theme : 'red' // Make sure there is no trailing ',' at the end of the RecaptchaOptions dictionary
        };
</script>

Referensi RecaptchaOptions

Kolom berikut dapat ditetapkan dalam kamus RecaptchaOptions:

Tombol	Nilai yang mungkin	Nilai default	Arti
tema	'merah' | 'putih' | 'kacamata hitam' | 'bersih' | 'kustom'	'merah'	Menentukan tema yang akan digunakan untuk reCAPTCHA. Tema merah, putih, kaca hitam, dan bersih adalah tema standar tempat reCAPTCHA menyediakan antarmuka pengguna. Di tema kustom, situs Anda memiliki kontrol penuh atas tampilan reCAPTCHA.
bahasa	Kode bahasa apa pun yang didukung.	'id'	Bahasa apa yang digunakan di antarmuka untuk tema. Berikut bahasa yang didukung: Language Kode Inggris id Belanda nl Prancis fr Jerman de Portugis pt Rusia ru Spanyol es Turki tr Jika bahasa situs Anda tidak didukung, Anda selalu dapat menggunakan tema kustom untuk memasukkan reCAPTCHA ke di bahasa target.
custom_translations	Kamus terjemahan	null	Gunakan ini untuk menentukan terjemahan kustom string reCAPTCHA.
custom_theme_widget	String dengan ID elemen DOM	null	Saat menggunakan tema kustom, ini adalah elemen div yang berisi widget. Lihat bagian tema kustom untuk mengetahui cara menggunakannya.
tabindex	bilangan bulat apa pun	0	Menyetel tabindex untuk kotak teks reCAPTCHA. Jika elemen lain dalam formulir menggunakan atribut tabindex, ini harus diatur supaya navigasi lebih mudah bagi pengguna

Sebagai contoh, tag skrip ini membuat reCAPTCHA memiliki tema putih dan memiliki tabindex 2:

<script>
var RecaptchaOptions = {
   theme : 'white',
   tabindex : 2
};
</script>