Здравствуйте, друзья! В этом уроке мы поговорим о создании формы обратной связи
, или как еще говорят в народе «контактной формы»
.
Сегодня мы разберем с вами как можно создать за несколько минут легкую
, красивую
и функциональную
форму обратной связи с помощью моего любимого плагина 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
Оценка
Итог:
Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Любой сайт должен иметь форму обратной связи, поэтому рано или поздно, каждый из нас задумывается о ее разработке. Вариантов в сети достаточно много, кто-то использует популярные плагины, кто-то свои личные наработки, но большая часть ищет готовые решения. В любом случае, наша форма обратной связи для сайта
будет рабочей и функциональной и обо всем этом по порядку.
HTML
Итак, начнем, как всегда, с обычной заготовки – html . Для начала нам понадобится форма с несколькими полями. Мы возьмем для наглядности и стандарта всех форм 3 поля. Т.е. это будет Имя, Email и телефон.
Каждый input у нас имеет свое уникальное имя name , оно нам понадобится в дальнейшем для отправки сообщений. Вы можете также свободно добавлять свои поля и не только input , но и select , textarea . Только не забывайте каждому из них присваивать свои имена, которые мы будем использовать при отправке на почту информации. Для удобства я добавил каждому полю атрибут required , благодаря которому браузер не позволит пользователю отправить пустые значения и уведомит о необходимости их заполнения.
CSS
Когда форма готова, можно ее немного преобразить. Тут все также зависит от ваших потребностей и фантазий. Я же, для наглядности набросал немного стилей для каждого элемента, чтобы не выглядело все столь плоским. Но если вам лень или не знаете как это делается, то можете использовать мой вариант:
Form{
max-width: 400px;
width: 100%;
margin: 0 auto;
}
input{
box-sizing: border-box;
display: block;
border: none;
box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.11);
padding: 10px 20px;
width: 100%;
margin: 10px 0;
outline: none;
}
input{
background: red;
border: none;
box-shadow: 0px 2px 0 1px #C50909;
border-radius: 5px;
color: white;
text-transform: uppercase;
font-weight: 600;
width: 200px;
cursor: pointer;
transition: 0.3s;
}
input:hover{
background: black;
box-shadow: 0px 2px 0 1px black;
}
Клиентская часть
Здесь уже стоит разобраться более детально, точнее выбрать для себя подходящий вариант. Для отправки сообщений на почту нам понадобится использовать язык php , т.е. создавать отдельный файл, в который мы будем передавать все эти данные. Но мы данный способ здесь не будем рассматривать, так как гораздо красивее, когда у нас все происходит без перезагрузки страницы. Поэтому мы рассмотрим отправку данных через ajax .
Если вы хотите все сделать по старинке, то вам понадобится немного подправить верхний html и задать форме значение атрибута method (post или get). Все зависит от того, каким способом вы хотите передать данные из формы. А также не забудьте прописать action , который укажет путь к файлу php .
А мы пойдем более продвинутым методом и сделаем отправку данных не перезагружая страницу, и получая ответ от сервера будем выдавать пользователю сообщение об успешной операции, либо ошибке. Однако, нам также понадобятся 2 файла, допустим contact.php
и custom.js
.
Первым делом не забываем подключить библиотеку Jquery
, с ее помощью мы в несколько раз сократим код и сможем с легкостью производить любые действия используя готовые решения.
$(«.form»).submit(function() {
var str = $(this).serialize();
$.ajax({
type: «POST»,
url: «contact.php»,
data: str,
success: function(msg) {
if(msg == «ok») {
alert(«Письмо отправлено»);
}
else {
alert(«Ошибка! Возможно вы неправильно заполнили поля.»);
}
}
});
return false;
});
Теперь разберемся в схеме действий и зачем нам нужны все эти библиотеки и файлы. Когда пользователь нажимает кнопку отправить, у нас происходит событие submit , которое мы пропишем в custom.js и на основе которого получим все данные из формы и передадим их в файл contact.php. Здесь мы еще раз проверяем, не пустые ли у нас поля (дабы избежать очередной возможности спама), производим отправку сообщения на email и уведомляем о результатах пользователя, которые передаются ответом в custom.js.
If (trim($_POST[«mfbPhone»]) == «») {
echo «false»;
}
else {
$txtname = trim($_POST[«mfbName»]);
$txtemail = trim($_POST[«mfbMail»]);
$txtphone = trim($_POST[«mfbPhone»]);
// от кого
$fromMail = «[email protected]»;
// Сюда введите Ваш email
$emailTo = «[email protected]»;
$subject = «Обратная связь»;
$subject = «=?utf-8?b?». base64_encode($subject) .»?=»;
$headers = «From: Пример формы<$fromMail>\n»;
$headers .= «Content-type: text/plain; charset=»utf-8″\r\n»;
$headers .= «MIME-Version: 1.0\r\n»;
$headers .= «Date: «. date(«D, d M Y h:i:s O») .»\r\n»;
// тело письма
$body = «Получено письмо с сайта «.$site.» \n\nИмя: «.$txtname.»\nТелефон: «.$txtphone.»\ne-mail: «.$txtemail.»\nСообщение: «.$txtmessage;
mail($emailTo, $subject, $body, $headers);
echo «ok»;
}
Это самый элементарный пример работы контактной формы. Есть множество вариантов, как доработать файл проверки на php, создание своих классов и т.д. Но наша задача была создать простой и рабочий пример, который можно использовать на своем сайте.
demo
файлы
Готовые плагины
Так как вы находитесь на блоге WordPress, то наверняка готовы и стремитесь использовать всевозможные плагины, особенно если вы в программировании и верстке полный ламер. И я вас в этом не виню и могу даже один из них представить вашему вниманию для наглядности. Цель этого абзаца не рекомендация, а лишь пример, так как я использовал плагин Contact Form 7
в нескольких проектах.
Он очень удобен в настройках и практически всегда работает безукоризненно. Если вам понадобится создать свой уникальный дизайн, вы это сможете сделать. Достаточно лишь в конструкторе добавить необходимые поля, перевести и изменить оповещения об ошибках и успешной отправке на свой лад и все готово. Дальше копируете шорткод и вставляете в нужном месте вывода формы.
У меня проблем с плагином никогда не возникало и если вам необходимо быстрое и готовое решение, то это именно оно. Если же у вас к форме свои требования по функционалу и дизайну, то лучше использовать первый вариант, который требует знаний в этой отрасли.
Здравствуйте дорогие читатели, сегодня хочу рассказать вам о том, как я создаю формы, для получения контактных данных пользователя.
На сегодняшний день, , является в структуре лендинг пейдж. Ведь это один из способов принять заказ или отправить каталог вашей продукции, предварительно получив e-mail посетителя.
Создание формы обратной связи – html разметка
Обычно мне хватает трех полей, и в большинстве случаев, я использую такую разметку для создания контактной формы:
Попробуйте открыть в браузере данный код и посмотрите что у вас получилось, в зависимости от того, какой интернет-обозреватель используете, должно выглядеть примерно так:
Если возникнут какие-нибудь вопросы по разметке, смело задавайте их в комментариях, постараюсь подробно ответить, а в статье не буду описывать каждый элемент, чтобы не увеличивать ее размер. Кроме того, элементы достаточно просты.
Создание формы обратной связи — css разметка
Давайте зададим стили нашей форме и приведем ее к читабельному виду:
/* Стили формы */
#application {
width: 475px;
margin: 0 auto;
}
/*Стили полей для ввода*/
#applicationName, #applicationEmail, #applicationTelephone {
width: 100%;
height: 73px;
background: none;
margin-top: 25px;
border: 1px solid #fff;
border-radius: 40px;
text-align: center;
color: #fff;
font-size: 24px;
}
/*Стили полей при клике по ним*/
#applicationName:focus, #applicationEmail:focus, #applicationTelephone:focus {
border: 1px solid #30ad64;
}
/*Стили текста, выводящегося в placeholder*/
::-webkit-input-placeholder {
color: #efefef;
font-family: «PT Sans», sans-serif;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
::-moz-placeholder {
color: #fff;
font-family: «PT Sans», sans-serif;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
} /* Firefox 19+ */
:-moz-placeholder {
color: #fff;
font-family: «PT Sans», sans-serif;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
} /* Firefox 18- */
:-ms-input-placeholder {
color: #fff;
font-family: «PT Sans», sans-serif;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
::placeholder {
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/*Стили для кнопки*/
.applicationButton {
margin-top: 25px;
background: #30ad64;
border: none;
width: 100%;
height: 73px;
border-radius: 40px;
color: #fff;
font-size: 24px;
text-transform: uppercase;
font-family: «PT Sans», sans-serif;
cursor: pointer;
}
.applicationButton:hover {
background: #d68c18;
}
Если хотите, чтобы цвет кнопки менялся плавно, добавьте в.applicationButton и.applicationButton:hover такую строку:
Transition: .6s;
Где.6s — время анимации в миллисекундах.
Теперь наша форма приобрела красивый вид, сейчас она выглядит так:
Создание формы обратной связи — php разметка
Теперь нам необходимо создать файл application.php. Он будет получать введенные параметры из формы и отправлять их к нам на почту.
Структура у него, как у обычного html файла, это может быть страничка, на которой вы напишите «Спасибо, ваша заявка принята. После обработки заявки наши менеджеры свяжутся с вами»
То есть, когда пользователь нажмет кнопку, его перекинет на страницу application.php. Это полноценная страница, и вы должны оформить ее соответствующим образом.
«;
$msg .= «
Cообщение с сайта
\r\n»;
$msg .= «
От кого: «.$username.»
\r\n»;
$msg .= «
Почта: «.$usermail.»
\r\n»;
$msg .= «
Сайт: «.$usertel.»
\r\n»;
$msg .= «»;
// отправка сообщения
if(@mail($sendto, $subject, $msg, $headers)) {
echo «
} else {
echo «
}
?>
Давайте немного поясню код:
$sendto = «[email protected]»; // почта, на которую будет приходить письмо
$username = $_POST[«name»]; // сохраняем в переменную данные полученные из поля c именем
$usertel = $_POST[«telephone»]; // сохраняем в переменную данные полученные из поля c телефонным номером
$usermail = $_POST[«email»]; // сохраняем в переменную данные полученные из поля c адресом электронной почты
Тут, думаю, — понятно.
Теперь давайте сформируем заголовок письма.
$subject = «Новое сообщение»;
$headers = «From: » . strip_tags($usermail) . «\r\n»;
$headers .= «Reply-To: «. strip_tags($usermail) . «\r\n»;
$headers .= «MIME-Version: 1.0\r\n»;
$headers .= «Content-Type: text/html;charset=utf-8 \r\n»;
Строка $subject = «Новое сообщение»;
— отвечает за тему письма, может написать там: «Заявка с сайта» или то, что вам больше подходит.
Предлагаю сделать так, чтобы письмо приходило, от адреса, указанного в поле input type=»email». То есть с того, с которого пользователь ввел при заполнении формы. Для этого пропишем следующие строки:
$headers = «From: » . strip_tags($usermail) . «\r\n»;
То есть мы подставим данные из переменной $usermail, где и хранится информация из поля, отвечающего за ввод email адреса.
Теперь зададим внешний вид письма. Вы можете оформить его как угодно, а я предлагаю следующую структуру:
$msg = «
«;$msg .= «
Cообщение с сайта
\r\n»;
$msg .= «
От кого: «.$username.»
\r\n»;
$msg .= «
Почта: «.$usermail.»
\r\n»;
$msg .= «
Телефон: «.$usertel.»
\r\n»;
$msg .= ««;
Первой строкой задаем шрифт письма. Второй — выводим сообщение, например: «Заявка с формы обратной связи на первом экране». Третей, четвертой и пятой строкой передаем данные из формы. Каждая с новой строки.
Теперь нужно отправить письмо функцией mail и определить, что будет происходить при успешной и не успешной отправки письма:
If(@mail($sendto, $subject, $msg, $headers)) {
echo «
} else {
echo «
}
?>
Я сделал так, что в любом из случаев выведется картинка с соответствующим текстом. Вы можете вместо картинки вывести полноценную страницу. Просто пропишите код, вместо картинки.
Через несколько секунд, после вывода изображения, я делаю редирект (автоматическое перенаправление) на главную страницу. Сделать это можно, вписав следующую строку между тегами head;
То есть через 4 секунды пользователя автоматически вернет на главную страницу!
Я не эксперт в php — это back-end язык программирования, меня всю жизнь тянуло к изучению front-end. Поэтому не судите строго. Да, здесь можно сделать проверки на заполнение контактных форм и так далее, но мне всегда хватало и этого, так что, если у кого-то есть предложение как улучшить этот код, напишите пожалуйста в комментариях или на почту, поправлю урок, спасибо!
Кстати, если вам нужна форма обратной связи без перезагрузки страницы, то почитать о том как ее установить можно в
Может быть, кому-то не очень понятен материал, но если вы в точности повторите мои действия, то у вас обязательно будет работать контактная форма. Возникнут вопросы — пишите в комментариях, постараюсь ответить! До встречи на блоге!
P.s. Так как я стал очень часто получать вопросы о том, почему не работает форма и не приходят письма на почту, то решил описать несколько наиболее популярных причин, по которым это может происходить:
- Тестируете форму не на сервере.
- Тестируете форму на бесплатном хостинге.
- Тестируете форму на платном хостинге, но в бесплатном тестовом периоде.
В этих случаях письма не будут приходить к вам на почту.
Если вам лень разбираться и самостоятельно делать форму, то рекомендую обратить внимание на .
23/07/2014 12/07/2018
dimadv7