Print Friendly, PDF & Email

WordPress – Contact Form 7 Formular in Lightbox öffnen

14. August 2013

Das WordPress Plugin „Contact Form 7“ wird häufig in WordPress als Kontaktformular Plugin eingesetzt. Contact Form 7 kann aber noch deutlich mehr, als nur ein Kontaktformular bereit zustellen. Die Formulare können selbst erstellt, zusammen gestellt und dann per Shortcode veröffentlicht werden. Mit etwas html und css Kenntnissen kann man so ein Formular auch leicht in einer Lightbox sich öffnen lassen.

Als Lightbox Plugin habe ich mich für die „Easy FancyBox“ entschieden.

Folgenden Code einfach in die entsprechende Theme Datei kopieren, per css das Layout anpassen und schon hat man ein Formular, das sich in einer Lightbox öffnet erstellt.

1
2
3
4
5
6
7
8
<div style="display:none;"  class="fancybox-hidden">
<div id="fancyboxID-1" style="width: 500px; height:100%;">
<?php   echo do_shortcode("[contact-form-7 id='12544' title='Formular']"); ?>
</div>
</div>
<div id="formular">
<a class="fancybox" href="#fancyboxID-1">Formular in Lightbox öffnen</a>
</div>

Vorher muss in Contact Form 7 ein Formular erstellt werden, die Formular ID wird in den Code eingegeben.

Nachdem das Formular abgesendet wurde, erfolgt die Erfolgsmeldung in der Lightbox.