ReCaptcha een nieuwe look geven

Zoals ik al eerder aan gaf, komt de HTML response met alle velden die nodig zijn en ook de standaard opmaak, namelijk de rode opmaak.

Natuurlijk zal zo'n rode opmaak niet mooi staan bij bijvoorbeeld een groene layout, dus daarom is er een simpele manier om de hele layout naar eigen hand aan te passen.

Allereerst zul je reCaptcha moeten zeggen dat er een eigen layout wordt gebruikt. Dat doe je met deze JS script:

Hier geef je aan dat je een eigen theme wilt stylen met behulp van CSS, de response teksten in het Nederlands naar jouw toe gestuurd moeten worden en wat de reCaptcha container wordt (dus waar de hele captcha HTML response in komt te staan).

Omdat reCaptcha nu niet weet wat de nieuwe opmaak van de HTML response moet worden, wordt er van je geëist dat er op z'n minst:

• Een div aanwezig moet zijn met als ID recaptcha_image. Deze div bevat later het plaatje die reCaptcha mee geeft.
• Een input veld met zowel het ID als de name recaptcha_response_field. In dit veld moet de gebruiker de reCaptcha woorden intypen (of de nummers voor de audio versie).
• In ons geval ook een div met als ID recaptcha_widget. Dit hoeft alleen wanneer je in bovenstaande JS script ook de optie custom_theme_widget hebt gedefiniëerd. Let op!! Deze div MOET als extra attribute style="display:none" om zo te voorkomen dat de pagina gaat flikkeren.

Verder kun je de HTML response nog uitpluizen, om zo alle onderdelen te kunnen stylen met behulp van CSS.

Hier alle onderdelen op een rijtje:

• recaptcha_widget , div
• recaptcha_image , div
• recaptcha_only_if_incorrect_sol , class
• recaptcha_only_if_no_inccorrect_sol , class
• recaptcha_only_if_image , class
• recaptcha_only_if_sound , class
• recaptcha_response_field , input ook voor de name attribute!
• javascript:Recaptcha.reload() , method
• javascript:Recaptcha.switch_type(newtype) , method
• javascript:Recaptcha.showhelp() , method
• javascript:Recaptcha.get_challenge() , method
• javascript:Recaptcha.get_response() , method
• javascript:Recaptcha.focus_response_field() , method
• javascript:Recaptcha.create(public_key, element, options) , method
• javascript:Recaptcha.destroy() , method

Je kunt nu elke class apart opmaken, zodat elk stukje van de HTML response wordt opgemaakt. De method's die hier boven worden genoemd, kun je gebruiken om bijvoorbeeld het plaatje te refreshen of om te switchen tussen image of audio versie.

« Lees de omschrijving en reacties