Kontaktformular mit Contact Form 7 in einer Lightbox anzeigen

Mit einem entsprechenden Plugin kann man ein Kontaktformular von Contact Form 7 in einer Lightbox anzeigen, die sich nach der erfolgreichen Absendung automatisch schließt.

Zunächst brauchen wir ein entsprechendes Lightbox Plugin, welches die Anzeige von inline content ermöglicht. Hier bietet sich z.B. Easy Fancybox an. Nun erstellen wir einen div, den wir mit display:none verstecken. In diesen div legen wir einen weiteren div mit einer eindeutigen ID, der das Kontaktformular beinhaltet. Wenn man mit einem WordPress Template arbeitet, kann man den Shortcode für das CF7 Konktaktformular mit Hilfe der Funktion do_shortcode über php ausführen. Schreibt man den Code im WordPress Editor der Webseite, kann man den Shortcode einfach wie gewohnt ohne php in das div eintragen.

Um das Kontaktformular per Klick anzuzeigen, ergänzen wir einen Link auf den Div mit der eindeutigen ID.

Nun wird unser Kontaktformular nach dem Klick auf den Link in einer Lightbox angezeigt.

cf7-lightbox

Nach dem Absenden erfolgt standardmäßig die Contact Form 7 Erfolgsmeldung in der Lightbox und der Nutzer muss diese aktiv über das Kreuz in der oberen rechten Ecke schließen.

Eine Alternative wäre die automatische Weiterleitung auf eine andere Seite. Viel schöner ist es aber, in der Lightbox selbst das Formular auszublenden und nur die Erfolgsmeldung der Nachricht anzuzeigen und anschließend die Lightbox automatisch zu schließen. Hierzu verwenden wir den Javascript action hook ‚on_sent_ok‘, der in den Optionen des Kontaktformulars unter „zusätzliche EInstellungen“ eingegeben werden kann. Hier kann prinzipiell jeder Javascript Code eingegeben werden, der nach einer erfolgreichen Formularabsendung ausgeführt werden soll.

Für unseren Zweck geben wir per HTML eine Erfolgsnachricht aus und schliessen die Fancybox nach 3 Sekunden automatisch. Folgende Angaben sind hierzu unter „zusätzliche Einstellungen“ des Formulars notwendig:

cf7-lightbox-selfclose

Vielen Dank. Ihre Nachricht wurde gesendet.

‚); setTimeout( „parent.jQuery.fancybox.close();“,3000 ); “

cf7-lightbox-close


0 0 0


Diskussion

avatar placeholder
7. August 2013 von Sven

Hallo Nina,
genau diese Idee möchte ich umsetzen, nur leider verstehe ich in Deiner Beschreibung nur Bahnhof. ;) Könntest Du das bitte auch für Laien erklären? Wie erstelle ich ein div, wo kommt der Code hin und wie wird das Formular in die Lightbox eingebunden. Es wäre ganz lieb von Dir :)

Gruß Sven

avatar placeholder
8. August 2013 von Nina Taberski-Besserdich

Lieber Sven,

ich habe den Artikel an einigen Stellen angepaßt, ich hoffe, du kannst damit nun mehr anfangen. Bei weiteren Fragen einfach posten!

viele Grüße
Nina

avatar placeholder
15. August 2013 von Ente

Hallo Nina,

ich bekomme es leider auch nicht ganz richtig hin. Wäre es möglich eine Beispielseite zuzufügen.
Oder als Download-Datei.

mit freundlichen Grüßen
Ente

avatar placeholder
16. September 2013 von Christian

Hallo Nina,
vielen Dank für diese Einführung! Das Einbinden hat geklappt und das Formular wird in der Lightbox angezeigt. :) Nur der Punkt mit der Erfolgsmeldung und dem automatischen schließen klappt nicht. Nach dem Absenden wird nun gar kein Text ausgegeben (die Email kommt aber trotzdem an). Hast Du eine Idee was da schief läuft? DANKE

Viele Grüße,

avatar placeholder
18. September 2013 von Nina Taberski-Besserdich

Ein Beispiel findet Ihr unter https://www.zehlendorf.de/ort/besserdich-it-consulting/ – der Link „Email schreiben“ wird so umgesetzt.

@christian: Hast du wirklich die zusätzlichen Einstellungen im CF7-Formular selbst vorgenommen?

avatar placeholder
29. April 2014 von Korbinian

Hallo Nina,

ich würde gerne, dass mit dem Bestätigen des „Senden“-Buttons eine neue Seite geöffnet wird.
Ist dies möglich?

Korbinian

avatar placeholder
7. Oktober 2014 von Tobias

Hallo Nina,

habe das gleiche Problem wie Christian. Habe deine Anleitung genau so umgesetzt, allerdings wird keine Erfolgsmeldung ausgegeben, auch schließt sich das Fenster nicht von alleine.

Danke und Grüße

avatar placeholder
22. Februar 2015 von Jürgen

Hallo Nina,
danke für diese superschöne Idee. Und ich hatte vergeblich nach einem Popup Plugin gesucht. :-(

Was leider nicht klappt: Es kommt nach Versand keine Erfolgsmeldung, überhaupt nichts, und das cf-7 wird nicht automatisch geschlossen. Die Email kommt aber trotzdem an.

Dabei hatte ich den html Text wie folgt in die „zusätzlichen Einstellungen von cf-7 übernommen:
on_sent_ok: „jQuery(‚#fancyboxID-1‘).html(‚
Vielen Dank. Ihre Nachricht wurde gesendet.
‚); setTimeout( „parent.jQuery.fancybox.close();“,3000 ); “

Hast Du eine Idee, was geändert werden sollte? Danke.

avatar placeholder
5. März 2015 von Malte

Top, vielen Dank!

avatar placeholder
28. April 2016 von Michael Pagenkopf

Hallo!

Habe alles genau so gemacht, wie du es beschreibst. Es funktioniert jedoch nicht.
Die „Erfolgsnachricht“ erscheint immer nur unter der Contact Form und sie schließt sich nicht.

Was ist da los?

avatar placeholder
18. Mai 2016 von Thomas

Nachdem ich auch einige Stunden gerätselt habe….

Hier der richtige Code:

on_sent_ok: „jQuery(‚#fancyboxID-1‘).html(‚Vielen Dank. Ihre Nachricht wurde gesendet.‘); setTimeout( „parent.jQuery.fancybox.close();“,3000 ); “

Die Anführungszeichen sind die Lösung ;-)

Mitdiskutieren