Главная › Тарифы › Wp форма обратной связи без плагина. Что необходимо для создания обратной связи на WordPress? Форма обратной связи

Wp форма обратной связи без плагина. Что необходимо для создания обратной связи на WordPress? Форма обратной связи

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

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

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

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

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

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

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

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

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

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

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

Для того, чтобы убрать тему, достаточно убрать 2 соответствующие строки, обведенные рамкой на скриншоте. Здесь интересна вторая строка: . Как вы уже догадались, это ни что иное, как шорткод, который и разворачивается в поле формы. В данном случае это поле типа text со значение атрибута name — your-subject.

Если, к примеру, речь идет о текстовой области ниже, то ее шорткод выглядит так: . Здесь textarea — это тег textarea формы, а your-message — имя данного элемента формы. Все просто.

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

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

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

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

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

Давайте попробуем заполнить и отправить форму. Форма отправляется, но oops… в полученном письме нет выбранного варианта темы. Как так? Как исправить это недоразумение? Не волнуйтесь, исправляется это просто. Идем в редактирование формы и переключаемся на вкладку Письмо.

В этой вкладке настраивается формат письма, который приходит на email из формы обратной связи. На скриншоте в первой обведенной области мы видим список шорткодов (имен полей формы), которые используются в нашей форме обратной связи. Именно значения этих полей и подставляются в шаблон письма. Мы видим на второй отмеченной области, что для поля Тема осталось имя из прежнего поля. Также в поле Message Body указан прежний шорткод. Давайте заменим их соответствующим тегом из списка выше — . К слову, здесь же можем изменить и email получателя, он записан в поле To. Также можем изменить и прочие настройки ниже, все они подписаны и понятны.

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

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

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

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

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

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

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

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

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

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

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

Причины использования

Рассмотрим, для чего нужна такая форма

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

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

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

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

Contact Form 7

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

Easy FancyBox

Данный плагин пригоден для разработки эффекта всплывающего окна. Последовательность установки Easy FancyBox аналогична установке предыдущего плагина.

Настройка плагинов

Настроить параметры дополнения Easy FancyBox можно через медиафайлы. Воспользуйтесь опциями меню «Настройки» -> «Медиафайлы».

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

Но это еще не все. Поставьте галочку напротив пункта «Inline content»

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

Совет: если вы хотите, чтобы форма всегда была открыта, тогда снимите в настройках Easy FancyBox галочку напротив опции «Close FancyBox when overlay is clicked», выполняющей функцию закрытия окна при клике мышкой за его пределами.

Пошаговая инструкция

Ну вот, со «скучной» предварительной подготовкой покончено, теперь перейдем к самой «вкусной» части – как, собственно, разрабатывается всплывающая форма обратной связи wordpress.

Обработка окна формы

С чего начнем? Конечно же, с предварительной настройки самой формы. Выберите в правом меню пункт «Contact Form 7», а потом опцию «Добавить новую».

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

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

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

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

Теперь щелкните по кнопке «Добавить виджет»

Вставьте в поле ввода «Содержимое» следующий программный код:

Написать письмо

Вот так будет выглядеть получившийся результат:

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

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

Стилизация ссылки

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

1 способ – использование дополнительных стилей темы.

Приведенный ниже программный код можно вставить следующим образом:

Сам программный код выглядит так:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

/***Отображение ссылки в кнопочном виде****/ .contact-us a{ margin:auto; /*выстраивание блока в центре*/ display:block; width:199px; /*размер кнопки*/ padding:11px 22px; /*внутренние отступы*/ border:1px solid black; /*оттенок рамки*/ background:#3399ff; /*фоновый узор*/ text-decoration:none; /*преобразование надписи в неподчеркнутую*/ text-align:center; /*центрирование надписи*/ color:#ffffff; /*оттенок надписи*/ -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } /**Изменение цвета ссылки при подведении курсора**/ .contact-us a:hover{ -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111; -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; }

Получилась такая кнопка:

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

2 способ – использование изображения в виде кнопки. Сначала загрузите на сайт необходимую картинку (любую по вкусу, не обязательно в виде кнопки, — это не имеет особого значения). Для этого щелкните на «Медиафайлы» -> «Добавить новый» и выберите нужный рисунок. Справа от изображения появится постоянная ссылка на файл (в данном примере http://www.sait.ru/wp-content/uploads/2017/04/depositphotos_2169498-E-mail-internet-icon.jpg), скопируйте ее и добавьте в код (кавычки не удалять):

Полученный код добавьте в основной код вывода формы вместо текста «Написать письмо».

На моем сайте отобразилась кнопка, приведенная на скриншоте ниже:

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

Добавление в меню

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

1 2 3

Написать письмо

Сначала нужно разобраться, куда именно необходимо вставить этот код. Зайдите в «Редактор» через «Внешний вид» и среди шаблонов выберите «Заголовок (header.php)»

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

1 2

Ниже вставьте ваш код как раз перед закрывающим тегом.

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

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

В этой статье вы узнаете:

Плагин обратной связи для WordPress

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

После скачивания распакуйте архив и скопируйте файлы на сервер в папку /wp-content/plugins/ . После активации плагина переходите к его настройкам в панели администратора. Справа в меню появится пункт «Contact». Значит, плагин обратной связи WordPress установлен и запущен. Для установки стандартной формы CF7 на сайт достаточно скопировать код «форма для контакта», который вы увидите в меню Contact. Если вы хотите настроить форму по своему усмотрению, перейдите по ссылке «Добавить новую».

В результате появится несколько полей:

Название формы;
Форма обратной связи;
Почтовые настройки;
Дополнительная форма обратной связи;
Сервисные сообщения;
Дополнительные настройки.

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

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

Как вариант, можете еще испробовать плагин Cforms , он более сложен, но и функций у него больше.

Как создать форму обратной связи WordPress без плагина

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

Для начала нужно создать отдельный файл *.php (например, contact.php или mail.php). После создания лучше поместить его в папку с темой шаблона, тогда можно будет его редактировать из админки.

Вот код, который нужно вставить в созданный вами файл php:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

$name \n E-mail: $email \n Тема: $subject \n Текст: $body " ; $send = mail ($address , $subject , $ message, "Content-type:text/plain; charset = UTF-8\r \n From:$email " ) ; if ($send == "true" ) { echo "Спасибо, ваше сообщение успешно отправлено!" ; } else { echo "Ошибка, сообщение не отправлено!" ; } } else { echo "Вы заполнили не все поля, необходимо вернуться назад!" ; } ?>

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

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

Для этого можно использовать такой код:

1 2 3 4

<h2 > Форма обратной связи</ h2 > <form name = "Form1" action = "/wp-content/themes/lime/contact.php" method = "post" > Ф.И.О.<input class = "input" name = "email" type = "text" style = "width:31%" / > E-mail<input class = "input" name = "subject" type = "text" style = "width:31%" / > ТемаТекст сообщения: <textarea name = "body" cols = "1" rows = "5" style = "width:98%" / > </ form >

Форма обратной связи

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

Если вы захотите придать форме без плагина особый вид, можете использовать разные стили оформления с помощью файла style.css.

Красивая форма обратной связи wordpress

Большой популярностью на моем блоге пользуются статьи, в которых я рассказываю, как сделать оформление элементов блога с помощью css-кода:

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

.wpcf7-form input[ type= "submit" ] { background : #63c6ae ; /* цвет фона кнопки Отправить*/ border : 0 ; width : 120px ; /* ширина кнопки Отправить*/ color : #fff ; /* цвет текста кнопки Отправить*/ height : 30px ; /* высота кнопки Отправить*/ } .wpcf7-form textarea { display : block ; margin-top : 5px ; /* верхний отступ от поля Текст сообщения*/ background : #fff ; border : 1px solid #63c6ae ; /* граница поля Текст сообщения*/ width : 400px ; color : #222 ; padding : 10px 10px ; } .wpcf7-form input[ type= "email" ] , .wpcf7-form input[ type= "text" ] { background : #fff ; border : 1px solid #63c6ae ; /* граница текстовых полей*/ width : 400px ; color : #222 ; height : 30px ; /* высота текстовых полей*/ padding : 0 10px ; /* внутренние границы текстовых полей*/ }

Wpcf7-form input { background: #63c6ae; /* цвет фона кнопки Отправить*/ border: 0; width: 120px; /* ширина кнопки Отправить*/ color: #fff; /* цвет текста кнопки Отправить*/ height:30px; /* высота кнопки Отправить*/ } .wpcf7-form textarea { display: block; margin-top: 5px; /* верхний отступ от поля Текст сообщения*/ background: #fff; border: 1px solid #63c6ae; /* граница поля Текст сообщения*/ width: 400px; color: #222; padding: 10px 10px; } .wpcf7-form input, .wpcf7-form input { background:#fff ; border: 1px solid #63c6ae; /* граница текстовых полей*/ width: 400px; color: #222; height:30px; /* высота текстовых полей*/ padding: 0 10px; /* внутренние границы текстовых полей*/ }

В результате у меня получилось вот так:

Рассмотрим вариант с использованием плагина Contact Form 7. После того, как плагин установлен и настроен, вам потребуется открыть файл style.css вашей активной темы и вставить в конце следующий код:

Как видите, в создании обратной связи на WordPress как с плагином, так и без него, нет ничего сложного.

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

Форма обратной связи в WordPress может быть создана благодаря известному и популярному плагинe – Contact Form 7. Такую известность он обрёл за то, что обладает поразительной гибкостью и многофункциональностью. А кроме того, он по большей части переведён на русский язык и бесплатный.

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

Форма обратной связи в WordPress и другие элементы взаимодействия с аудиторией

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

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

Рассмотрим Contact Form 7 подробнее. Скачайте его по ссылке ниже, установите на свой сайт и активируйте.

После активации в вашей консоли образуется новый пункт «Contact Form 7». Перейдите в подпункт «Формы». И здесь вы увидите готовую форму, которую уже можно опубликовать, даже не настраивая. Чтобы поместить её на сайте, скопируйте шорткод, и вставьте его в нужное место на странице или в записи. Опубликуйте, и можно тестировать.

Шорткод формы, созданной по умолчанию

Также можно создать собственную форму обратной связи в WordPress. Для этого нужно в пункте «Contact Form 7» перейти в подпункт «Добавить новую». Для начала можно дать форме название. Здесь также имеется конструктор форм с несколькими вкладками.

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

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

Рассмотрим сначала вкладку «Шаблон формы». Она представляет собой редактор с кнопками сверху. Каждая кнопка добавляет то или иное поле в форму.

Вкладка «Шаблон формы»

Вот какие поля есть:

text – однострочное текстовое поле;
email – электронная почта;
URL – адрес в интернете;
tel – телефон;
number – поле для ввода цифр;
date – поле для написания даты с выпадающим календарём;
text area – текстовое многострочное поле;
drop- down menu — список;
checkboxes – чекбоксы, то есть галочки;
acceptance – тоже чекбокс, только больше подходит для установки опции согласия с определёнными условиями;
quiz – задаёт простой вопрос (например, 1+1=?), можно использовать в качестве капчи.
reCAPTCHA – устанавливает капчу Google рекапча (где нужно просто поставить галочку в поле «Я не робот»), но для работы требуется сначала получить ключи;
file – кнопка «Обзор», чтобы вложить файл;
submit – кнопка отправить.

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

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

Давайте рассмотрим пример. Допустим, нужно установить в форму текстовое поле. Ставим курсор мышки в нужном месте формы и нажимаем кнопку text. Открывается окно настройки поля.

Окно настройки поля

Здесь есть следующие опции:

Field type – если нужно, чтобы это поле было обязательным, то поставьте здесь галочку.
Имя – имя поля. Можно поставить по умолчанию.
Значение по умолчанию – здесь можно записать, что будет в поле, если пользователь ничего не ввёл, то есть, что будет написано по умолчанию. Заполнять не обязательно.
Akismet – можно подключить к полю .
Id attribute – дополнительный атрибут поля, можно не заполнять.
Class attribute – атрибут стиля поля, тоже не обязательное поле.

Когда всё, что нужно заполнено и настроено, нажмите кнопку «Insert tag», чтобы установить поле в форму. Это базовые опции, у других полей есть дополнительные, индивидуальные опции.

После этого в форме появляется созданный нами тег, поле.

Добавленный тег

Теперь нужно дать ему пояснения, присвоить надпись. Форма обратной связи в WordPress, созданная плагином Contact Form 7, поддерживает в своём редакторе HTML. Поэтому можно использовать теги для выделения текста, создания отступов или переводов на новую строку. Например, созданное нами поле можно оформить так:

Перейдём во вкладку «Письмо». Здесь у нас настраивается шаблон письма. Вот, что мы имеем:

T o. В этом поле указывается, на какую электронную почту будут отправляться письма.
From. Здесь указывается, какой адрес будет фигурировать в качестве адреса отправителя.
Тема. Заполняется тема письма.
Additional Headers. Дополнительные заголовки – можно написать информацию об отправителе, например.
Message Body. Само тело письма.
Исключить вывод строк с пустыми тегами сообщения. Если включить это, то в пришедшем письме не будет полей, которые в форме были не заполнены.
Использовать HTML-формат письма. Все HTML теги будут видны, визуального оформления не будет, если включить эту галочку.
File Attachments. Если в форме обратной связи WordPress предусмотрены вложения файлов, то, чтобы они пришли, здесь нужно указать их теги.

Чтобы в письме, которое придёт после отправки формы, было содержание тех или иных полей, необходимо поместить в шаблоне тот или иной тег. Так, допустим, если мы добавили поле text «text-439» в форму, то, чтобы его содержание пришло в письме, следует в нужном месте написать его.

Тег из формы в шаблоне письма

В этой же вкладке есть раздел «Письмо 2» Если поставить галочку на «Use Mail (2)», то можно сделать, чтобы отправлялось ещё одно письмо. Открывается такой же редактор, как и для первого письма.

Включение второго письма

По умолчанию, это письмо будет уходить отправителю формы (в строке «To» установлен тег , то есть отправляться будет на ту почту, которую укажет отправитель в форме). Например, там можно написать уведомление о том, что письмо до вас дошло или что-нибудь ещё. При необходимости можно сделать, чтобы письмо отправлялось какому-то другому, конкретному адресату, например второму администратору.

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

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

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

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

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

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

Это целый набор плагинов, виджетов и сервисов для движка WordPress. И соответственно у него есть свой очень простой, но хороший встроенный конструктор форм. С помощью него вы получаете быстрый и простой интерфейс для добавления форм в любую заметку или страницу сайта. Для этого нужно просто нажать кнопку «Insert Form» и у вас появится возможность быстро создать и добавить форму.

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

Это еще один очень популярный плагин, который доступен в двух версиях - в качестве плагина для WordPress и PHP кода для интеграции на «самописные» сайты. Уникальность этого плагина в том, что роботы-спамеры обнаруживаются на сайте автоматически. Используя капчу и Akismet Fast Secure form плагин блокирует атаки с наиболее популярными спамерскими тактиками. Эта функция сокращает вероятность появления спама и любой другой нежелательной информации.

Универсальный бесплатный плагин с отличным интуитивным drag’n’drop интерфейсом для создания контактных форм на вашем WordPress сайте. В админке вы сможете строить свою форму просто перетаскивая нужные блоки и настраивая их под ваши нужды. А также в нем есть огромное количество функций, среди которых AJAX handler, надежные антиспам модули, импорт и экспорт данных.

Это еще один плагин с drag’n’drop интерфейсом, который позволяет создавать и управлять всеми видами форм на вашем сайте из одного места. Он предназначен для того, чтобы сделать процесс создания форм быстрым и легким занятием, так что пользователю нет необходимости учиться редактировать какой-либо код. Плагин имеет довольно обширный раздел поддержки разработчиками для решения проблем и помощи в его настройке.

Еще один плагин которым можно быстро и без лишних заморочек создать контактные формы на своем сайте. Для борьбы со спамом он интегрируется с плагином Captcha. В про-версии плагина доступны дополнительные функции, как например, валидация форм и выбор боксов, кстати они обе доступны бесплатно в вышеупомянутом Contact Form 7.

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

До встречи в других заметках!