На многих сайтах устанавливаются формы обратной связи, чтобы пользователи могли оставить сообщение администратору не покидая сайт. Самым популярным, качественным и удобным в настройке и использовании является плагин Contact Form 7 — с его помощью можно создать любые контактные формы и не только. Поскольку плагин имеет большое количество различных форм и полей, то его можно использовать для многих задач. Я, например, использовал его для создания анкеты работодателя и соискателя на рекрутинговом сайте, для создания формы заказа товара на сайте по продаже только одной линии продукта, использовал этот плагин для создания сложной и объемной расчетной формы для строительного сайта, для самых различных форм обратной связи и прочих форм. Но речь не об этом, а о том, как же сделать, чтобы форма связи появлялась во всплывающем окне, чтобы можно было сделать кнопку вызова контактной формы на каждой странице, а не только на странице «Контакты»?
Все на самом деле не сложно, но понадобится еще один плагин с эффектом FancyBox, мне лично нравятся эти два плагина: Easy FancyBox или FancyBox for WordPress, есть различные похожие плагины, но любой из этих подходит отлично и еще позволяет открывать в popup изображения.
В общем, установлены два плагина: Contact Form 7 и Easy FancyBox, создана контактная форма, осталось добавить код в шаблон.
Код с всплывающей контактной формой, установленный в коде файла шаблона:
<a href="#contact_form_pop" class="fancybox">заказать звонок</a>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop">
<?php echo do_shortcode('[ contact-form-7 id="420" title="Заказать звонок" ]'); ?>
</div>
</div>
Это код самой кнопки вызова окна с формой, для этой кнопки можно задавать любые стили, и вставлять ее в любом месте шаблона:
<a href="#contact_form_pop" class="fancybox">заказать звонок</a>
Это код самого всплывающего окна, его можно оставить под кнопкой вызова окна, а можно убрать в футер для того, чтобы код контента был чище:
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop">
<?php echo do_shortcode('[ contact-form-7 id="420" title="Заказать звонок" ]'); ?>
</div>
</div>
Пример вызова двух форм обратной связи в pop-up окне:
<a href="#contact_form_pop_1" class="fancybox">Вызываем форму 1</a>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop_1">
<?php echo do_shortcode('[ contact-form-7 id="420" title="Заказать звонок" ]'); ?>
</div>
</div>
<a href="#contact_form_pop_2" class="fancybox">Вызываем форму 2</a>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop_2">
<?php echo do_shortcode('[contact-form-7 404 "Not Found"]'); ?>
</div>
</div>
В данном случае для вызова нескольких форм обратите внимание на эти части кода:
<a href="#contact_form_pop_1" ... <div id="contact_form_pop_1"> ... и для второй формы: <a href="#contact_form_pop_2" ... <div id="contact_form_pop_2"> ...