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.
Kontakt aufnehmenNun wird unser Kontaktformular nach dem Klick auf den Link in einer Lightbox angezeigt.
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:
on_sent_ok: "jQuery('#fancyboxID-1').html('
Vielen Dank. Ihre Nachricht wurde gesendet.
‘); setTimeout( “parent.jQuery.fancybox.close();”,3000 ); ”
Diskussion
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
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
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,
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?
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
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
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.
Top, vielen Dank!
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?
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 ;-)
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