Шаловливый contact form. Контактная форма для wordpress — обзор лучших плагинов

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

stepFORM

stepFORM - WordPress плагин для создания форм любой сложности на базе визуального конструктора. В нем есть встроенная защита от спама, сбор ответов на email и CRM, интеграция с Google Analytics и Яндекс.Метрика, расчет стоимости по формулам, прием оплат на PayPal, Wallet One, Яндекс.Деньги и Яндекс.Касса, использование формы по ссылке в соцсетях и многое другое.

uCalc

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

Contact Form 7

Contact Form 7 - один из самых популярных плагинов для создания форм на WordPress. С помощью этого плагина вы можете очень гибко настраивать содержимое форм и настраивать отправку данных на почту. Формы включают в себя ajax отправку, а также Captcha и Akismet против спама.

WPForms

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

Ninja Forms

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

Form Maker

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

Caldera Form

Caldera Form - это бесплатный и мощный плагин для WordPress, который создает адаптивные формы с помощью простого визуального редактора. Плагин имеет множество бесплатных удобных дополнений как для начинающих, так и для веб-разработчиков. Антиспам, AJAX, электронные письма с уведомлениями и отслеживание записей в базе данных включены по умолчанию.

Visual Form Builder

Visual Form Builder - это плагин, который позволяет вам создавать и управлять всеми видами форм для вашего сайта в одном месте. Создание полнофункциональной контактной формы занимает всего несколько минут, и вам не нужно писать ни капли PHP, CSS или HTML.

В этот список вошли самые популярные плагины WordPress для создания онлайн форм. Если вы используете другие интересные плагины, которых нет в данном списке, то пишите в комментариях.

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

Зачем нужна форма обратной связи

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

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

Где найти готовые шаблоны или заготовки

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

Форма для возможности обратной связи представляется одной из важных частей wordpress сайта. Без нее упускается возможность всегда быть на связи с посетителями и клиентами. Помимо этого без этой примочки возрастает вероятность потери потенциальных покупателей.

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

В этой статье я хочу познакомить вас с наиболее популярными приложениями и современными новинками :

1. Contact form 7
2. Fast Secure Contact From.
3. Contact Form by Contact ME
4. FormCraft
5. Visual Form Builder
6. NForms
7. Gravity Forms
8. Ninja Forms
9. Ninja Kick

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

Contact form 7

Cf7 сегодня это самый востребованный плагин для вордпресс.

Преимуществами у него являются:

1. AJAX-отправка сообщений.
2. Встроенная капча.
3. Специальный спам-фильтр.
4. Позволяет загружать файлы.

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

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

Fast Secure Contact From

Fast Secure Contact From это нестандартная разработка, имеющая высокую популярность. В основном он используется владельцами блогов для создания и добавления контактной формы на сайты.

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

Положительными сторонами плагина являются:

1. Не дает регистрировать профиль простым пользователям.
2. Предоставляет возможность формирования графика, онлайн-встреч.
3. Поддерживает несколько адресов электронной почты.

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

Contact Form by Contact ME

Contact Form by Contact ME – это доступный конструктор, имеющий в своем арсенале стандартный набор основных функций. Он работает только после прохождения регистрации на сайте. Эта процедура проста и бесплатна. Разработчики считают, что он лучше других раскрученных плагинов, даже CF7.

Этот конструктор имеет множество нужных функций:

1. Посылает уведомления сразу на почту и телефон.
2. Разрешает добавлять в форму скрипт.
3. Поддерживает логотип для карты, данные о компании и ссылки на социальные сети и т. д.

Отталкивает владельцев веб-ресурсов по большей степени от использования такой разработки, только наличие регистрации на сайте Contact me.

FormCraft

Плагин FormCraft изначально создавался и поддерживался только как премиум приложение. Не так давно его создатели сделали и бесплатную версию – FromBuilder, доступную каждому интернет-пользователю.

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

Visual Form Builder

Еще один конструктор Visual Form Builder – разработка, которая позволяет создавать и осуществлять контроль над всеми формами из одного места. При помощи всего одного клика вы сможете управлять полями, антиспамом и реорганизовывать ранее созданные формы. Звучит заманчиво, правда?

Плюсами этого плагина являются:

• Возможность смены порядка элементов обычным перетаскиванием.
• Способность экспортировать данные в файл CSV.
• Отправка контролируемых сообщений с подтверждением.
• Возможность указания множества url адресов.

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

nForms

nForms напоминает достаточно простой шаблон, с Ajax отправкой. Созданная форма будет отображаться с помощью специального шорткода или виджета. Это довольно интересный вариант, но подходит не для любого сайта (нужно сопоставлять результат с вашим макетом). Это приложение предоставляет вам больше, чем просто контактная форма. Заинтересовались? Тогда проведите эксперимент, быть может, такая форма станет своеобразной фишкой вашего сайта.

Gravity Forms

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

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

1. Наличие функций, отсутствующих в других конструкторах (калькулятор посетителей в режиме реального времени, создание форм заказов).
2. Присутствие зависимых полей, страниц или секций.
3. Можно выбрать кнопку отправки.

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

Mapped Contact Form Pro WordPress

Дополнение Mapped Contact применяет немного измененный процесс для отображения формы на сайте. Это отличное решение для крупной компании или сети фирм, потому что может обозначать филиалы на карте гугл. Получается, что это довольно полезный плагин, вы согласны?

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

Ninja Forms

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

