Закрыть ... [X]

Как сделать окно обратной связи

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

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

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

<form id="application" action=" application.php" method="POST" name=" application "> <input name="name" id="zayavkaName" maxlength="20" placeholder="Введите ваше имя" required /> <input name="email" type="email" id="applicationEmail" maxlength="20" placeholder="Введите ваш E-mail" required /> <input name="telephone" type="Tel" id="applicationTelephone" maxlength="20" placeholder="Введите ваш телефон" required/> <button class="applicationButton" type="submit" form="application">Получить прайс </button> </form>

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

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

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

Создание формы обратной связи - 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. Это полноценная страница, и вы должны оформить ее соответствующим образом.

<?php $sendto = ""; // почта, на которую будет приходить письмо $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"; // Формирование тела письма $msg = "<html><body style='font-family:Arial,sans-serif;'>"; $msg.= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>Cообщение с сайта</h2>\r\n"; $msg.= "<p><strong>От кого:</strong> ".$username."</p>\r\n"; $msg.= "<p><strong>Почта:</strong> ".$usermail."</p>\r\n"; $msg.= "<p><strong>Сайт:</strong> ".$usertel."</p>\r\n"; $msg.= "</body></html>"; // отправка сообщения if(@mail($sendto, $subject, $msg, $headers)) { echo "<center><img src='images/spasibo.png'></center>"; } else { echo "<center><img src='images/ne-tpravleno.png'></center>"; }?>

Давайте немного поясню код:

$sendto = ""; // почта, на которую будет приходить письмо $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 = "<html><body style='font-family:Arial,sans-serif;'>"; $msg.= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>Cообщение с сайта</h2>\r\n"; $msg.= "<p><strong>От кого:</strong> ".$username."</p>\r\n"; $msg.= "<p><strong>Почта:</strong> ".$usermail."</p>\r\n"; $msg.= "<p><strong>Телефон:</strong> ".$usertel."</p>\r\n"; $msg.= "</body></html>";

Первой строкой задаем шрифт письма. Второй - выводим сообщение, например: "Заявка с формы обратной связи на первом экране". Третей, четвертой и пятой строкой передаем данные из формы. Каждая с новой строки.

Теперь нужно отправить письмо функцией mail и определить, что будет происходить при успешной и не успешной отправки письма:

if(@mail($sendto, $subject, $msg, $headers)) { echo "<center><img src='images/spasibo.png'></center>"; } else { echo "<center><img src='images/ne-tpravleno.png'></center>"; }?>

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

Через несколько секунд, после вывода изображения, я делаю редирект ( автоматическое перенаправление) на главную страницу. Сделать это можно, вписав следующую строку между тегами <head></head>

<meta http-equiv="Refresh" content="4; url=http://Адрес сайта/">

То есть через 4 секунды пользователя автоматически вернет на главную страницу!

Я не эксперт в php - это back-end язык программирования, меня всю жизнь тянуло к изучению front-end. Поэтому не судите строго. Да, здесь можно сделать проверки на заполнение контактных форм и так далее, но мне всегда хватало и этого, так что, если у кого-то есть предложение как улучшить этот код, напишите пожалуйста в комментариях или на почту, поправлю урок, спасибо!

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

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

Скачать исходник

P.s. Так как я стал очень часто получать вопросы о том, почему не работает форма и не приходят письма на почту, то решил описать несколько наиболее популярных причин, по которым это может происходить:

  • Тестируете форму не на сервере.
  • Тестируете форму на бесплатном хостинге.
  • Тестируете форму на платном хостинге, но в бесплатном тестовом периоде.

В этих случаях письма не будут приходить к вам на почту.

Если вам лень разбираться и самостоятельно делать форму, то рекомендую обратить внимание на конструктор форм обратной связи.

Это интересно:


Поделись с друзьями



Рекомендуем посмотреть ещё:



Всплывающее окно с формой обратной связи Битрикс, заметки Жемчужное шитье это

Как сделать окно обратной связи Как сделать окно обратной связи Как сделать окно обратной связи Как сделать окно обратной связи Как сделать окно обратной связи Как сделать окно обратной связи Как сделать окно обратной связи Как сделать окно обратной связи

ШОКИРУЮЩИЕ НОВОСТИ