Lesefortschritt:

In Contact-Form-7-Formularen direkt zu fehlerhaften Feldern springen

19. Juni 2024 | Plugins, Scripts, WordPress

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

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This