Das Plugin Contact Form 7 ist ein eines der beliebtesten Plugins, wenn es darum geht, ein Kontaktformular in eine mit WorPress erstellte Seite einzubinden. Das Plugin ist recht einfach zu handhaben – und einfach zu erweitern, Mit verschiedenen kleinen zusötzlichen Plugins lässt sich Form7 für alle möglichen Anwendungen erweitern.

Die User Experience lässt bei Form7 allerdings ein wenig zu wünschen übrig. In der Regel wird nach dem Abschicken das Formular leer angezeigt. Die Rückmeldung „Ihre Nachricht wurde verschickt“ wird unterhalb des Formulars eingeblendet, ist aber häufig außerhalb des Sichtfeldes.

Mit ein paar einfachen Handgriffen bzw. mit ein paar Zeilen Code lässt sich die User Experience entscheidend verbessern. Was wir vorhaben:

• Das Formular soll nach dem Abschicken nicht mehr angezeigt werden.
• Die Rückmeldung „Nachricht wurde verschickt“ soll im Sichtfeld sein.

Formular nach dem Abschicken nicht mehr anzeigen

Bei Form 7 lässt sich der über den Shortcode ausgegebene Code ergänzen. Wir setzen ein DIV um den Formular-Code herum, der dann per CSS ausgeblendet werden kann, sobald das Formular abgeschickt wurde.

<div class="visible-only-if-not-sent">
…Formular…
</div>

Das Plugin Contact Form 7 ergänzt nach dem Abschicken des Formulars die Klassen des FORM-Tags um die Klasse „sent“. Dan können wir uns zunutze machen.

Im Styleshhet des Themes oder Child-Themes kommen folgende Zeilen hinzu:

.wpcf7 form.sent div.visible-only-if-not-sent {
display: none;
}

Damit wird das Furmular nicht mehr angezeigt, sobald es abgeschickt wurde.

Ausgewähle Inhalte nach Abschicken des Formulars anzeigen

Falls man umgekehrt Dinge anzeigen möchte, sobald das Formular abgeschickt wurde, kann man das CSS um folgende Zeilen ergänzen:

.wpcf7 form div.visible-only-if-sent {
display: none;
}

.wpcf7 form.sent div.visible-only-if-sent {
display: block;
}

Damit lassen sich zum Beispiel zusätzliche Felder Texte einblenden – oder auch ein Download-Link –– wenn man zum Beispiel die den Download eines PDFs mit dem Abschicken des Formulars auf einfache Art und Weise verknüpfen möchte.

Damit das funktioniert muss der entsprechende Bereich natürlich zuvor mit der Klasse „.visible-only-if-sent“ markiert werden.

Zusammengefasst kann das dann wie folgt aussehen:

.wpcf7 form div.visible-only-if-sent {
display: none;
}

.wpcf7 form.sent div.visible-only-if-sent {
display: block;
}

.wpcf7 form div.visible-only-if-not-sent {
display: block;
}

.wpcf7 form.sent div.visible-only-if-not-sent {
display: none;
}

Zur Formular-Rückmeldung scrollen

Ein weiteres Problem in Bezug auf eine optimierte User Experience kann sein, dass man nach dem Abschicken des Formular ein bisschen verloren ist – denn das Browserfenster zeigt ggf. nicht die Rückmeldung, dass das Formualr abgeschickt wurde.

Mit einem kleinen jQuery-Schnippsel können wir zum Glück relativ einfach veranlassen, dass das Browser-Fenster nach einer bestimmten Aktion zu einem bestimmten Bereich scrollt. In diesem Falle ist die Aktion natürlich das Abschicken des Formulars – der Scroll-Punkt die Rückmeldung.

// scroll to form sent message
    jQuery(function ($) {
        $(document).ready(function ()
        {
        var wpcf7Elm = document.querySelector( '.wpcf7' );
        if(wpcf7Elm) {
            wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
            setTimeout(function() {
            $([document.documentElement, document.body]).animate({
            /* scrollTop: $("#primary").offset().top - 360 */
            scrollTop: $(".wpcf7-response-output").offset().top - 360

        }, 500);
        }, 500);
        //console.log("Submited");
        }, false );
        }
        });
    });

In diesem Fall würde das Browserfenster zu dem Element scrollen, dass die Rückmeldung zum Verschicken des Formulars ausgiebt – minus 360 Pixel. Stattdessen ließe sich auch jedes andere Element ansteuern.

Das Skript muss natürlich wieder in der Datei functions.php platziert werden Und die einzelnen Variablen müssten dann noch an die speziellen Bedürfnisse des verwendeten Themes bzw. Chil-Themes angepasst werden.