Contact Form 7 ist ein extrem beliebtes Formular-Plugin. Über eine Millionen aktive Installationen. Dabei kann es auf dem ersten Blick gar nicht mit den großen Formbuilder-Plugins mithalten, die WordPress so zu bieten hat. Doch das Plugin punktet mit vielen Filtern, so dass es zahlreiche Plugins gibt, die das Plugin noch erweitern. Manche Erweiterung kann aber auch schnell selbst gebaut werden.

Bei einem Kunden benötigte ich die Weitergabe von Informationen eines Formulars an ein zweites Formular. Dazu muss das erste Formular nach dem erfolgreichen Verschicken des Formulars auf eine Erfolgsseite weiterleiten. Dazu bietet Contact Form 7 eine eigene Funktion an, die bei „Zusätzliche Einstellungen“ angegeben wird. Dabei wird ein Javascript-Befehl an ein Event (in diesem Fall das erfolgreiche Versenden des Formulars) gehängt.

on_sent_ok: "location = 'https://example.org/formular2/"

Um die Daten über einen Query-String weiter zu geben müssen die Formular-Daten noch serialisiert werden. Praktischerweise ist der Javascript-Befehl frei anzupassen und mit ein wenig jQuery-Magie, die ich auf StackOverflow gefunden habe, sind schnell sämtliche Formular-Felder angehängt:

$('form.wpcf7-form').serialize()

Schon ganz gut. Aber so werden auch alle versteckten Felder mit angehängt.

Contact Form 7 bietet aber auch das Hinzufügen von CSS-Klassen an, so dass unser jQuery angepasst werden kann, nur die Felder anzugeben, die zum Beispiel die Klasse wpcf7-param haben:

$('form.wpcf7-form .wpcf7-param').serialize();

Die vollständige Zeile sieht dann zum Beispiel so aus:

on_sent_ok: "location = 'https://example.org/formular2/?level=1&' + $('form.wpcf7-form .wpcf7-param').serialize();"

Als letzten Schritt muss nun nur noch das zweite Formular auch die Daten annehmen. Dazu wird dem Eingabefeld ein default:get hinzugefügt. Mehr Infos dazu stehen in der Doku von Contact Form 7.

So kann mit relativ einfachen Mitteln eine Datenübergabe zwischen zwei Formularen auch bei Contact Form 7 eingerichtet werden.

Du kennst noch mehr Tricks für CF7 oder praktische Zusatzplugin, dann ab damit in die Kommentare!

Update:
Die vorgestellte Methode ist inzwischen veraltet und wird womöglich zum Ende des Jahres aus dem Plugin entfernt. Also Zeit diesen Artikel mal zu aktualisieren.

Plugin-Entwickler Takayuki Miyoshi hat auf der Contactform7-Website erläutert wie man den Code ersetzen.

Leider ist dazu ein externes Code-Snippet notwendig. Die Angabe kann/soll nicht mehr im Plugin selbst erfolgen. Unser finaler Code könnte dann so aussehen:

function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '123' == event.detail.contactFormId ) {
        location = 'https://example.org/formular2/?level=1&' + $('form.wpcf7-form .wpcf7-param').serialize();
    }
}, false );
</script>
<?php
}
add_action( 'wp_footer', 'mycustom_wp_footer' );

Wobei 123 die ID des Formulars ist. Der Code gehört in eine functions.php, in die Code-Snippets-Sammlung oder in ein „funcionality“-Plugin.