ВСПЛЫВАЮЩАЯ ФОРМА ОБРАТНОИ СВЯЗИ WORD PRESS С ПОМОЩЬЮ ПЛАГИНОВ CONTACT FORM 7 И POPUPMAKER

В прошлом e-mail маркетинг был на пике популярности, люди с базами от 10000 человек зарабатывали деньги, продавая свои или чужие товары, либо просто на рекламе. Кто еще помнит SmartResponder? Он первый в рунете давал собирать с помощью форм контактные данные посетителей сайта. Тогда о таких вещах как политика конфиденциальности и не слышали, базы продавались и перекупались.

Сейчас научимся делать всплывающие формы для отправки сообщений из форм обратной связи автору сайта. В WordPress использую связку плагинов Popup maker и Contact form 7, почему:

• Они постоянно обновляются
• Профессиональные разработчики
• У инструментов есть интеграция друг с другом
• На русском языке

В Contact Form 7 создадим форму обратной связи с полями ввода Имя, Почта и Вопрос. Чтобы установить плагин вводим в поиске название, устанавливаем и активируем.

После активации в меню появится новый раздел в WordPress, заходим и нажимаем Добавить новую, появится стандартная текстовая область с уже заполненными строками.

Они не нужны, единственно оставляем теги label. Нужно три поля, приведем к виду.

Оставляем submit это кнопка для отправки. В верхнем меню есть несколько кнопок нас интересует «текст», «e-mail» и «текстовая область». В первом пользователь будет вводить имя, во втором свою почту и в третьем вопрос.

1. Выбираем Текст
2. Если обязательно для заполнения то отмечаем галочкой
3. Уникальный идентификатор, оставляем без изменения
4. Значение, которое отображается по умолчанию, что нужно ввести
5. Если отметить чекбокс, то название поля будет внутри
6. Можем задать class, чтобы в дальнейшем привязать к нему CSS стили для оформления
7. Находим вставить тег

Переместил получившийся шорткод между тегами label, должно получится так.

Тоже самое делаем с остальными полями, нажимаем и перемещаем между тегами label. Нас интересуют элементы указанные на скриншоте.

Делаем по аналогии, что получилось.

Для текстовой области задал другой класс forma-2, потому что ее надо настраивать по другим правилам и стилям. Теперь нажимаем на Сохранить.

Переходи во вкладку Письмо, навастриваем несколько параметров, смотрим на снимок.

1. Вкладка письмо
2. Те шорткоды с номерами, которые создавали в разделе Шаблоны, их копируем в область Тело письма, это будет приходить при заполнении формы вам на почту. Дописал напротив каждого фразы Имя, чтобы обозначить какая информация будет мне поступать на почту.
3. Тема отображается когда письмо придёт на почту
4. Дополнительные заголовки советую стереть, никакой помощи не добавляют, а лишь ошибки при отправке
5. В разделе Кому указываем почту, на которую получать письма с формы, по умолчанию берется из аккаунта WordPress

Нажимаем внизу сохранить, и смотрим на шорткод, который выдает плагин для данной формы. Обязательно заполняем название, копируем в отдельный документ шорткод и нажимаем еще раз на Сохранить.

Устанавливается стандартно из админки WordPress, вводим в поиске по плагинам Popup Maker, устанавливаем и активируем.

Переходим в левой панели в одноименный раздел и нажимаем Добавить всплывающее окно. Заполняем имя всплывающего окна, название можно не прописывать, иначе оно появится на сайте. Помещаем в текстовое поле шорткод скопированный после создания формы обратной связи.

Спускаемся ниже и видим меню настройки всплывающего окна. Выбираем пункт Триггеры, находим кнопку Добавить новый.

Обычно обратная связь появляется по нажатию кнопки, поэтому из списка выбираем параметр Открыть и на Добавить. Можете выставить при наведении или через промежуток времени, но нужно настроить куки, а то модальное окно надоест посетителю.

Появится новое окно, задаем класс обязательно с точкой, введу .osnova. Для триггера основанного на нажатии куки не нужны, выбираем Добавить или обновить если создаете не в первый раз.

Походите по другим разделам, настройте внешний вид, анимацию и другие параметры появления, в статье разбирать не будем.

После публикации проверим работу всплывающей формы в WordPress. Осталось добавить класс .osnova к любому элементу на сайте. Создадим новую статью, и вставим всплывающую обратную связь по нажатию картинки.

Теперь переходим во вкладку текст и прописываем в поле class стиль osnova.

Жмем и появляется всплывающая форма обратной связи сделанная на WordPress. Заполните данные и отправьте для теста.

Попап нуждается в доработке, поиграйтесь с настройками отображения (выбрал тему оформления fancybox), добавьте стили к полям (мы прописывали forma-1 и forma-2) и получиться очень симпатичный вариант.

