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:
1 2 3 4 5 |
<h3>Make an Appointment</h3> <p style="padding-bottom: 1em;">I would like to make an appointment. Please call me.</p> <p>Full name<br />[text* your-name-en]</p> <p>Phone number<br />[tel* tel-85]</p> <p>[submit "Send"]</p> |
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.
1 2 3 4 5 |
<div style="display: none;"> <div id="callback"> [contact-form-7 id="510" title="CallBack_EN"] </div> </div> |
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.
Als letztes bleibt noch mit einem Link auf das Rückrufformular zu verlinken:
1 |
<a href="#callback" title="callback form" class="fancybox-inline">make an appointment</a> |