Форму обратной связи можно увидеть почти на каждом сайте. В Wordpress для этого существует множество плагинов, среди которых наиболее популярный — Contact Form 7. Он простой в установке и настройке и дает нужный функционал.
Довольно эффектно на сайте смотрятся всплывающие формы обратной связи, которые появляются как бы в отдельном окне. Как видно на картинке ниже контактная форма возникает при нажатии на кнопку «Сделать заказ».
На коммерческих сайтах сейчас чаще всего делаю форму обратного звонка, в которой обычно 2 поля: Имя и телефон. Сделать подобную всплывающую форму довольно просто. Для этого вам понадобится установить на сайт 2 плагина:
- Уже упомянутый Contact Form 7.
- И плагин Easy FancyBox.
Второй плагин как раз обеспечивает представление элементов как бы в отдельном окне (фактически это, конечно, не полноценное окно, какие, например, бывают в системе Windows, это просто такое визуальное представление).
Предварительно вам нужно либо сделать либо взять уже подготовленный плагином Contact Form 7 шорткод для вывода формы.
На том месте, где должна быть кнопка с вызовом формы вставляем следующий код:
|
1 2 3 4 5 6 |
<a class="fancybox" href="#contact_form">Сделать заказ</a> <div style="display:none" class="fancybox-hidden"> <div id="contact_form"> <?php echo do_shortcode('[contact-form-7 id="2935" title="Заявка"]'); ?> </div> </div> |
Шорткод формы, который вам приготовил Contact Form, вы должны вставить в этом коде между двумя квадратными скобками вместо того кода, что там сейчас есть.
Нужно иметь ввиду, что если вы просто добавите указанный код на страницу в редакторе Wordpress, то он, скорее всего, не будет работать, поскольку содержит код php, а этот код будет работать, только если у вас стоит соответствующий плагин.
Я обычно добавляю вторую часть кода, которая содержит скрытую форму:
|
1 2 3 4 5 |
<div style="display:none" class="fancybox-hidden"> <div id="contact_form"> <?php echo do_shortcode('[contact-form-7 id="2935" title="Заявка"]'); ?> </div> </div> |
в файл footer.php в конец перед закрывающим тегом body, и все отлично работает.
Вместо кода с формой можно таким же образом отобразить любые элементы. Для этого нужно поместить их вместо кода.
|
1 |
<?php echo do_shortcode('[contact-form-7 id="420" title="Сделать заказ"]'); ?> |
Полезный совет
Если вам нужно сделать модальную (всегда остающуюся вверху) форму, уберите в настройках плагина Easy FancyBox пометку «Close FancyBox when overlay is clicked» (закрывать окно, когда кликают мышкой за его пределами).
при такой связке CF7 + Easy FancyBox отправляющий увидит результат работы формы CF7? — сообщение о том, что запрос отправлен или не отправлен.
Да, увидит. Как и в стандартном случае.
Спасибо за статью. Такой вопрос — как заставить работать связку Contact Form 7 + Easy Fancy Box + Contact Form 7 Dynamic Text Extension ?
Нужно, чтобы по клику форма открывалась в попапе и в нее передавались GET параметры из ссылки.
Олег, с плагином Contact Form 7 Dynamic Text Extension дела не имел. Поэтому не могу ответить.