В Gutenberg, чтобы привязать класс нужно нажать на три точки у блока и выбрать «Редактировать как HTML», а дальше по старой схеме.

Для более простого понимания процесса советую посмотреть авторское пошаговое видео.

Плагином Easy Fancy box в форме ссылки

В поисковой выдаче есть запросы на тему всплывающей обратной связи через плагин Easy Fancy Box в форме ссылки, поэтому обязан написать обзор. Устанавливаем дополнение поиском из панели.

Переходим в админке Настройки > Медиафайлы. Из первого пункта убираем все отметки и оставляем Inline Content. Так отменили появление popup при нажатии на картинку.

Берем код прописанный ниже, в разделе Внешний вид > Виджеты добавляем новый типа HTML–код, вписываем в него скопированную конфигурацию обратной связи.

<a href="#form_popup1" class="fancybox-inline">Отправить сообщение</a>
<div style="display:none" class="fancy-box">
<div id="form_popup1">
[contact-form-7 id="246" title="Всплывающая форма"]
</div>
</div>

По логике заменяем мой шорткод от Contact Form 7 на свой. Переходим на блог и проверяем работу, в примере действие происходит нажатием по ссылке.

Можно менять текст, прибавлять новые div, только не меняйте ID и CLASS – они привязаны к fancy box, добавляйте стили к тем что сейчас стоят коде. Вставляйте в статьях или напрямую в код шаблона.

Чтобы сделать всплывающее окно с обратной связью в Elementor не нужно больших знаний. Переходим в Popup Maker и в тригерах (ранее разбирали) добавляем через запятую id с помощью знака решетки через запятую. Не забываем обновлять тригер формы и сам проект.

Пример исполнения:
.osnova, #form-test

Переходим в Elementor, создаем кнопку, жмем на ней левой клавишей мыши. Появится боковая панель, в поле id вписываем ранее заданный параметр в попапмейкере без решетки.

Переходим в предварительный просмотр, кликаем по, появляется всплывающее окно с обратной связью.

Открывается, заполняем обратную связь и смотрим приходит ли письмо на почту. Конечно, во всех разобранных методах нужны визуальные настройки формы, но при базовых знаниях CSS сделать не составит труда.

Итог

На этом закончу статью, мануал получился не маленький, давайте выведем чек–лист действий:

• Устанавливаем оба плагина WordPress
• В Contact form 7 создаем новую форму, настраиваем ее по инструкции
• Добавляем шорткод в новый попап Popupmaker
• Настраиваем отображение окна
• Привязываем класс к любому элементы на сайте
• Проверяем работу

Наконец решили проблему как создать всплывающую форму обратной связи на WordPress, пишите свои вопросы в комментариях, удачи.

Создание всплывающей формы обратной связи на wordpress

• Создание формы обратной связи с помощью плагина Contact Form 7
• Форма обратной связи во всплывающем окне
• Передача url, заголовка страницы в форме Contact Form 7
• Настроим стили CSS всплывающего окна и формы обратной связи
• Научим Contact Form 7 отправлять SMS сообщения

Пример формы обратной связи на странице «Контакты»

---

Форма обратной связи с помощью плагина Contact Form 7

Устанавливаем плагин Contact Form 7:

1. Переходим в административную панель
2. Далее жмем — » Плагины » Добавить новый
3. Вводим в поиск «Contact Form 7»
4. Устанавливаем и активируем плагин

Как видите — ничего сложного, обычная процедура установки плагина.

Настраиваем форму обратной связи на wordpress

После установки плагина, слева (в панели управления) появится вкладка «Contact Form 7». Нажимаем на неё, тут добавляем новую форму (старую можно удалить или изменить)

1. Добавляем новую форму
2. Вводим название формы
3. На вкладке «Шаблон формы» оставляем только нужные нам поля для ввода данных.
   Своим клиентам (на коммерческих сайтах) я обычно оставляю всего два поля — «Имя» и «Телефон», чем меньше клиенту вводить данных, тем больше шансов, что он вообще будет их вводить.
4. Переходим во вкладку «Письмо» и настраиваем сообщение, которое придет на почту
   
5. Сохраняем форму, копируем и вставляем шорткод, например на страницу обратной связи или контактов.
   

---

Как сделать всплывающую форму обратной связи на wordpress

1. Для создания всплывающей формы необходимо установить плагины  Contact Form 7 (если он еще не установлен) и  Easy FancyBox
2. Активируем плагины и настраиваем Contact Form 7    (смотрите выше). Плагин Easy FancyBox настраивать не нужно.
   1. Код всплывающей формы обратной связи при клике по тексту:

        <a class="fancybox" href="#contact_form_pop">Написать письмо</a>
      <div class="fancybox-hidden" style="display: none;">
      <div id="contact_form_pop">ШОРТКОД</div>
      </div>

   2. Код всплывающей формы обратной связи при клике на картинку:

        <a class="fancybox" href="#contact_form_pop"><img src="/wp-content/uploads/2016/11/call.png" alt="" /></a>
      <div class="fancybox-hidden" style="display: none;">
      <div id="contact_form_pop">ШОРТКОД</div>
      </div>

      В некоторых случаях, если при клике на ссылку возникают проблемы и форма отсутствует (The requested content cannot be loaded.), тогда нужно заменить класс «fancybox» на «fancybox-inline».

      Устанавливаем код в всплывающей формы в нужном месте.

Как вставить url и заголовок товара (страницы) в форму обратной связи на wordpress

Больше не придется просить клиентов заполнять поле «Название товара»

Есть очень простое решение  Contact Form 7  +  Dynamic Text Extension

От слов к делу:

1. Скачиваем и устанавливаем плагин Contact Form 7 и  Contact Form 7 — Dynamic Text Extension
2. Переходим в настроки контактой формы во вкладку «Шаблон формы»
3. Генерируем тег «Dynamic hidden»
4. Добавляем к тегам дополнительные параметры для передачи сведений о странице, в итоге у Вас должно получиться примерно так:

     [dynamichidden dynamichidden-860 "CF7_URL"]
   [dynamichidden dynamichidden-423 "CF7_get_post_var key=’title'"]

   Можете скопировать код и поменять в нем идентификаторы на свои

   

5. Переходим во вкладку «Письмо». Указываем свои теги

     [dynamichidden-860]
   [dynamichidden-423]

   

Вот и всё! Передача url и заголовка в письме обратной формы настроена, можно наслаждаться результатом!

Знаю человека, который сделал сотню однообразных форм для товаров, лишь бы узнать с какой именно страницы пришел заказ.

Это решение непременно понравится новичкам в сфере создания сайтов. Кроме того, все проведенные манипуляции не заметны для пользователя. А то, что мы знаем больше информации о заявках, облегчит жизнь как покупателям так и менеджерам. Информация о заказе даст нам возможность конструктивно провести диалог или переписку и не даст нам потратить зря драгоценное время.

---

Меняем стили CSS Contact form 7 и всплывающего окна (Fancybox) формы обратной связи

Для начала, отключим стили плагина Fancybox

Переходим в файл функции темы (functions.php) и вставим в конец файла следующий код:

  add_action ('wp_print_styles','seoved_fancy',100);
function seoved_fancy () {
 // add handles for styles you wish to remove
 wp_deregister_style ('fancybox');
}

Подключаем свои стили оформления формы обратной связи на вордпресс

Скопируем стили плагина в файл Вашей темы style.css. Можете скопировать мои стили и редактировать их по своему желанию, пример оформления всплывающей формы обратной связи на странице контакты


1px solid #777
1px solid #777
10px 10px 0
2px solid #54a1d9
transparent url(https://seovedenie.ru/wp-content/uploads/2016/11/x.png) 0 0
normal 12px/20px Arial

.rtl #fancybox-left:hover span

.rtl #fancybox-right:hover span

url(fancybox.png) -40px -90px no-repeat0 0 0 15px
url(fancybox-x.png) 0 -40px0 0 3px
url(fancybox.png) -55px -90px no-repeat0 0 0 15px

#fancybox-wrap div .wpcf7-validation-errors,#fancybox-wrap div .wpcf7-mail-sent-ok

Форма обратной связи Contact form 7 на WordPress во всплывающем окне

---

Contact Form 7 и отправка SMS сообщений с сайта wordpress

В связи с тем, что данное внедрение стало платным (0.50-1.25 за сообщение), решил пока не писать, но если кому будет интересно, обязательно напишу. Кстати, 5 SMS в день сервис sms.ru все же оставил своим пользователям.

Кроме шуток. Кого интересует данный способ реализации, напишите мне и ответ не заставит себя долго ждать!

Или, если не хотите тратить время, можете заказать форму обратной связи для сайта на WordPress прямо сейчас:

---

Вам будет интересно:

По умолчанию в WP нет такого функционала, но на помощь приходят плагины и специально разработанные конфигурации для движка.

Форма обратной связи WordPress плагином Contact Form 7

Разберу бесплатный Contact Form 7, который переведен на русский язык. В стандартном исполнении она включает в себя:

• Имя
• Адрес почты
• По желанию телефон
• Текст сообщения
• Капча

Добавить капчу reCaptcha

Устанавливаем плагин стандартно через админку WordPress, так выглядит в панели.

Перебросит в сервис, настраиваем пункты как на скриншоте, правильно вводим домен, внизу нажимаем отправить.

Создание формы

Заходим в настройки и создаем новую форму. Стираем стандартную разметку.

Вводим название нового проекта и нажимаем кнопку Текст, потому что имя будут вводить текстом без правил.

Появиться всплывающее окно, настраиваем по потребностям.

1. Тип определяет обязательно ли посетителю заполнять поле, я поставил да
2. Имя не меняем это уникальный идентификатор
3. Значение по умолчанию, ввел фразу, которую увижу внутри
4. Использовать вместо заполнителя, то есть пока ничего не будет введено надпись будет отображаться
5. Не советую пользоваться полем Akismet
6. Для добавления стилей вводим class или id, сделал pole-imya
7. Вставляем тег в общее поле

Аналогично нажимаем кнопку e-mail, видим тот же интерфейс.

Добавляем раздел текстовой области и телефона (по желанию), принцип одинаковый.

Осталось добавить кнопку отправки, выбираем из списка и настраиваем ее вывод.

В результате получился такой код.

Настройка отправки письма

Нажимаем сохранить, переходим во вкладку Письмо, теперь настраиваем отправку на почту.

1. Теги полей созданные ранее
2. Адрес почты куда будут приходить письма
3. От кого и тема, заполняйте по желанию
4. Дополнительные заголовки, полностью очищаем
5. Прописываем в теле письма, что желаем получать на почту после отправки. Например, набрал Почта и вставил, соответствующий тег напротив этого слова.
6. Внизу нажимаем Сохранить

Протестируйте остальные вкладки уведомлений и настроек, можно поменять текст, выводящийся в разных ситуациях.

Вставка формы на сайт

Вверху страницы сформировался шорт код, копируем его.

Идем в любую запись и вставляем.

После нажатия кнопки Посмотреть, перекинет на сайт с отображением проделанной работы.

Сделать поля горизонтально в строчку

Посмотрел в интернет и ужаснулся, сколько манипуляций делают. Настроить полностью оформление не покажу, это тема ни одного большого мануала. Заходим в редактирование формы и оборачиваем поля, которые хотим выстроить горизонтально в div с классом, смотрим код.

<div class="flex-form">
[text* your-name]
[email* your-email]
[text your-subject]
</div>
[textarea your-message]
[submit "Отправить"]

Поле Имя, Почта и Телефон хочу выстроить в строчку. Не забываем сохранять изменения.

Заходим в админке WordPress Внешний вид > Редактор тем > style.css прописываем стили для обратной связи WordPress в конец файла.

.flex-form{display:flex;}
@media only screen and (max-width: 655px){.flex-form{display:block;}}

Из стилей видно, что div с классом flex-form присвоили свойство display:flex оно задает расположение элементов в строку, без дополнительных параметров пространство делится поровну.

Всплывающая форма обратной связи

Положительно на приеме заявок действуют всплывающие окна с обратной связью от CF7. Плагин для вывода всплывающего окна будет Popup Maker. Описывать не буду, ссылка на материал расположена в этом абзаце.

Как добавить в elementor

Для вставки формы в elementor нужно использовать раздел shortcode. Форма создана по инструкции выше, значит шорткод от CF7 есть. Переходим в создание страницы в элементоре и в поиске по элементам ищем шорткод.

Далее перетаскиваем модуль в активную область, в параметрах блока вставляем код формы. Функция сработала и вывела на экран результат в виде формы обратной связи.

Используем настройку темы

В большинстве шаблонов WordPress нет инструментов для создания в автоматическом режиме обратной связи. Но наши темплейты от WPShop имеют встроенную функцию, которая выводится с помощью шорткода. Разберем на примере . Перехожу в создание страницы, далее смотрим на снимок.

• Прописываем текст [ contactform ] (без пробелов внутри скобок)
• Жмем предпросмотр

Откроется страница с уже адаптированной, размеченной и сверстанной формой, по которой посетитель может получить обратную связь с администратором.

Feedback через виджеты

Вставить feedback в виджеты просто. Поможет виджет текст, переносим его в активную зону и прописываем шорткод в него.

Задаем заголовок, заносим конфигурацию в текстовую область, переходим на блог и смотрим, как обрабатывается обратная связь.

Обратная связь без плагина

Если предпочитаете способы без плагина, то есть отличная инструкция с сайта Финты WordPress.

Открываем файл function.php для редактирования, прописываем в самый низ код, как пользоваться FTP и изменять PHP разбирали туn.

/*код обратной связи*/
add_shortcode( 'art_feedback', 'art_feedback' );
function art_feedback() {

	ob_start();
	?>
	<form id="add_feedback">
		<input type="text" name="art_name" id="art_name" class="required art_name" placeholder="Имя" value=""/>

		<input type="Почта" name="art_email" id="art_email" class="required art_email" placeholder="Ваш E-Mail" value=""/>

		<input type="text" name="art_subject" id="art_subject" class="art_subject" placeholder="Тема" value=""/>

		<textarea name="art_comments" id="art_comments" placeholder="Введите ваше обращение" rows="10" cols="30" class="required art_comments"></textarea>

		<input type="checkbox" name="art_anticheck" id="art_anticheck" class="art_anticheck" style="display: none !important;" value="true" checked="checked"/>

		<input type="text" name="art_submitted" id="art_submitted" value="" style="display: none !important;"/>

		<input type="submit" id="submit-feedback" class="button" value="Отправить"/>
	</form>
	<?php

	return ob_get_clean();
}

Создали форму в HTML разметке WordPress и подвязываем ее на шорткод. Думаю такой подход будет удобен, потому что вывести блок можно будет в любом месте.

Перейдя на сайт увидим не сформированную форму, поля работают, но письмо отправляться не будет, потому что не привязан PHP обработчик.

Теперь настроим внешний вид, вставляем данный код в файл style.css активной темы.

#add_feedback {
    margin: 20px 0 0;
    position: relative;
}

#art_name, #art_email, #art_subject, #art_comments {
    padding: 10px 5px;
    display: inline-block;
    width: 49.548%;
    border-radius: 3px;
    border: 1px solid #ddd;
    font-size: 0.9em;
}

#art_subject {
    width: 100%;
    margin: 5px 0;
}

#art_comments {
    width: 100%;
}

#add_feedback .button {
    border: none;
    padding: 10px 20px;
    color: #fff;
    font-size: 1em;
    display: inherit;
    margin: 10px 0 0 0;
    border-radius: 3px;
    background-color: #2f94ce;
}

#add_feedback input[type="text"]:focus, #add_feedback input[type="password"]:focus, #add_feedback input[type="email"]:focus, #add_feedback textarea:focus {
    color: #444;
    box-shadow: 0 0 3px rgba(68, 68, 68, 0.2);
}

.error-text {
    background: #F59E9E;
    padding: 15px 0px;
    text-align: center;
    color: #fff;
}

.error-name, .error-email, .error-comments {
    display: inline-block;
    font-size: 11px;
    position: absolute;
    top: -30px;
    color: white;
    border: 1px solid red;
    padding: 5px 10px;
    line-height: 1.1;
    background: red;
    box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.3);
}

.error-name:after, .error-email:after, .error-comments:after {
    content: '';
    position: absolute;
    left: 20px;
    bottom: -10px;
    border: 5px solid transparent;
    border-top: 5px solid red;
}

.error-comments {
    top: 16%;
    left: 0;
}

.error-name {

    left: 0;
}

.error-email {
    right: 4%;
}

.message-success {
    background: rgba(0, 128, 0, 0.5);
    color: #fff;
    padding: 20px;
    text-align: center;
    margin: 20px auto;
    border-radius: 3px;
}

#add_feedback .error {
    border: 1px solid red;

}

#add_feedback .required:after {
    content: '*';
    position: absolute;
    left: 20px;
    bottom: -10px;
}

#art_name:focus::-moz-placeholder,
#art_name:focus:-moz-placeholder,
#art_name:focus:-ms-input-placeholder,
#art_email:focus::-webkit-input-placeholder,
#art_email:focus::-moz-placeholder,
#art_email:focus:-moz-placeholder,
#art_email:focus:-ms-input-placeholder,
#art_comments:focus::-webkit-input-placeholder,
#art_comments:focus::-moz-placeholder,
#art_comments:focus:-moz-placeholder,
#art_comments:focus:-ms-input-placeholder,
#art_subject:focus::-webkit-input-placeholder,
#art_subject:focus::-moz-placeholder,
#art_subject:focus:-moz-placeholder,
#art_subject:focus:-ms-input-placeholder {
    color: transparent
}

 

Создаем файл feedback.js и помещаем в него код. Загружаем на хостинг в папку js активной темы.

jQuery(document).ready(function ($) {
    var add_form = $('#add_feedback');

    // Сброс значений полей
    $('#add_feedback input, #add_feedback textarea').on('blur', function () {
        $('#add_feedback input, #add_feedback textarea').removeClass('error');
        $('.error-name,.error-email,.error-comments,.message-success').remove();
        $('#submit-feedback').val('Отправить сообщение');
    });

    // Отправка значений полей
    var options = {
        url: feedback_object.url,
        data: {
            action: 'feedback_action',
            nonce: feedback_object.nonce
        },
        type: 'POST',
        dataType: 'json',
        beforeSubmit: function (xhr) {
            // При отправке меняем надпись на кнопке
            $('#submit-feedback').val('Отправляем...');
        },
        success: function (request, xhr, status, error) {
            
            if (request.success === true) {
                // Если все поля заполнены, отправляем данные и меняем надпись на кнопке
                add_form.after('<div class="message-success">' + request.data + '</div>').slideDown();
                $('#submit-feedback').val('Отправить сообщение');
            } else {
                // Если поля не заполнены, выводим сообщения и меняем надпись на кнопке
                $.each(request.data, function (key, val) {
                    $('.art_' + key).addClass('error');
                    $('.art_' + key).before('<span class="error-' + key + '">' + val + '</span>');
                });
                $('#submit-feedback').val('Что-то пошло не так...');

            }
            // При успешной отправке сбрасываем значения полей
            $('#add_feedback')[0].reset();
        },
        error: function (request, status, error) {
            $('#submit-feedback').val('Что-то пошло не так...');
        }
    };
    // Отправка
    add_form.ajaxForm(options);
});

Теперь загружаем вторую часть кода в function.php.

/*вторая часть*/
add_action( 'wp_enqueue_scripts', 'art_feedback_scripts' );
function art_feedback_scripts() {

	// Обработка полей
	wp_enqueue_script( 'jquery-form' );

	// Подключаем файл скрипта
	wp_enqueue_script(
		'feedback',
		get_stylesheet_directory_uri() . '/js/feedback.js',
		array( 'jquery' ),
		1.0,
		true
	);

	// Задаем данные объекта ajax
	wp_localize_script(
		'feedback',
		'feedback_object',
		array(
			'url'   => admin_url( 'admin-ajax.php' ),
			'nonce' => wp_create_nonce( 'feedback-nonce' ),
		)
	);

}

add_action( 'wp_ajax_feedback_action', 'ajax_action_callback' );
add_action( 'wp_ajax_nopriv_feedback_action', 'ajax_action_callback' );

function ajax_action_callback() {

	// Массив ошибок
	$err_message = array();

	// Проверяем nonce. Если проверка не прошла, то блокируем отправку
	if ( ! wp_verify_nonce( $_POST['nonce'], 'feedback-nonce' ) ) {
		wp_die( 'Данные отправлены с неправильного адреса' );
	}

	// Проверяем на спам. Если скрытое поле заполнено или снят чек, то блокируем отправку
	if ( false === $_POST['art_anticheck'] || ! empty( $_POST['art_submitted'] ) ) {
		wp_die( 'Это спам' );
	}

	// Проверяем полей имени, если пустое, то пишем сообщение в массив ошибок
	if ( empty( $_POST['art_name'] ) || ! isset( $_POST['art_name'] ) ) {
		$err_message['name'] = 'Пожалуйста, введите ваше имя.';
	} else {
		$art_name = sanitize_text_field( $_POST['art_name'] );
	}

	// Проверяем полей почты, если пустое, то пишем сообщение в массив ошибок
	if ( empty( $_POST['art_email'] ) || ! isset( $_POST['art_email'] ) ) {
		$err_message['email'] = 'Пожалуйста, введите адрес вашей электронной почты.';
	} elseif ( ! preg_match( '/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i', $_POST['art_email'] ) ) {
		$err_message['email'] = 'Адрес электронной почты некорректный.';
	} else {
		$art_email = sanitize_email( $_POST['art_email'] );

	}
	// Проверяем полей темы письма, если пустое, то пишем сообщение по умолчанию
	if ( empty( $_POST['art_subject'] ) || ! isset( $_POST['art_subject'] ) ) {
		$art_subject = 'Сообщение с сайта';
	} else {
		$art_subject = sanitize_text_field( $_POST['art_subject'] );
	}

	// Проверяем полей сообщения, если пустое, то пишем сообщение в массив ошибок
	if ( empty( $_POST['art_comments'] ) || ! isset( $_POST['art_comments'] ) ) {
		$err_message['comments'] = 'Пожалуйста, введите ваше сообщение.';
	} else {
		$art_comments = sanitize_textarea_field( $_POST['art_comments'] );
	}

	// Проверяем массив ошибок, если не пустой, то передаем сообщение. Иначе отправляем письмо
	if ( $err_message ) {

		wp_send_json_error( $err_message );

	} else {

		// Указываем адресата
		$email_to = '';

		// Если адресат не указан, то берем данные из настроек сайта
		if ( ! $email_to ) {
			$email_to = get_option( 'admin_email' );
		}

		$body    = "Имя: $art_name \nEmail: $art_email \n\nСообщение: $art_comments";
		$headers = 'From: ' . $art_name . ' <' . $email_to . '>' . "\r\n" . 'Reply-To: ' . $email_to;

		// Отправляем письмо
		wp_mail( $email_to, $art_subject, $body, $headers );

		// Отправляем сообщение об успешной отправке
		$message_success = 'Сообщение отправлено. В ближайшее время я свяжусь с вами.';
		wp_send_json_success( $message_success );
	}

	// На всякий случай убиваем еще раз процесс ajax
	wp_die();

}

1. Для чего нужна всплывающая форма обратной связи?

Прежде всего, всплывающая форма позволяет вам сэкономить место на вашем сайте, за счет чего вы можете разместить такую форму где-нибудь в шапке вашего сайта, в подвале, в сайдбаре, либо же в тексте самой страницы, либо сделать её плавающей кнопкой сбоку.

Во вторых, всплывающий эффект достаточно интересно выглядит;

В третьих, пользователи Вашего сайта могут получать доступ к такой форме обратной связи практически с любой страницы Вашего сайта.

Стоит отметить что вместо формы обратной связи вы можете аналогично сделать форму заказа звонка, либо заказ какого то конкретного продукта или услуги, форму подписки либо какой то другой контент.

Для того чтобы создать такую форму обратной связи нам понадобится два WordPress-плагина:

Первый плагин – это Easy FancyBox, который позволит нам создать эффект всплывающего окна, т.е. эффект FancyBox.

Второй плагин который нам понадобится – это Contact Form 7. Плагин для создания формы обратной связи.

Вы можете использовать любой другой плагин формы обратной связи который позволяет выполнять вывод этой формы с помощью шорт-кода.

2. Устанавливаем Contact Form 7

Нажимаем на кнопку «Установить» и теперь активируем его.

3. Устанавливаем Easy FancyBox

Точно также, копируем название, нажимаем на кнопку «Добавить новый», вводим название плагина, нажимаем «Enter» и вот он, нужный нам плагин Easy FancyBox

4. Настраиваем всплывающее окно для формы

Для того чтобы получить доступ к настройкам плагина Easy FancyBox

Заходим в пункт меню «Настройки» => «Медиафайлы».

Сверху мы видим блок стандартных настроек WordPress медиафайлов и уже ниже приписываются наши настройки плагина Easy FancyBox. По умолчанию у нас здесь стоит активация всплывающего окна при нажатии на изображение.

Нам необходимо снять эту галочку, так как если на Вашем сайте стоит какой-либо плагин, который так или иначе связан с созданием каких-то всплывающих эффектов, например «WooCommerсе», плагин галереи, плагин для открытия изображений во всплывающих окнах и т.д. то ваши изображения будут открываться во всплывающем окне дважды

Теперь нам необходимо установит галочку возле пункта «Inline content»

И теперь нажимаем на кнопку «Сохранить изменения». В плагине Easy FancyBox помимо этих настроек есть еще множество различных других интересных настроек с которыми вы можете поэкспериментировать.

5. Выводим форму обратной связи во всплывающее окно.

Теперь нам нужно определиться где мы будем выводить нашу форму обратной связи.

Я буду выводить в виджете.

Переходим в меню «Внешний вид» => «Виджеты» => выбираем виджет «Текст»  И в поле «Текст» вставляем следующий фрагмент кода.

Теперь нам нужно получить шоткод для вывода нашей формы обратной связи. Для этого переходим в меню «Contact Form 7» => «Формы». По умолчанию здесь уже есть одна форма со стандартными полями «Ваше имя», «Ваш e-mail», «Тема» и «Сообщение». Для начала мы не будем в ней ничего убирать или исправлять. О том как править поля, делать плэйс-холдеры, добавлять и генерировать новые поля различной сложности и делать защиту от ботов и т.д. я расскажу в отдельной статье.

Если вы используете другой плагин для создания формы обратной связи то этот пункт у вас будет отличаться

6. Редактируем фрагмент кода вывода формы обратной связи.

По умолчанию стили этой формы не очень интересные, их можно будет потом исправить, так же можно будет отредактировать форму. Как редактировать форму, добавлять в нее новые поля, добавлять плэйсхолдеры, применять для нее различные стили – это я вам расскажу и покажу в отдельной статье. Вы моете добавить какой-то текст прямо перед нашей формой, либо после формы, для этого просто переходите обратно в виджеты и прямо перед шорт-кодом впишете какой-то текст. Этот текст Вы также можете обернуть в отдельный блок, либо в заголовок, либо как-то еще, и таким образом этот текст появится, перед Вашей формой обратной связи.

7. Стилизация кнопки

Для того чтобы наша ссылка для открытия формы обратной связи была больше похожа на кнопку предлагаю приписать её немного стилей. Заходим в файл style.css вашей темы и в самом конце приписываем следующие стили.

Я оставила в коде пояснения, какое свойство за что отвечает. Так что вы сможете изменить эти стили на своё усмотрение.

Также я подготовила для вас видеоинструкцию, в которой показываю как создать всплывающую форму на wordpress.

В следующей статье я расскажу вам как создавать более сложные формы обратной связи, добавлять на них простую и эффективную защиту от спама, дам вам несколько готовых заготовок для стилизации вашей формы обратной связи и еще много чего полезного и интересного.

Желаю вам успехов в создании такой формы и до встречи в следующих статьях.

В этой статье я расскажу вам как создаётся обратная связь на сайте wordpress.Я думаю ни для кого не секрет что обратная связь должна присутствовать на каждом сайте, поэтому давайте разберём наиболее простые варианты создания формы обратной связи на сайте WordPress.

Конечно же, вы можете сверстать такую форму обратной связи вручную, а потом запрограммировать её на PHP чтобы с неё осуществлялась отправка сообщений. Но этот способ больше подходит для тех, кто любит всё усложнять и неплохо ориентируется в коде.

К счастью есть способ попроще. Намного проще! И он заключается в использовании специальных плагинов для создания обратной связи на сайте.

Создав не один десяток сайтов и перепробовав множество плагинов, я отобрала для себя пару наиболее удобных и эффективных, при помощи которых легко и быстро создаётся обратная связь на сайте WordPress.

Обратная связь при помощи плагина Contact form 7

В моём списке этот плагин находится на первом месте, я использую его не только для создания обратной связи, но и для форм заказа обратного звонка, отправки заявки, опросов и так далее.

Вот его основные преимущества:

• Прост в настройке и эффективен в работе
• выводится на сайт при помощи шорткода
• даёт возможность генерировать поля различных типов (текстовые, раскрывающиеся списки, чекбоксы и т.д.)
• даёт возможность настраивать текст письма
• можно отправлять сообщения сразу на 2 почтовых ящика
• есть возможность отправки прикреплённых файлов
• плагин имеет множество дополнений.

Вот так выглядит данная форма:

Если вас заинтересовал данный плагин для создания обратной связи, то вот серия статей с видео уроками и инструкциями по его настройке:

Обратная связь при помощи Creative Contact Form

Также неплохой плагин для создания обратной связи на сайте WordPress.

Сразу перейду к его преимуществам:

• боле привлекательный внешний вид и наличие тем оформления
• содержит множество настроек на все случаи жизни
• есть возможность перенаправлять посетителя на нужную страницу после отправки сообщения. Это можно использовать для перенаправления на страницы благодарности.
• можно осуществлять отправку копии письма посетителю по его желанию.
• выводится в любом месте сайта при помощи шорткода.
• позволяет настраивать оформление внешнего вида, редактировать уже существующие темы, менять им цвета, эффекты и т.д.

Форма обратной связи имеет несколько тем и выглядит на сайте как то так:

Теперь пару слов о недостатках:

• Плагин полностью на английском. Все надписи можно легко перевести через админку, но всё равно это доставляет определённые неудобства.
• В бесплатной версии нет возможности настраивать поля. Добавлять свои и удалять ненужные.
• Текст письма не настраивается.

Настройка Creative Contact Form

Установить данный плагин можно из репозитория WordPress.

«Плагины»=> «Добавить новый»=> вводим в поиске «Creative Contact Form»=> нажимаем «Установить», а затем «Активировать».

После этого в боковой панели WordPress появится пункт «Creative Contact Form»

Все настройки разбиты на 4 категории:

1. 1. Overview
      – здесь представлены основные настройки обратной связи, а точнее иконки для перехода к основным настройкам.

1. 1. Forms
      – на этой вкладке представлен список созданных форм, а также шорткоды к ним. Для их редактирования просто щёлкаем по названию.

После этого мы можем видеть расширенные настройки, где прежде всего нужно заменить англоязычный текст на свой, выбрать тему оформления и ещё много чего интересного и конечно же не забыть сохранить.

1. 1. Fields
      –здесь перечислены поля формы, которые мы можем редактировать. Для этого просто нажимаем на ссылку с названием нужного поля.

Мы можем заменить название поля и изменить его тип при необходимости. Также можно задать будет ли оно обязательным для заполнения и буде ли отображаться.

Templates– здесь представлены темы оформления обратной связи, каждую из которых можно изменить под себя. Причём знания CSS для этого вам не понадобятся.

Для редактирования стиля формы просто щёлкаем на его название, а дальше экспериментируем с настройками и подбираем нужный вариант оформления.

Вот, пожалуй, и все настройки. Выводится такая форма обратной связи при помощи шорткода в любом месте сайта WordPress.

Подводим итог

Если вы новичок в WordPress и вам нужна быстро сделать обратную связь на сайте и при этом внешний вид формы для вас имеет большое значение, то устанавливайте Creative Contact Form.

Если же у вас уже есть опыт в создании и настройке WordPress сайтов или вам нужна более сложная форма, то выбирайте Contact form 7. Он даст вам намного больше возможностей по функционалу, и с его помощью можно создавать формы обратной связи любой сложности.