Семь хороших способов как поставить на WordPress форму обратной связи. Форма обратной связи WordPress: пять лучших плагинов
31.08.2019
От автора:
приветствую вас, уважаемые читатели. Если вам понадобилась форма обратной связи на сайт 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. В этом руководстве мы шаг за шагом создадим контактную форму и сделать ее может даже самый абсолютный новичок.
Ниже приведу 3 главные причины, почему использование формы лучше, чем просто добавить адрес почты на сайт.
– спам боты с завидной регулярностью выцепляют через свои парсеры адреса почты, где есть упоминание почтового домена и заносят его к себе в базу, чтобы потом слать вам нежелательную корреспонденцию. С другой стороны при использовании формы обратной связи для WordPress вы избавляетесь от проблемы засилия СПАМных писем на свой ящик.
Полнота информации – при отправке почты люди не всегда посылают всю информацию, которая нужна вам. С помощью контактной формы вы сами определяете, какие поля вам нужны, чтобы облегчить пользователям возможность отправить вам письмо (имя, email, номер телефона, комментарий и многое другое).
Экономия времени – форма обратной связи WordPress поможет вам сэкономить время. Помимо полноты информации, которую вы запросили у пользователя и которую он вам отправит, вы также можете указать, что ждет на следующем шаге, например «Ваша заявка будет рассмотрена в течение 24 часов» или Смотрите видео и много других полезностей.
Ниже приведен пример контактной формы, которую мы будем создавать в этом пособии.
Начнем-с, господа.
Шаг 1: Выбираем лучший плагин формы обратной связи для WordPress
На данном шаге нам необходимо определиться с выбором соответствующего плагина формы. Их существует великое множество как бесплатных, так и платных. В этом уроке я расскажу вам про разные плагины, чтобы у вас богатый был выбор. В первом случае будет задействован плагин WPForms.
Ниже приведены причины по которым WPForms является лучшим плагином обратной связи:
Во-первых это самый дружелюбный к новичкам плагин. Методом простого перетаскивания нужных блоков вы можете создать контактную форму в несколько кликов.
WPForms Lite полностью бесплатен.
Когда же вы будете готовы к более мощному функционалу и если он действительно для вас будет важным, тогда можете перейти на версию Pro.
Отлично, если эти причины оказались достаточными и я вас убедил, тогда движемся вперед.
Шаг 2: Установка плагина контактной формы WordPress
Для этого урока мы используем версию Lite, потому что это бесплатно и удобно в работе. Вы можете установить его войдя в блога и перейдя в Плагины – Добавить новый.
В строчке поиска набираем название нашего плагина и жмем Install now (Установить сейчас).
После установки плагина убедитесь, что вы его активировали. Это показано здесь:
Шаг 3: Создание контактной формы в WordPress
Итак, после успешного завершения активации плагина, самое время создать нашу форму обратной связи. Для этого в панели администратора блога кликните на вкладку WPForms Menu и перейдите в Add New (Добавить новую).
Это позволит открыть вам конструктор Wpforms, где простым перетаскиванием нужных блоков вы можете создать контактную форму обратной связи WordPress. В бесплатной версии Lite доступны два предварительно встроенных шаблона (пустой и простая форма). Вы же можете использовать их вместе, чтобы составить нужную и удобную для вас. В этом примере для вас мы выбрали второй вариант, т.е простой контактной формы. В нее добавим имя, Email и текстовое поле.
Вы можете кликнуть на каждое поле, чтобы отредактировать его. Также с помощью мыши вы можете перетаскивать и менять порядок полей формы.
Если вы хотите добавить новое поле, просто выберите нужно из списка слева и перетащите в рабочую область.
Когда все сделано, просто нажмите кнопку Сохранить (Save).
Шаг 4: Настройка уведомлений и Подтверждений
После того, как вы успешно создали форму обратной связи на WordPress, очень важно правильно настроить формы уведомлений и подтверждений.
Форма подтверждения это то, что видят ваши пользователи, когда отправляют вам заявку с формы. Это может быть сообщение благодарности или вы их можете перенаправить на другую специальную страницу.
Форма уведомления – это сообщения, которые получаете вы, когда к вам приходит новая заявка или email письмо с вашего WordPress сайта.
Вы можете настроить оба этих поля, перейдя в Настройки (Setting) внутри плагина конструктора фор WPForms.
Мы по умолчанию не ставили трогать и оставили как есть поле Формы Подтверждения с сообщением «Спасибо за ваше обращение». Однако, вы вправе поменять его на другой текст или перенаправить пользователя на отдельную страницу.
Лучшим в этом плагине является то, что настройки, которые идут по умолчанию, просто идеальны для новичков. Им не нужно додумывать, что сделать или что поменять. Все очень интуитивно понятно и просто. Когда вы переходите в настройку уведомлений, все поля будут предзаполнены динамически.
Уведомления по умолчанию отправляются на ту почту, которую в настройках указали вы. Если вы хотите изменить адресат для отправки уведомлений, то его также можно легко изменить. Если хотите указать несколько адресов почты (указываются через запятую), то пожалуйста, карты в руки, как говорится 🙂
Поле Тема email будет автоматически заполнено c вашим именем формы. Поле имя будет браться из имени пользователя (вашего имени). Когда вы будете отвечать на письмо, то оно будет идти на почту с именем пользователя, который заполнил контактную форму.
Шаг 5: Добавление контактной формы WordPress на страницу
На данном шаге, когда вы построили и настроили форму обратной связи, нужно создать для нее отдельную страницу «Контакты», куда вы сможете ее поместить. Либо вы создаете новую, либо редактируете уже существующую страницу, где вы можете ее добавить.
Мы будем использовать простой шорткод для вставки формы на страницу. Просто кликните на кнопку «Add form» и выберите название вашей формы, чтобы вставить ее на страницу.
Отлично. Теперь сохраняете и страницу и открываете предпросмотр, чтобы увидеть изменения.
Вот как примерно будет выглядеть форма на простой WordPress странице:
Если вы хотите просто добавить форму на страницу, то поздравляю вас. Все шаги сделано успешно. Если вы хотие добавить ее в виде виджета в сайдбар, то продолжение ниже.
Шаг 6: Добавление контактной формы WordPress в сайдбар
Плагин WPForms поставляется с встроенным виджетом формы обратной связи, который вы можете добавить в сайдбар или любую другую область на сайте (например в подвал).
Для этого нам нужно перейти в раздел «Внешний Вид» (Appearance)-> Виджеты (Widgets). Там вы увидите предустановленный виджет плагина формы в левой части. Просто берем и обычным перетаскиванием задаем порядок отображения в нужной области в сайдбаре.
Следующим шагом указываете название виджета и сохраняете. Переходите на сайт и смотрите результат.
На этом обзор нашего плагина формы обратной связи WPForms завершен. Но, специально для вас я подготовил еще обзор одного бесплатного плагина, с помощью которого мы можем сделать всплывающую форму обратной связи и все те же фишки, что и в предыдущем. Называется он Contact Form 7. Он реально очень мощный и козырь его в том, что он полностью БЕСПЛАТЕН!
Его можно также сделать адаптивным, т.е форма обратной связи будет приспосабливаться к размерам экрана вашего устройства.
Так, на всякий случай, чтобы вы знали, что они естьJ
Как сделать контактную форму обратной связи с помощью Contact Form 7
Продолжаем разбираться в вопросе создания форм для приема заявок с вашего сайта. Впереди у нас еще один плагин контактной формы вордпресс под названием Contact Form 7. Давайте его установим к себе на блог и активируем, как мы это умеем делать.
Она уже установлена на моем сайте, не на этом блоге. Процедура стандартная. Теперь нам нужно зайти в админку блога и создать новую форму, которая будет собирать нам заявки и другую полезную информацию. Переходим в раздел «Contact Form 7» -> Добавить новую.
Отлично! Теперь давайте дадим ей соответствующее название, в моем случае этих контактных форм очень много. Выберем одну, например «Форма заказа продвижения сайта»
Вкратце расскажу, что нам здесь будет нужно. В первую очередь, нам нужно определиться сколько полей форм мы хотим сделать. Сразу скажу, что 100500 полей делать не нужно и это бессмысленно, по той просто причине, что люди закроют ваш сайт и не оставят заявку. Им нужно упростить этот этап. Т.е если подумать, то нам от человека нужно что:
Его имя, чтобы к нему обратиться (персональное обращение)
Адрес почты (обратная связь, куда отправлять ему предложение)
Номер телефона, чтобы сразу позвонить (если это произойдет быстро, то он в любом случае станет вашим клиентом)
Собственно кнопка «Отправить»
Это основные данные, другие вы можете уже выяснить в ходе переписки или телефонного разговора. Логично? Я думаю, что да. Движемся дальше.
Создание полей контактной формы в плагине Contact Form 7
Так, с количеством полей определились, теперь нам нужно эти поля создать. Нам доступны следующие табы:
Text (Любое текстовое поле, например «Имя», «Задать вопрос», или любое другое название, которые вы будете собирать через это поле)
Email (тут предназначение одно, чтобы пользователь ввел )
URL (в это поле будет вводиться адрес сайта, другие значения не приемлемы, будет выдаваться ошибка)
Tel (поле с телефонным номером для нашей формы обратной связи на WordPress, допустимы числовые значения, текст даст ошибку)
Number (Числовой диапазон значений, можно применить, например, к цене: «сколько вы готовы заплатить за сайт? От 23000 до 120000 рублей»)
Date (Указываем дату, с какого по какое число. Пример: «Бронирование автомобиля с 13/04/2016 по 25/04/2016»)
Text Area (Текстовая область, сюда можно вводить текст в качестве комментария)
Drop-Down Menu (Выпадающий список). Реализовано на моем блоге, можете посмотреть. В конце каждой статьи я предлагаю пользователям создание или простого сайта, или интернет магазина. Именно такой функционал обеспечивает данная опция.
Radio buttons (Выбор какого-то одного пункта, например: «Вы заказываете или контекстную рекламу или таргетированную»)
Acceptance (Принимаете условия соглашения, т.е пользовательская информация, типо публичной оферты)
Quiz (Викторина – серия коротких вопросов, тоже можно вставить в контактную форму).
reCaptcha (Подтверждение, что вы не робот и не будете спамить.) Хорошая защита от СПАМА. Примечание: данная опция работает, если вы подключили плагин Really Simple Captcha.
File (Если вы хотите дать возможность пользователям загрузить вам файл, например: «Прикрепите ТЗ на разработоку сайта»).
Submit (Отправить данные на почту)
Итак, с полями мы определились, значение каждого вы тоже знаете. Давайте приступим к сборке нашей контактной формы на WordPress.
В примере ниже я использовал 2 поля: Имя, Email. Соответственно вам потребуются эти вкладки:
Нажав на текстовую вкладку (Text) мы попадаем в диалоговое окно:
Здесь нам нужно нажать на галочку Тип Поля – Обязательное. Сделано для того, что если пользователь не введет в него имя, то заявку он вам прислать не сможет, будет ошибка отправки, что не все поля заполнены корректно.
Затем вы увидите шорткод для вставки этого поля и рядом с ним синяя кнопка «Вставить тэг». Таким образом вы добавите одно новое поле контактной формы.
Чтобы вы не запутались я выделил его стилем. Код ниже:
<
div
class
=
"col-md-4"
>
<
label
class
=
"sr-only"
>
Full
Name
<
/
label
>
[
text*
text
-
658
class
:
form
-
control
placeholder
"Ваше имя"
]
<
/
div
>
А вот скрин:
Аналогичную операцию проделываем для поле «Email». Кликаем на соответствующую вкладку и попадаем вот в такое диалоговое окошко.
Абсолютно ничем не отличается от предыдущего, просто повторяем наши с вами действия. У меня поле емэйла также имеет стиль. Привожу ниже код:
<
div
class
=
"col-md-4"
>
<
label
class
=
"sr-only"
>
Full
Email
<
/
label
>
[
email*
email
-
447
class
:
form
-
control
placeholder
"Ваш Email"
]
<
/
div
>
А вот скрин:
И, наконец, кнопка «Submit» (Отправить данные). Она у меня вся в стилях.
<
div
class
=
"col-md-4"
>
[
submit
class
:
btn
-
flat
class
:
col
-
xs
-
12
"Заказать"
]
<
/
div
>
<
/
div
>
Важное примечание:
Дорогие друзья, в этом примере я использую адаптивные стили для создания контактной формы на WordPress, т. е она может принимать формы любого размера экрана.
Кнопку вы увидите в правом верхнем углу. Уж точно не промахнетесь. 🙂
Часть работ мы сделали, теперь переходим к следующему этапу.
Настройка почтового адреса для приема заявок
На этом шаге нам нужно сделать некоторые настройки, чтобы письма уходили именно нам на наш почтовый ящик. Как этого достичь я расскажу ниже.
Нам необходимо нажать на большую вкладку «Письмо». Она будет второй после Шаблона формы.
Первое, что увидите, это ваши теги, которые вы добавили, их нам необходим вставить в тело письма, именно они будут подставлять данные, которые вводит пользователь с формы. Думаю, что объяснил доходчиво.
Теперь по полям:
To (Куда будет отправляться заявка, в моем случае, это мой адрес почты, можно указывать несколько адресов, куда присылать заявки)
From (Поле Откуда, т.е будет подставляться значение, что заявка идет с моего студийного сайта)
Тема (Служит для определения, с какой формы приходит заявка, в нашем случае это заявка с формы продвижения сайта).
Additional Headers (Дополнительные заголовки, их не трогаем, они нужны для корректности отправки формы)
Message Body (Тело сообщения, здесь вы указываете, От кого пришло письмо и с какого адреса, например: «От: Ивана» «Адрес почты:
vasya
@
mail
.
ru
»)
File Attachments (Приложения к файлу, не трогаю)
Теперь нам необходимо настроить уведомления об успешной или неуспешной отправки письма с контактной формы WordPress.
Это будут сообщения, которые будут показываться пользователю в ответ на его действия с формой. По умолчанию они идут на английском языке. Я сделал перевод на русских самых необходимых для вас. Их будет более, чем достаточно, а если нет, то переводчик Гугла вам в помощь. Итак, приступим.
При успешной отправки сообщения: «Ваше сообщение было отправлено успешно. Спасибо.»
При некорректной отправке сообщения с формы: «Ошибка при отправке сообщения. Пожалуйста, попробуйте позже или обратитесь к администратору сайта.»
Ошибка заполнения: «Ошибки заполнения. Пожалуйста, проверьте все поля и отправьте снова.»
Отправленные данные определены как спам: «Ошибка при отправке сообщения. Пожалуйста, попробуйте позже или обратитесь к администратору сайта.»
Некоторые условия должны быть приняты: «Пожалуйста, примите условия для продолжения.»
Некоторые поля должны быть заполнены: «Пожалуйста, заполните обязательное поле.»
Превышена длина символов в поле: «Указано слишком много данных.»
Недостаточная длина символов в поле: «Указано слишком мало данных.»
Неверный формат даты: «Формат даты некорректен.»
Ранняя дата в минимальном пределе: «Указана слишком ранняя дата.»
Поздняя дата в максимальном пределе: «Указана слишком поздняя дата.»
Неудачная загрузка файла: «Не удалось загрузить файл.»
Неразрешенный тип файлов: «Этот тип файла не разрешен.»
Загрузка слишком большого файла: «Этот файл слишком большой.»
Загрузка файла не удалась из-за ошибки PHP: «Отправка файла не удалась. Возникла ошибка.»
Номер телефона, введенный отправителем, неверен: «Некорректный номер телефона.»
Очень хорошо. С настройкой формы мы закончили, теперь необходимо вставить ее на сайт. Для этого по уже известной технологии, зайдем на уже существующую страницу или создадим новую. В своем примере я покажу вам пример существующей формы на странице сайта WordPress.
Так как наша форма собирает заявки на продвижение сайта, то зайдем на аналогичную страницу.
Чтобы вставить нашу контактную форму, нам нужно скопировать, присвоенный ей плагином, шорткод. Он доступен под названием вашей формы.
Копируем и вставляем в нашу страницу, предварительно перейдя в текстовый редактор (не визуальный). Представлено на скриншоте ниже:
Сохраним нашу страницу и посмотрим, что получилось в итоге в браузере:
Супер! Теперь давайте попробуем отправить форму ничего в нее не заполнив. И вот, что мы увидим.
Произошла ошибка отправки с формы, поскольку пользователь не указал нужные данные в полях. Теперь давайте введем корректные данные и посмотрим, что у нас получится в этом случае.
Нажимаем отправить и вот, что пишет наша форма:
Теперь посмотрим, как выглядит наша заявка. Они приходят у меня на мэйловскую почту. Проверим доставку:
Зайдем внутрь, чтобы убедиться в корректности кодировки и всех данных.
Все просто отлично. Форма работает исправно и отправляет данные. Теперь мы можем собирать заявки, которые будут приходить вам когда вы займетесь , если мы говорим про региональное продвижение.
Итак, мы рассказали как сделать контактную форму на WordPress на странице сайта. Сейчас я расскажу как сделать всплывающую адаптивную форму обратной связи
с помощью нашего плагина Contact form 7.
Делаем всплывающую адаптивную контактную форму обратной связи на WordPress
Для того, чтобы наша форма стала адаптивной, т.е «резиновой», нам необходимо подключить еще один плагин, а точнее его дополнение к Contact Form 7 – называется он Bootstrap Contact Form 7. Устанавливаем и просто активируем и все – он работает. С ним никаких настроек делать не нужно. Установили и забыли.
На следующем шаге я расскажу, какие изменения нужно внести, чтобы наша форма стала всплывающей и адаптивной. Подобную реализацию я сделал на главной странице своего студийного сайта. Для этого перейдем в шаблон index.php, который находится в разделе «Внешний Вид — Редактор». Мы будем работать только с кодом, вручную.
Наша всплывающая форма будет отображаться в модальном диалоговом окне примерно так:
Чтобы достичь этого результата вам понадобится следующий код, я представлю его полностью в сниппете:
Заказать
Оставить заявку
<
a
href
=
"#"
class
=
"btn btn-primary btn-flat"
data
-
toggle
=
"modal"
data
-
target
=
"#modal2"
>
Заказать<
/
a
>
<
!
--
Modal
--
>
<
div
class
=
"modal contact-modal fade"
tabindex
=
"-1"
id
=
"modal2"
role
=
"dialog"
aria
-
labelledby
=
"myModalLabel"
aria
-
hidden
=
"true"
>
<
div
class
=
"modal-dialog"
>
<
div
class
=
"modal-content"
>
<
div
class
=
"modal-header"
>
<
button
type
=
"button"
class
=
"close"
data
-
dismiss
=
"modal"
>
<
span
aria
-
hidden
=
"true"
>
&
times
;
<
/
span
>
<
span
class
=
"sr-only"
>
Close
<
/
span
>
<
/
button
>
<
h4
class
=
"modal-title black"
id
=
"myModalLabel"
>
Оставитьзаявку<
/
h4
>
<
/
div
>
Форма обратной связи – один из важнейших элементов на сайте или блоге на WordPress
С ее помощью поддерживается непрерывная контактная связь с покупателями, читателями, партнерами. К тому же, если обратная связь отсутствует, пропадает множество возможностей для привлечения новых клиентов. Это гораздо эффективнее, чем обычная контактная информация на сайте.
Что необходимо для создания обратной связи на WordPress?
Обратная связь может быть создана различными способами. Лучшее решение – с помощью плагина. Самыми востребованными являются:
Contact Form 7;
Usernoise;
SimpleModal Contact Form;
Custom Contact Forms;
Slick Contact Forms.
Почему стоит сделать выбор именно в пользу плагинов WordPress? Потому что они обладают массой преимуществ, например, постоянно обновляются, что в свою очередь гарантирует надежность. К тому же, подходящий плагин для WordPress является лучший помощником, который поможет удобно разработать сайт, а контактная на сайте будет добавлена без усилий. И это не говоря уже о разных корпоративных и продающих сайтах, где бывает нередко требуется довольно специфическая контактная форма.
Contact Form 7 – быстрая контактная связь и простота настроек
Плагин CF 7 дает возможность легко и просто создавать и настраивать обратную связь. Он очень легкий, совершенно не грузит сайт, а также считается самым простым в настройке. Многие выбирают именно его, . Contact Form полностью русифицирован, что весьма удобно, и имеет интуитивно понятные настройки, разобраться с которыми очень легко. При этом, он полностью бесплатный и гибкий. Есть как простая установка – для всех, кому нравится простота, так и много глубины и сложности – для всех, кто любит углубиться. Поддерживает самые различные формы в окне, отправку через AJAX, интеграцию с Akismet, загрузку файлов, а также оснащен защитой от спама с помощью капчи и текстового вопроса. Многие признали его одним из лучших плагинов для системы управления контентом. CF 7 позволяет самые разнообразные сложные формы. В списке сразу же отображаются шорткоды, необходимые для вставки на страницу.
Usernoise – всплывающая и красивая форма обратной связи
Usernoise имеет весьма широкий функционал, позволяя сделать красивую и простую в понимании всплывающую форму в окне. Но есть некоторый минус – полная часть его возможностей представлена в платной версии. Однако многим достаточно функций, которые представлены в бесплатном варианте. По умолчанию Usernoise для WordPress уже настроен как нужно, все что нужно – просто его включить. Дальнейшие настройки, по желанию владельца сайта, осуществляются тоже незатруднительно. Можно изменять расположение кнопки, изменить ее цвет и фон текста, добавить иконку к кнопке, поменять шрифт и поменять стандартные надписи. Все это легко настраивается из админки. С его помощью кнопка станет уникальной. Плагин полностью русифицирован, что максимально облегчает работу с ним. Идеально подходит для блогов. Usernoise поддерживается практически всеми знаменитыми браузерами – Opera, Firefox, Safari, IE7 (от 7 версии). Главным преимуществом данного плагина является его высокая производительность, он не оказывает влияния на скорость загрузки.
SimpleModal Contact Form – быстрая всплывающая форма в модальном окне
SimpleModal Contact Form (SMCF) представляет собой обратную связь, которая интегрирована в модальное всплывающее окно. Работает на WordPress при помощи jQuery. Плагин русскоязычный, благодаря Николаю Мясникову и другим «народным умельцам», принимающим участие в его русификации. Перевод на русский язык выполнен максимально грамотно, учитываются все малейшие детали. Всплывающее окно, которое выводит SMCF внешне напоминает окно плагина Lightbox. Это очень удобная вещь для всех, кто хочет дать возможность пользователям написать письмо, просто во всплывающем окне где угодно – в конце поста, на отдельной странице либо в Сайдбаре. Все работает очень быстро и удобно. Установка осуществляется самым традиционным способом. Также обратная форма проверяет правильность заполнения полей ввода. В опциях есть возможность сделать автоматическую подстановку заголовка страницы в теме письма, что является довольно весомым достоинством, когда он используется для заказа к описанию товаров. Тема письма позволит сразу увидеть какой товар заказан.
Custom Contact Forms – обратные формы любой сложности
Плагин Custom Contact Forms (CCF) очень популярен на сегодня. С его помощью можно сделать формы любой сложности на WordPress. Но, стоит отметить, что CCF не имеет русской локализации. Хотя это не играет особой роли, поскольку разобраться в нем проще простого, даже тем, кто не знает английский язык. Созданные формы вставляются в любые страницы, материалы и отдельные записи. Для создания простой формы не нужно копаться в настройках, все, что потребуется – вписать код в любую статью, а дальше уже все делается автоматически. Есть также специальный виджет, который можно вставить в боковую панель, либо же в любые иные места на сайте, отведенные под виджеты. Никаких особых знаний CSS для настройки при этом не требуется, а настраивается практически любой аспект: цвета, размеры, границы, отступы. Управление стилями осуществляется прямо в , там же, где настраиваются все поля ввода значений. Работает на современных технологиях Ajax и jQuery.
Slick Contact Forms – простое добавление нескольких обратных связей
Slick Contact Forms создает виджет, который может быть применен для добавления нескольких форм контакта на странице. С ним обратную можно сделать плавающей, выпадающей и выезжающей. Появляется при клике по ссылке в виде раскрывающейся панели. Вид очень аккуратный и красивый. Вставлять ее в блог достаточно просто, особенно если использовать виджет. Виджет уже содержит все необходимые параметры и настройки – скорость разворачивания и сворачивания, ширину, общее название и название полей, количество полей, положение на экране, обратный электронный адрес, расположение текстовых полей. Есть также несколько вариантов оформления. Можно сделать и с использованием шорткода, но это уже сложнее. Это один из самых дружественных и надежных инструментов WordPress.
Все плагины, перечисленные выше, заслуживают внимания и имеют свои достоинства. Однако выбор будет зависеть от личных предпочтений. Например, если необходимо встроить обратную связь в страницу, то лучше выбирать первые плагины, в частности Contact Form 7. Если же всплывающие окна больше нравятся – лучше остановить выбор на SMCF и Usernoise.
1 голос
Доброго времени суток, читатели моего блога. С вами Андрей Зенков. WordPress форма обратной связи - важная часть любого сайта, о ней мы сегодня и поговорим. Рассмотрим конкретные примеры на самой популярной CMS - WordPress. Устраивайтесь поудобнее, налейте чай, ведь вас ждёт длинная, увлекательная и познавательная статья.
Свой сегодняшний рассказ хочу начать со слов Ричарда Баха: «Для нас не должно существовать никаких пределов». Призываю всех своих читателей никогда не останавливаться на достигнутом. Каждый раз, когда вы наблюдаете стагнацию в своём развитии, приложите максимум усилий, чтобы пробить очередной потолок. За его пределами вас ждёт ещё больший успех.
Что такое форма обратной связи и для чего нужна?
Форма обратной связи - модуль на сайте, который необходим для оперативного контакта между владельцем ресурса и посетителями. Для чего она нужна? Я выделил для вас три основные причины:
Защита от спам-ботов. Парсеры адресов электронных почт добавят ваc в свою базу, если вы просто разместите его на сайте. Это приведёт к постоянному получению не несущих никакой ценности сообщений. При создании формы рекомендую скрывать свой адрес;
Получение всей информации. Чтобы пользователь с первого раза донёс до вас всё, что хочет, добавьте в форму необходимые поля (номер телефона, комментарий, тема сообщения и т.д.);
Экономия времени посетителей. Больше им не придётся искать адрес вашей , заходить в почтовый клиент и набирать сообщение. Это можно сделать прямо с вашего ресурса.
Преимуществ больше, я выделил для вас основные. Рекомендую устанавливать плагин с капчей. Такая мера защитит от спам-ботов, вы будете получать письма только от заинтересованных, реальных гостей своего проекта.
Если вы хотите научиться защищаться не только от спам-ботов, но и от других, более серьёзных угроз, рекомендую пройти курс «Тотальная защита WordPress
», который подготовил опытный вебмастер.
Готовые решения для вашего проекта
Если вы не знаете, как самостоятельно разработать удобную форму обратной связи для сайта, я подготовил несколько интересных плагинов, которые легко устанавливаются собственными силами. Вам даже не понадобятся особые знания в .
Contact Form 7
После указания всех настроек, на руки вы получаете код готовой контактной формы с отправкой писем при нажатии на кнопку. Его можно разместить в любом месте на своём сайте.
Какой можно сделать вывод?
Форма обратной связи с отправкой на почту - отличное решение для общения со своими подписчиками. Не упускайте возможность, если люди хотят общаться с вами. Кто-то научит вас чему-то новому, кто-то даст полезный совет. Сегодня я рассказал вам о тех вариантах, которыми пользуюсь сам при создании проектов. Выберите для себя лучшее и начинайте действовать! А на этом статья подходит к концу.
Следите за обновлениями в блоге, чтобы регулярно узнавать что-то новое и интересное.
Добрый день, дорогие читатели блога сайт. Сегодня я решил затронуть такую тему, как взаимодействие между посетителями и автором блога. Посидев в интернете и просмотрев множество ресурсов, я пришел в небольшой шок. Оказывается, еще существуют ресурсы, на которых нет возможности напрямую написать свой вопрос автору.
Я не беру во внимание комментарии, ведь они выставлены на всемирное обозрение. Но бывают моменты, которые хотелось бы обсудить, как говориться, с глазу на глаз. Ведь не так сложно установить у себя WordPress плагин формы обратной связи Contact Form 7 и при этом будут решены множество вопросов.
Мне сложно представить в век тотальной нехватки времени, лени и прагматизма, чтобы человек зайдя на ресурс, брал и копировал электронный адрес, заходил к себе на почту, писал вопрос, нажимал кнопку отправить и т.д. Пока он совершит все эти действия, он уже забудет что хотел спросить 🙂 , а что хуже – случайно закроет страничку владельца блога. И все, ваш потенциальный постоянный читатель потерян.
Итак, чтобы не допустить таких обидных ошибок, давайте детально разберем, как сделать форму обратной связи при помощи WordPress плагина быстро, просто и без лишних заморочек.
Первым делом нужно определиться среди множества представленных программ, какой именно вы воспользуйтесь для своего блога. Большинство моих знакомых отдают предпочтение Contact Form 7. Этот плагин является не только одним из самых распространенных, но и простым в настройках.
Для начала вам нужно установить Contact Form 7 себе на сервер. Как это сделать мы подробно рассказывали в статье.
Настройка Contact Form 7
Итак, после установки в административной панели у вас появится новое меню под названием «Contact Form 7».
Нажмем «Добавить новую». В открывшемся окне нам представляется возможность выбора используемого языка интерфейса. По умолчанию стоит «Русский».
Следующий шаг, который нам нужно сделать, это назвать нашу форму, в противном случае при создании множеств форм можно просто потеряться. Если вы нажмете в данном поле кнопку «Сохранить», то появиться шорткод, который мы позже вставим на нужную нам страницу.
Теперь давайте перейдем к следующему полю под названием «Шаблон формы».
В нем мы видим два окна, в первом (1) мы формируем внешний вид нашей формы, во втором (2) находится генератор тегов, при помощи которых можно вставить дополнительные поля.
По умолчанию в первом окне содержится пять полей: «Ваше имя», «Ваш e-mail», «Темы», непосредственно «Сообщение» и кнопка «Отправить».
Если вы удалите тег , то во внешнем виде формы название полей будут располагаться в одну строчку с выводимым полем, как на картинке ниже.
Также вы можете менять местами блоки путем изменения порядка их расположения в данной форме. Ну, а если вы посчитаете не нужным, например, поле «тема», то просто удалите его.
Кстати, чуть не забыл в некоторых полях вы видите символ звездочка «*». Он означает, что данный пункт обязателен для заполнения.
Добавление нового поля в форму
Если вы хотите видоизменить форму, то плагин предусматривает возможность добавить новое поле. Как это сделать давайте я расскажу более подробно, а то возможно, это вызовет у некоторых пользователей сложности. Итак, давайте добавим в стандартную форму еще одно поле, например, «Номер телефона».
В шаблоне формы справа нажимаем «Сгенерировать тег» и выбираем «Номер телефона».
В появившемся меню нам представляется возможность настроить данное добавление более полно.
Если вы решите, что данный пункт требует обязательного заполнения и в нем нужно проводить проверку (чтобы введённое значение было корректным), то поставьте галочку перед «Обязательное поле».
Следующий три пункта позволяют задать свой собственный стиль поля, путем присвоения ему имени, номера и CSS класса.
Также вы можете изменить размер и максимальную длину текстового поля.
Еще вы можете показать подсказку по заполнению посетителем данного поля путем активации чек бокса «Использовать как заполнитель?» и задания «Значения по умолчанию».
В конечной форме это будет выглядеть так:
Следующий шаг, который нам нужно совершить, это добавить полученный код в форму шаблона, а также вставить код в шаблон письма.
Меню «Письмо» позволяет нам задать электронный адрес, куда будут приходить письма, а также отредактировать форму шаблона письма.
Не забудьте обязательно указать ваш электронный адрес, куда будут приходить письма.
Также у данного плагина есть возможность отредактировать уведомления, которые будет получать посетитель при отправки формы.
Теперь давайте вернемся к началу настроек данного плагина и в поле, где появился шорт код, нажмем «Сохранить». Также не забудьте скопировать сам код.
Нам остается перейти во вкладку «Страница» в административной панели WordPress, найти (или создать) «Обратная связь» и нажать «Изменить».
В открывшемся окне вставляем код обратной связи и нажимаем «Обновить».
Вот и все, форма обратной связи создана.
Установка капчи
Да, и не забудьте установить капчу, дабы избежать захламления своего ящика. Она устанавливается также при помощи генерации тега, только для ее работы потребуется установить плагин Really Simple CAPTCHA.
После установки такого незаменимого помощника для общения с вашими посетителями можно спокойно вычеркнуть еще одну проблему, которая мешает вам добиться блогерских вершин.
Видео «Как сделать форму обратной связи WordPress. Плагин Contact Form 7»
Уважаемые читатели, в видео я все подробно рассказываю и показываю. Уверен после его просмотра вы самостоятельно сможете легко установить на свой веб-ресурс форму обратной связи.
Также напоминаю, что на нашем youtube-канале мы выкладываем видео из личной жизни. Подписывайтесь
и будем дружить 🙂
Друзья, если у вас возникнут вопросы, не теряйтесь, пишите в комментариях или через обратную связь.
Напишу вам конкретный пример, который показывает, как важна обратная связь в какой-бы то ни было ситуации. Вот, например, сегодня мне пришло СМС уведомление от моего сотового оператора Beeline, что номер заблокирован. Проверив баланс, я был удивлён, ведь там было достаточно средств для звонков. Думая, что это очередной развод, я решил позвонить в службу поддержки. Телефон их колл-центра мне не удалось вспомнить (т.к. не обращался к ним лет пять уже), и было принято решение поискать информацию у них на сайте.
Какое же было мое удивление, что там есть чат службы поддержки. Никогда не пользовался такой услугой, а тут как раз кстати. Ввел номер телефона, указал тему обращения и буквально за пару минут решил все свои проблемы с консультантом. А раньше, помниться, по минут десять приходилось висеть на телефоне, чтобы выяснить незначительный вопрос.
Так что не забывайте и не пренебрегайте использовать на своих ресурсах сервисы, улучшающие взаимодействие между вами и вашей аудиторией.
