Bei einem Drupal Kunden bestand vor kurzem die Notwendigkeit ein kleines Kontaktformular im Footer mit einem Captcha zu versehen. Captchas sind naturgemäß nun meist eher unschön anzusehen und nehmen relativ viel Platz in Anspruch. Die Idee war nun das Captcha bei Klick auf den Submit-Button über dem Formular einblenden zu lassen, so bleibt die ursprüngliche Optik erhalten und es muss kein zusätzlicher Platz geschaffen werden.
Das ganze wurde nun per jQuery umgesetzt, welches natürlich ein Fallback für nicht-JavaScript-User notwendig machte. Hier passiert dann ganz einfach folgendes: Das Captcha ist standardmäßig per CSS ausgeblendet, jQuery blendet dieses erst ein. Erfolgt keine Captcha Angabe wird man auf eine Formularseite weitergeleitet (die Eingaben bleiben selbstverständlich erhalten), auf welcher man das Captcha dann eingeben muss.
Unterhalb ist der entsprechende jQuery Code zu finden mit dem die Lösung umgesetzt wurde. Das hinzufügen eines Fake-Captcha-Buttons war leider notwendig, da sich herausgestellt hat, dass einige Browser keine Click-Events auf deaktivierte Buttons akzeptieren (Ziel war, den Button zu deaktivieren um das Absenden des Formulars zu verhinder, bis das Captcha eingegeben wurde).
(function ($) {
Drupal.behaviors.captchaRequest = {
attach: function(context, settings) {
$('#footer #webform-client-form-4 .captcha').append($('#webform-client-form-4 #edit-submit--2'));
$('#footer #webform-client-form-4').append('<span id="captcha-request">Absenden</span>');
$('#footer #webform-client-form-4 #captcha-request').click(function() {
$('#footer #captcha-request').remove();
$('#footer #webform-client-form-4 .webform-component').hide();
$('#footer #webform-client-form-4 .captcha').show();
});
}
};
})(jQuery);