Contact Form 7 nach dem Senden ausblenden

Contact Form 7 blendet nach dem erfolgreichen Versand der Daten ein grün umrandetes Nachrichtenfeld ein, das den Versand bestätigt. Dabei bleiben alle Formularfelder ausgefüllt auf dem Bildschirm stehen. Keine ganz elegante Erscheinung, die man aber glücklicherweise anpassen kann.

Wichtiger Hinweis: Dieser Beitrag erschien bereits 2013 und es gibt unten ein Update vom 21.11.2018 zum neuen Vorgehen (reine CSS-Lösung).

Bisherige Version des Artikels:

Auf die folgende Weise kann man die Felder vom Contact Form 7 nach dem Versand ausblenden:

1. Gehen Sie in der Formularverwaltung in den HTML-Bereich links oben und legen Sie um die Felder einen neuen Div-Bereich an, z. B.

<div id="cfhide">

Im Quelltext sieht das dann etwa so aus:

<div id="cfhide">
<p>Ihr Name<br /> [text* name] </p>
<p>Ihr Vorname<br /> [text* vorname] </p>
...
</div>

Umschließen Sie dabei die Felder inklusive des „Senden“-Buttons.

2. Bei „Zusätzliche Einstellungen“ geben Sie folgenden Code ein:

on_sent_ok: "document.getElementById('cfhide').style.display = 'none';"

 

Diese kurze Codezeile bewirkt, dass alle Formularfelder nach dem Versand ausgeblendet werden. Die Meldung über den erfolgreichen Versand der Daten erscheint immer noch, was erwünscht ist. So sollte es aussehen:

Contact Form 7 nach Versand ausblenden

Update 21.11.2018

Seit Contact Form 7 Version 5.0 funktioniert das mit

on_sent_ok: "document.getElementById('cfhide').style.display = 'none';"

nicht mehr. Der Entwickler verweist auf DOM-Events, die man stattdessen nutzen kann. Ich habe nun eine reine CSS-Lösung gefunden, um das Formular nach dem Senden auszublenden. Voraussetzung ist, dass das oben beschriebene Div mit der ID cfhide gesetzt wurde. Einfach folgenden Code in den CSS des Themes hinterlegen:

.wpcf7-form.sent #cfhide {display: none;}

Hier wird ausgenutzt, dass die CSS-Klasse .sent nur nach dem erfolgreichen Senden der Formulardaten gesetzt wird. Das ist alles.

Schreibe einen Kommentar