Contact Form 7 mit Fancybox

In diesem WordPress-Beispiel soll ein Rückrufformular (callback) umgesetzt werden, welches über eine Fancybox aufgerufen wird.

Für das Erstellen des Rückrufformulars verwende ich das Contact Form 7 Plugin.
Als nächstes füge ich meinem neu generierten Formular die gewünschten Eingabefelder (Name und Telefonnummer) hinzu:

Der Shortcode des Formulars wird nun auf der gewünschten Seite eingebunden. Bei der Verwendung des Visual Composer mache ich dies über das Element der dynamischen Seitenleiste. Man kopiert den generierten Shortcode in ein Widget (hier wird beschrieben, wie das im Detail funktioniert). Im Stylesheet oder über das Style-Attribut ist das Formular auszublenden – da das Formular sonst auf der Seite angezeigt wird und es soll ja nur in der Fancybox erscheinen.

Der Shortcode wird in ein div-Element gepackt und ausgeblendet.

Für die Fancybox verwende ich das Plugin Easy FancyBox. Nach der Aktivierung des Plugins darf man nicht vergessen im Untermenü Medien bei Einstellungen (Media) das Häckchen bei ‚Inline content‘ zu setzen.

easy-fancybox

Als letztes bleibt noch mit einem Link auf das Rückrufformular zu verlinken: