КАК СОЗДАТЬ ФОРМУ ОБРАТНОИ СВЯЗИ В WORD PRESS

Как бы то ни было, плагин Contact Form 7 для WordPress — это один из популярнейших плагинов как среди плагинов для создания формы обратной связи WordPress, так среди любых других. И действительно, более миллиона установок — цифра говорит сама за себя. Оценка плагина достаточно высока — 4,5 звезды, что отметает все сомнения по его использованию. К тому же плагин уже русифицирован, поэтому вам не придется переводить поля формы и сообщения на русский язык.

УСТАНОВКА ПЛАГИНА CONTACT FORM 7 ДЛЯ WORDPRESS

Ну что же, давайте пройдем стандартный процесс установки. Кстати, если вы никогда еще не устанавливали плагины, тогда обязательно ознакомьтесь со статьей «WordPress. Установка плагинов», в которой найдете все возможные способы установки плагинов.

В админке сайта переходим в раздел Плагины — Добавить новый и в строку поиска вводим название плагина — «contact form 7». Первый найденный плагин формы обратной связи — нужный нам вариант.

Жмем кнопку Установить и активируем плагин. После установки в меню появится новый раздел Contact Form 7 с несколькими пунктами.

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

Можем попробовать заполнить форму и отправить ее, письмо будет доставлено на адрес email, указанный в настройках профиля администратора. Обратите внимание, плагин Contact Form 7 не просто предлагает обычную стандартную форму обратной связи. Нет, плагин позволяет гибко ее настраивать. К тому же, форма отправляется без перезагрузки страницы, что является дополнительным плюсом. Ну и, конечно же, валидация полей формы, возможность указать обязательные для заполнения поля — это еще один огромный плюс.

НАСТРОЙКА ФОРМЫ ОБРАТНОЙ СВЯЗИ ДЛЯ WORDPRESS

Ну что же, мы использовали уже готовую форму. А как насчет ее изменения? Возможно ли это и легко ли сделать это? Ответ — да — на оба вопроса. К примеру, я хочу убрать из формы поле Тема, как это сделать? Перейдем к редактированию формы в меню плагина Формы и увидим следующую картину.

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

Ну а если все же возникнут сложности, тогда вам поможет документация к плагину, где можно найти множество примеров.

Итак, давайте в качестве примера удалим тему сообщения и добавим список с вариантами выбора темы сообщения. Для создания выпадающего списка кликнем по кнопке drop-down menu. В открывшемся модальном окне заполняем форму. Ключевым является поле Options, в которое мы вводим варианты для выпадающего списка. Каждый вариант с новой строки. Прочие поля формы должны быть интуитивно понятны. Например, если мы отметим чекбокс в поле Field type (Required field), то тем самым сделаем создаваемое поле формы обязательным для заполнения. Чекбокс Allow multiple selections позволяет создать список с возможностью выбора нескольких вариантов, а чекбокс Insert a blank item as the first option создаст первым пустой вариант в списке. Поля Id и Class говорят сами за себя — это поля для добавления атрибутов id и class, позволяющих в дальнейшем оформить поле.

После создания списка с необходимыми вариантами в шаблоне формы появится новое поле.

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

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

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

ЗАЩИТА ФОРМЫ ОБРАТНОЙ СВЯЗИ

А что насчет спама, можете задать вы вполне резонный вопрос? Автор плагина позаботился и об этом. В разделе настроек плагина есть пункт Integration.

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

Как видим, сделать форму обратной связи на WordPress — проще простого. Плагин Contact Form 7 позволяет построить форму практически для любых целей. Это может быть и форма обратной связи, и форма какой-нибудь заявки и т.д. Да, как я и говорил выше, форму можно вставить не только в запись или страницу, но и в виджет сайдбара. Для этого достаточно создать виджет Текст и вставить в него шорткод нужной формы. Ну а новые формы, как вы догадались, можно создавать в меню плагина Добавить новую.

На этом у меня все. Поиграйтесь с плагином Contact Form 7 для WordPress, попробуйте создавать различные формы, поверьте, там есть еще масса возможностей для исследования. Если же у вас возникнут вопросы, тогда я, как всегда, жду их в комментариях. Удачи!

Создаем и выводим форму

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

Теперь создаем страницу и выводим на ней шорткод.

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

Внешний вид формы

Добавим красоты нашей форме.

Вот так теперь выглядит форма.

Работа формы

Создание и подключение нужных файлов

Для работы формы потребуется создать файл js. Например, feedback.js. Файл необходимо создать в папке дочерней темы. Или в соответсвующей папке плагина.

Теперь через файл functions.php подключаем нужное.

После подключения в исходном коде должно быть видно подключение и вывод скрипта.

Отправка данных формы через ajax

В подключенный файл feedback.jsдобавляем отправку данных формы.

Если все верно подключено, при отправке данных скрипт будет срабатывать и выдавать ошибку.

Обработка Ajax

Теперь требуется написать обработчик скрипта. Напоминаю, обработка ajax «подвешивается» на динамические хуки wp_ajax_ и wp_ajax_nopriv_и требуется проверка nonce.

Заключение

Вот и все. Если все сделано правильно, то при отправке пустой формы будут такие сообщения.

Если отправка прошла успешно, то появится соответствующее сообщение

На этом все. Если есть вопросы и предложения пишите в комментариях. Удачи!

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

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

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

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

Contact form 7 в поиске

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

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

Заготовка под обратную связь

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

