Halaman ini diterjemahkan oleh Cloud Translation API.

Menyesuaikan Tampilan dan Nuansa reCAPTCHA

Penting: reCAPTCHA API versi 1.0 tidak lagi didukung, 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 di halaman HTML utama di mana saja sebelum elemen <form> tempat reCAPTCHA muncul (hal ini tidak akan berfungsi jika ditempatkan setelah skrip utama tempat 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 nama tema berikut:

'red' (tema default)	'putih'

'kaca hitam'	'bersih'

Tema Kustom

Dengan tema kustom, Anda dapat mengontrol tampilan gambar reCAPTCHA dengan tepat. (Berikut adalah demo tema kustom.) Untuk menggunakan tema kustom, Anda harus terlebih dahulu menetapkan properti tema RecaptchaOptions ke 'kustom'. Tindakan ini akan memberi tahu reCAPTCHA bahwa reCAPTCHA tidak boleh membuat antarmuka pengguna sendiri. reCAPTCHA akan bergantung pada 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 ditetapkan ke recaptcha_response_field. Di sinilah pengguna dapat memasukkan jawaban.
Secara opsional, div yang berisi seluruh widget 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, div akan terlihat. Elemen ini mencegah halaman berkedip saat dimuat.

Untuk menerapkan semua ini, pertama-tama tempatkan kode berikut di halaman HTML utama Anda di mana saja sebelum elemen <form> tempat reCAPTCHA muncul:

 <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 merupakan 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 menampilkan tantangan CAPTCHA baru, dan metode switch_type akan beralih antara CAPTCHA gambar dan audio. Agar dapat membuat UI lengkap untuk reCAPTCHA, kami menampilkan informasi yang berbeda jika CAPTCHA berada dalam status yang berbeda. Misalnya, saat pengguna melihat CAPTCHA gambar, link ke "Dapatkan CAPTCHA audio" akan ditampilkan. Empat class CSS tersedia bagi Anda untuk membuat UI stateful:

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

Meskipun tema memberi Anda banyak opsi, 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 untuk 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 digunakan 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_translates" untuk RecaptchaOptions. String apa pun yang tidak Anda setel akan diambil dari terjemahan default untuk bahasa Anda. Anda dapat menggunakannya untuk mengganti sebagian terjemahan default saja (misalnya, 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 contoh terjemahan bahasa Italia kustom yang berfungsi (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 disetel dalam kamus RecaptchaOptions:

Kunci

Nilai yang mungkin

Nilai default

Arti

tema

'merah' | 'putih' | 'blackglass' | 'bersih' | 'kustom'

'merah'

Menentukan tema yang akan digunakan untuk reCAPTCHA. Tema merah, putih, hitam kaca, dan bersih adalah tema yang telah ditentukan sebelumnya di mana reCAPTCHA menyediakan antarmuka pengguna. Dalam tema kustom, situs Anda memiliki kontrol penuh atas tampilan reCAPTCHA.

lang

Kode bahasa apa pun yang didukung.

'id'

Bahasa yang digunakan dalam antarmuka untuk tema yang telah ditentukan. Bahasa berikut didukung:

Language	Code
Inggris	en
Belanda	nl
Prancis	fr
Jerman	de
Portugis	pt
Rusia	ru
Spanyol	es
Turkiye	tr

Jika bahasa situs Anda tidak didukung, Anda dapat menggunakan tema kustom kapan saja untuk menggunakan reCAPTCHA dalam bahasa Anda.

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.

indeks tab

bilangan bulat

Menetapkan tabindex untuk kotak teks reCAPTCHA. Jika elemen lain dalam formulir menggunakan tabindex, elemen ini harus diatur agar 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>