Wordpress отправка формы. Форма обратной связи для WordPress без плагинов. С помощью сервиса
08.03.2024
Для кровли крыши в Санкт-Петербурге.
Всем привет! Сегодня я вам расскажу, как можно поставить форму обратной связи для
W
ord
P
ress
с помощью плагинов, а также простого кода разными способами. Итак, начнем с того, что хоть форма обратной связи у меня не стоит, скорее всего, она вам понадобится по ряду следующих причин:
— Удобство и оперативность. Если вы продаете что-нибудь или оказываете платные услуги, то форма обратной связи вам просто жизненно необходима. Представьте, что клиент нашел подходящий ему товар, но у него осталось несколько вопросов, которые не дают ему покоя. В таком случае он наверняка захочет с вами связаться, чтобы уточнить некоторые детали. Если вы из своих контактных данных оставили только емайл, то это может оказаться большой проблемой для покупателя, ведь в наше время уже не так много людей пользуется почтой, а в основном сидят в социальных сетях.
Так вот иногда бывает так, что клиент может просто сидеть с другого компьютера, у которого не авторизована почта, а пароль он не помнит. Или, например, пока он заходил в свою почту у него появились сомнения по поводу того можно ли вам вообще доверять и нужна ли ему эта вещица, которую вы предлагаете. Как видите, пока клиент доползет до своего почтового ящика, он с большой вероятностью передумает или от простой лени пойдет искать более привлекательное предложение, где будет ниже цена и удобная обратная связь с покупателями.
— Защита своего емайл адреса. Если вы когда-то вели свою рассылку, то вам наверняка приходили письма следующего содержания: «Продам емайл адреса недорого» и т.д. Данные емайлы собирают со всего интернета специальные боты (роботы), на которые впоследствии будет посылаться спам письма. Если не хотите оказаться в их числе, то вам нужно нигде не светить (показывать) свой адрес от почты. В моем случае это уже не имеет никакого смысла, так как мое мыло (почта) гуляет по интернету более 3 лет и зарегистрировано более чем на 1000 сайтов.
Кстати, давно, чтобы хоть как-то бороться со спамом многие владельцы сайтов, которые еще не знали о форме обратной связи, вместо своей почты оставляли ее картинку. В таком случае боты не могли занести емайл в спамерскую базу, но это вызывало неудобство для посетителей. Кто захочет по буквам целый час вводить чей-то ящик, когда на сегодняшний день есть две классные кнопки «скопировать» и «вставить».
Плагины формы обратной связи для WordPress.
В интернете на сегодняшний день просто море разнообразнейших расширений, которые создают форму обратной связи для посетителей. Со многими вы сегодня познакомитесь в этой статье.
1
)
Итак, представляю вам плагин Usernoise.
На мой взгляд, этот самый классный плагин обратной связи, который идеально подойдет для многих интернет-магазинов и бизнесменов. Данная форма появляется как попап-окно и его можно вызвать с любой страницы сайта, нажав справа или слева на специальную кнопку.
Установка и настройка плагина Usernoise.
5
)
Установка и настройка плагина Contact Form 7.
Как сделать форму обратной связи для WordPress другими методами?
Вы можете удивиться, но я описал только самую малую часть, как можно сделать форму обратной связи для WordPress. Как бы я ни пытался объять необъятное, у меня это не вышло. Итак, форму обратной связи можно сделать еще через ряд следующих плагинов: Fast Secure Contact Form , Contact Form by Contact ME , Visual Form Builder , nForms – WordPress Form Builder , Mapped Contact Form , Ninja Forms . Помимо этого еще есть разнообразные сервисы, такие как main-ip.ru и smartoforms.ru .
На этом все, если будут вопросы, задавайте.
В этой статье научу как делается на wordpress форма обратной связи тремя видами. Давно не писал на технические темы, потянуло. Давайте разберем какие бывают способы и как их осуществить.
Это очень хороший инструмент для блоггера, добавляет к функционалу вордпресса не только комментировать, но и давать обратную связь посредством электронной почты. Моя форма обратной связи находится . Как ее сделать опишу тремя способами:
Кодом, для продвинутых.
Плагином.
С помощью сервиса.
Всплывающая обратная связь
WordPress форма обратной связи с помощью кода без плагина
Разрабатываться wordpress форма обратной связи будет в шаблоне страниц. За вывод отвечает файл page.php в папке темы.
Предупреждаю сразу, шаблоны разные у всех, поэтому вывод страниц может осуществляться посредством другого файла.
Находится в папке с вашей активной темой, надо открыть его в любом редакторе, буду показывать наглядно здесь. Для начала покажу содержимое своего page.php.
Страница:
()
В самый верх данного кода помещаем вот такой набор команд.
Теперь посложнее, надо найти то место в первом примере где идет вывод контента, за эту функцию отвечает обычно строчка.
Взамен вставляем эти команды.
Спасибо, ваше сообщение отправлено.
Извините, произошла ошибка.
Теперь сохраняем файл под названием feedback.php и закидываем в папку с активной темой.
И на этом данный способ без плагинов закончен. В дополнении могу сказать, классы к элементам формы уже прописаны, если вы с CSS не очень, то я могу вам помочь и настроить.
Красивая форма обратной связи для сайта плагином
Плагин называется Contact Form 7. Из всех ныне существующих, я считаю что он самый лучший. Для начала надо установить его, можете через админку вордпресса (он есть в официальном репозитории), либо скачав отсюда официальная страничка
. Думаю с установкой и активацией проблем не будет. Так он будет выглядеть при поиске из административной панели.
Теперь перейдем к самому плагину. На скриншоте ниже показаны все аспекты и функции плагина, схема простая.
После чего плагин выдаст шорт код.
Копируем его и вставляем в режиме текст в любую запись или страницу, либо напрямую в код шаблона, либо в виджет. Я сделал страницу, назвал ее форма обратной связи и вставил этот шорткод.
И вот результат, мне нравится, еще больше радует, что плагин на русском языке и бесплатно распространяемый. Изменить внешний не составляет труда, если вы конечно хоть маленько знаете CSS.
Покопайтесь в contact form 7, там есть много интересных вещей, например, функция с прикреплением файла.
С помощью сервиса
Обыскал много сервисов, почти все платные, остальные сами по себе мне не понравились. А этот зацепил простотой и легкостью, к тому же русский. Называется он formm.ru
, заходите на него, и сразу видим окно настройки формы.
Должна работать, проверяйте, я пробовал, на вордпрессе идет отлично. Что мне понравилось в любой конфигурации есть встроенная капча.
Плагин всплывающей обратной связи Easy FancyBox
Не хотел обозревать, но люди ищут эту информацию, для этого надо поставить плагин Easy FancyBox, вот его страница , его так же можно установить через админпанель в вордпрессе, через поиск.
Плагин работает по принципу увеличения картинок и всплывающих окон, но сейчас не об этом. Для его активации и применения для всплывающей формы обратной связи надо вставить либо в страницу либо в сам код сайта вот такую комбинацию.
Написать письмо
здесь шорткод формы из contact form 7
В том месте где написано “шорт код” вставляем код, который копировали в Contact Form 7. Должно получить так.
То есть мы сделали ссылкой всплывающую обратную связь, если прикрепить к этому CSS то можно сделать при нажатии на кнопку или картинку, но это уже уроки верстки. У меня все сработало. В итоге получиться, ссылка, при нажатии на которую появится всплывающее окно.
Вот и создалась ваша первая wordpress форма обратной связи, без особых усилий. Лично мой выбор это плагином, но у меня сделано кодом, так и оставил, а вам что по душе. Если у вас не работет, то обращайтесь ко мне в комментариях.
Здравствуйте, друзья! В этом уроке мы поговорим о создании формы обратной связи
, или как еще говорят в народе «контактной формы»
.
Сегодня мы разберем с вами как можно создать за несколько минут легкую
, красивую
и функциональную
форму обратной связи с помощью моего любимого плагина 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
Оценка
Итог:
Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
При создании сайта любого типа важно обеспечить прямой контакт с посетителями. В этом случае удастся наладить с пользователями связь, что заставит их возвращаться на ваш ресурс неоднократно. Сегодня хочу вам рассказать о том, как создать на 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:
$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.
.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 с помощью плагинов. Форма обратной связи на 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
>