Положительными сторонами такой разработки можно назвать:

1. Достаточно широкий функционал.
2. Присутствие удобного переключателя для возможности предпросмотра и теста конструкций.

Отрицательными сторонами будут:

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

Ninja Kick

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

Этот плагин очень интересен и уникален, но вряд ли подойдет для серьезного сайта. Его чаще всего используют владельцы развлекательных порталов или блоггеры.

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

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

Теперь давайте посмотрим, как именно создаются эти формы на примере приложения CF7:

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

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

Вот и разобрались с тем, как сделать форму через приложение Contact Form 7. Несложно, правда?

Имею желание еще сказать пару слов, о защите вашего почтового ящика от наплыва спамеров: «Чтобы к вам на электронку не приходил спам, нелишним будет добавить в форму обратной связи капчу. Она устанавливается с помощью функции «генерации тега». А для ее функционирования потребуется дополнение Really Simple CAPTCHA. Закончив настраивать дополнение, вы сможете забыть о проблеме со спамом.

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

И в завершение, можно сказать, что форма готова, остается лишь редактировать сообщения по мере необходимости.

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

В заключение статьи давайте подведем итоги:

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

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

Ну все, пока-пока.

С уважением, Елена Изотова.

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

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

1. Комбинация (Contact Form 7 + FancyBox)

Для этого нам потребуется установить популярный jQuery плагин FancyBox , в котором будет выводиться форма плагина Contact Form 7 .

Для примера разместим нашу кнопочку в сайдбаре. На данный момент у меня установлен Wordpress 4.9.1 c дефолтной темой Twenty Seventeen .

Давайте добавим новую контактную форму: Contact Form 7 -> Добавить новую . Вы увидите дефолтный шаблон формы, придумайте ему свое название и сохраните, как на скриншоте ниже.

Во вкладке Contac Form 7 -> Контактные формы , напротив созданной вами формы "Обратная связь" вы увидите шорткод: , который можно вставить в нужное вам место на сайте.

Перейдем в меню Внешний вид -> Виджеты , добавим текстовый виджет в сайдбар и вставим туда шорткод с формой.

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

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

Добавим выше код кнопки:

/* связать ссылку с формой */
Написать нам

На данном этапе в текстовом виджете вы должны увидеть следующее.

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

Создаем новую форму с двумя полями для ввода имени, телефона и кнопкой "Отправить" . Копируем оттуда шорткод.

Добавляем новое модальное окно: Popup Maker -> Add Popup , вставляем в текстовую область новый шорткод и обновляем. Плагин автоматически присвоил модальному окну CSS класс – popmake-833 .

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

Заказать обратный звонок

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

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

Я постараюсь максимально подробно объяснить все этапы установки контактной формы, и в связи с этим урок получится достаточно длинным 🙂

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

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

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

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

2. После активации перейдите в Contact Form 7 -> Формы .

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

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

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

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

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

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

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

• Имя (Обязательное поле для заполнения)
• Фамилия
• Телефон (Обязательное поле для заполнения)
• Поле с выбором удобного времени для звонка

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

1. Переходим в Contact Form 7 -> Добавить новую.

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

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

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

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

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

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

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

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

6. После того, как мы добавили поле для ввода имени, нажимаем «Сгенерировать тег» -> Текстовое поле и по аналогии создаем поле Фамилия и Телефон , копируя и вставляя код в шаблон формы и шаблон письма. Отличие только в том, что для поля Фамилия ставить галочку для обязательного заполнения не нужно.

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

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

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

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

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

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

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

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

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

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

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

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

Здравствуйте, друзья! В этом уроке мы поговорим о создании формы обратной связи, или как еще говорят в народе "контактной формы". Сегодня мы разберем с вами как можно создать за несколько минут легкую, красивую и функциональную форму обратной связи с помощью моего любимого плагина Contact Form 7. Я постараюсь максимально подробно объяснить все этапы установки контактной формы, и в связи с этим урок получится достаточно длинным:) Создание контактной формы в WordPress В самом начале хочу заметить, что плагин Contact Form 7 русифицирован, и никаких проблем с ним у вас не будет. Как доказательство моих слов может выступать тот факт, что данный плагин…

Обзор

Проголосуйте за урок

100

Оценка

Итог: Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

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

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

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

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

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

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

CF7 в поиске

Настроим reCaptcha от гугла, заходим в раздел интеграция, и нажимаем на ссылку google.com/recaptcha. Должны иметь аккаунт в Google.

Ссылка на рекапчу

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

Привязка captcha к сайту

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

Ключи доступа

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

Интеграция

Вводим ключи скопированные на сервисе reCaptcha, записываем в соответствующие разделы и сохраняем.

Сохранение настроек

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

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

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

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

Поле текст

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

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

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

Генератор почты

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

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

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

Ранее настраивали интеграцию капчи в WordPress, в базовой версии CF7 нет кнопки для вставки captcha, для этого создан шорткод помещаем под остальными элементами.

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

Кнопка отправить

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

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

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

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

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

Сохранение

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

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

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

Шорткод

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

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

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

Финальный вариант

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

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

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

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

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

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

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

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

Прописываем стили

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заходим в создание страницы в панели 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:focus, #add_feedback input:focus, #add_feedback input: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 }

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

Сверстанный блок

Создаем файл 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("

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

Теперь загружаем вторую часть кода в 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:]]*@+\.{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(); }

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

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

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

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

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

Мне нравится Не нравится