Trick # 354 | Dieser Beitrag beinhaltet 297 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.
Mit dem Plugin «Contact Form 7» lassen sich vielfältige Formulare erstellen. Doch wenn beim Ausfüllen was schief läuft und der Versand trotzdem versucht wird, sind die Formulare dieses Plugins nicht eben hilfreich. Sie verharren einfach auf der Fehlermeldung und überlassen die Fehlersuche den Usern. Mit einem kleinen Script springt das Formular aber sofort zum fehlerhaften Feld.
Immerhin blendet das kostenlose WordPress-Plugin «Contact Form 7» bei fehlerhaften Formularfeldern eine Meldung ein. Diese wird unmittelbar beim Absendeversuch angezeigt – wir wünschen uns, dass das Formular stattdessen zu den beanstandeten Feldern scrollt.
Das ist gar nicht schwierig: Kopieren Sie das folgende Script in den <head>-Bereich Ihrer Website. Im Divi-Theme etwa können Sie es unter Divi/Theme-Optionen/Integration ganz einfach einfügen:
<script>
document.addEventListener( 'wpcf7invalid', function( event ) {
setTimeout( function() {
$('html').stop().animate({
scrollTop: $('#' + event.detail.unitTag + ' .wpcf7-not-valid').eq(0).offset().top - 140,
}, 500, 'swing');
}, 100);
}, false );
</script>Alsbald wird das Formular nach fehlerhaften Eingaben und entsprechenden Warnungen abgesucht und die Webseite wird automatisch zum ersten bemängelten Feld gescrollt.
Werbung
Werbung