Пример создания поля Имя

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

Код поле добавления имени

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

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

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

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

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

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

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

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

Название и добавление кода

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

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

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

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

Не забываем нажать на опубликовать.

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

В запись загрузил изображение с помощью медиафалов.

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

Добавляем class к элементу

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

Переходим обратно в Визуально и нажимаем предварительный просмотр.

Открывается новая страница в браузере.

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

Рабочая всплывающая форма

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

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

Редактирование HTML в Gutenberg

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

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

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

Вставка кода в виджет

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

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

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

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

Вносим ID в тригеры

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

Выводим параметры элемента в elementor

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

Показ формы связи через elementor

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

Итог

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

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

Здравствуйте, друзья! В этом уроке мы поговорим о создании формы обратной связи, или как еще говорят в народе «контактной формы».

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

Создание контактной формы в WordPress

В самом начале хочу заметить, что плагин Contact Form 7 русифицирован, и никаких проблем с ним у вас не будет. Как доказательство моих слов может выступать тот факт, что данный плагин скачали БОЛЕЕ 25 МИЛЛИОНОВ РАЗ!!!

И так, давайте приступим. Для создания формы обратной связи нужно сделать следующее:

1. Установите и активируйте плагин Contact Form 7. Как устанавливать плагины вы можете почитать в специальном уроке.

3. В открывшемся окне копируем строчку с кодом вставки.

4. Скопированный код вставляем на ту страницу, на которую мы хотим добавить форму обратной связи. После того как вставили код, не забудьте сохраните изменения нажав кнопку «Обновить».

Вот такой результат добавления контактной формы по получим:

Готово! Вы установили рабочую форму обратной связи на свой сайт!

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

Создание новой контактной формы в Contact Form 7

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

Для этого нам нужно чтобы в форме были такие поля для заполнения:

После того как мы определились с полями, переходим к созданию формы:

2. В открывшемся окне нажимаем кнопку «Добавить новую». Если необходимо, выберите язык в выпадающем списке ниже. По умолчанию язык будет русским.

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

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

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

4. После того, как мы поверхностно ознакомились с структурой редактора, переходим к созданию нашей новой формы. Для этого нам нужно УДАЛИТЬ из шаблона формы все строчки кроме кнопки «Отправить», а в шаблоне письма удалить все полностью. После удаления у вас должно получится так:

5. Теперь нам нужно создать новые поля: Имя (обязательное), Фамилия, Телефон (обязательное), Удобное время звонка.

Начинаем с создания поля для ввода имени, которое должно быть обязательное для заполнения. Для этого нажимаем кнопку «Сгенерировать тег» и выбираем Текстовое поле.

После добавления полей Имя, Фамилия и Телефон редактор формы будет выглядеть так:

7. Теперь создаем поле Удобное время звонка. Для этого нажимаем «Сгенерировать тег» и выбираем «Выпадающее меню».

В поле Выбор пишем в строчку по одному варианту, в нашем случае это время с 8-00 до 18-00 с промежутками в два часа. После заполнения копируем соответствующие строчки кода в шаблон формы и шаблон письма.

В итоге у вас должно получиться вот так:

8. Сохраняем форму нажав кнопку «Сохранить».

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

После того как пользователь сделает заказ обратного звонка с вашего сайта, на вашу почту придет письмо с таким наполнением:

ГОТОВО! Вот мы с создали с вами форму заказа обратного звонка с нуля.

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

Надеюсь этот урок был вам полезен, и вы разобрались с плагином Contact Form 7.

Если у вас будут возникать по ходу создания формы вопросы или что-то будет не получаться — пишите и задавайте вопросы в комментариях.

И помните, что форма обратной связи на сайте — обязательный атрибут на странице контактов.

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

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

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

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

CF7 в поиске

Копируем данные для капчи, оба ключа.

Переходим обратно в плагин WordPress и нажимаем кнопку Настройки интеграции.

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

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

Стираем стандартные надписи

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

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

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

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

Кнопки телефон и текстовая область

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

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

Финальный код CF7

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

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

Изменение параметров письма

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

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

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

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

Помещаем shortecode в страницу

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

Хорошая черта у разработчиков тем на WordPress – заранее делать продукт, поддерживающий CF7, что облегчает жизнь и не нужно прописывать CSS стили в код сайта. Моя тема поддерживает плагин и выводит вполне красивую картинку. Если не устраивает, то к каждому полю прописывали class, используйте его для изменения оформления. Проверил работу темы, письма приходят быстро. Про остальные способы вставить шорткод в WordPress, читайте по ссылке.

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

https://youtube.com/watch?v=eWjV4g_vRPI%3Ffeature%3Doembed

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

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

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

Оборачиваем в div

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

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

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

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

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

Поиск элемента в elementor

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

Элементор обработал запрос

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

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

Надстройка в ROOT

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

ROOT работа встроенной функции

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

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

Используем виджет текст

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

Форма в виджете

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

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

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

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

В гутенберге в любой текстовый блок вставляете строку.

Вносим вывод в запись

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

Плохой внешний вид

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

Обновляем style.css на сервере и смотрим как преобразилась обратная связь на странице.

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

Папка js на сервере

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

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

Заполняем и отправляем письмо

Такое письмо приходит на почту с обратной связи.

Что приходит после отправки

Отлично, справились, смогли сделать форму обратной связи в WordPress, тремя разными методами, если будут вопросы то задавайте, будем разбираться. Успехов!