Smartlanding

Создание формы обратной связи

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

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

Создание формы обратной связи – html разметка

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

<form id="application" action=" application.php" method="POST" name=" application ">
   <input name="name" id="applicationName" 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   = "smart-landing@yandex.ru"; // почта, на которую будет приходить письмо
$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   = "smart-landing@yandex.ru"; // почта, на которую будет приходить письмо
$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;

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

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

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

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

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

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

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

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

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

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

Поделитесь статьей в социальных сетях, чтобы не потерять

244 комментария

  • Евгений

    помогите! все сделал как написано. при отправке выводится картинка, но письмо не приходит. в чем может быть проблема?

    Ответить
  • dimadv7

    Отправьте исходники пожалуйста сюда dima.d.v(собачка)yandex.ru, так сложно сказать, должно работать. Или скиньте В ВКонтакте

    Ответить
  • dimadv7

    Если появляется картинка, значит все правильно, проверьте поля где указывали адрес электронной почты(в трех местах)

    Ответить
  • макс

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

    Создание формы обратной связи

    <?php
    if($_POST){

    $to = "8021388@mail.ru";
    $from = '8021388@mail.ru;
    $subject = "Отправить бриф, техника для клининга";
    $message = 'Имя: '.$_POST['name'].'; Почта: '.$_POST['email'].'; '.$_POST['telephone'].'; ';
    $headers = "Content-type: text/html; charset=UTF-8 \r\n";
    $headers .= "From: 8021388@mail.ru\r\n";
    $result = mail($to, $subject, $message, $headers);

    if ($result){
    echo "»;
    }
    else {echo» Сообщение не отпраВлено :( «;
    }
    }
    ?>

    Ответить
  • dimadv7

    Здравствуйте. У вас в 4 строке, в $from = '8021388@mail.ru; — ошибка. Попробуйте так $from = '8021388@mail.ru'; — не было кавычек закрывающихся! Сейчас проверю полностью.
    И в конце тоже — попробуйте так:

     
    if ($result){
    	echo "<center><img src='images/spasibo.png'></center>";
    	}
    else {echo" <p>Сообщение не отпралено</p> ";
    	}
    }
    ?>
    
    

    Или, вместо вывода сообщения и картинки, сделайте полноценную html страницу, в которой и поблагодарите за заявку

    Ответить
  • dimadv7

    Если будут проблемы — пишите, будем разбираться!

    Ответить
  • dimadv7

    Вот проверил, вот так должно работать

    <?php 
    if($_POST)
    {
    $to = "8021388@mail.ru";
    $from = '8021388@mail.ru';
    $subject = "Ваше сообщение"; 
    
    $message = 'Имя: '.$_POST['name'].'; Телефон: '.$_POST['telephone'].'; Email: '.$_POST['email'].';';
    
    $headers  = "Content-type: text/html; charset=UTF-8 \r\n"; 
    $headers .= "From: <8021388@mail.ru>\r\n"; 
    
    $result = mail($to, $subject, $message, $headers);
    
    
    if ($result){
    	echo "<center><img src='images/spasibo.png'></center>";
    	}
    else {echo" <p>Сообщение не отпралено</p> ";
    	}
    }
    ?>
    
    
    Ответить
  • макс

    DIMADV7, Спасибо заработало!) у обратил внимания на «кавычки»))) а можно убрать пункт e-mail.
    так как многие обыватели его могут и не иметь или не знать как пользоваться.
    Просто Имя и Телефон самое оно)

    Ответить
  • dimadv7

    Да, конечно, просто оставьте так:

    $message = 'Имя: '.$_POST['name'].'; Телефон: '.$_POST['telephone'].';';
    

    И, соответственно, в форме уберите input, отвечающий за ввод почты)

    Ответить
  • макс

    Спасибо)))

    Ответить
  • макс

    DIMADV7 а у Вас случайно может есть lightbox для текста и Формы обратной связи? много перерыл но толком не чего не нашел(

    Ответить
  • dimadv7

    Здравствуйте, честно говоря, я даже не в курсе что такое lightbox.

    Ответить
  • макс

    вот как тут, если сверху нажать «Оставьте номер»
    ww.altera-media.com

    Ответить
  • dimadv7

    Так а в чем принципиальное отличие? Форма связана с БД или еще что-то? Как по мне, так довольно простое поле, внешне.

    Ответить
  • макс

    DIMADV7, ну там в «модульном окне» выплывает форма обратной связи. я не знаю как еще объяснить)

    Ответить
  • dimadv7

    Вот статья про форму обратной связи: https://smartlanding.biz/sozdanie-formy-obratnoj-svyazi.html,
    Вот статья про модальное окно: https://smartlanding.biz/kak-sdelat-knopku-zakazat-obratnyj-zvonok.html
    Объедините и будет тоже самое :) Если возникнут вопросы — пишите)

    Ответить
  • макс

    проблема, с формой обратной связи)
    1 в хедере вторая в page
    заполняешь в page нажимаешь отправить, а кнопка получается запрашивает поля в хедере

    Ответить
  • dimadv7

    Конечно. Ты же сам вот в этой строке говоришь к какой форме обращаться.

    <button class="applicationButton" type="submit" form="application">Получить прайс </button>

    а точнее — здесь

    form="application"

    Задай второй форме name и id — другой, и здесь пропиши его

    form="application"

    тогда будет все ок.

    Ответить
  • Светлана

    dimadv7, Вы лучший! Большое спасибо за форму, все чудесно работает и очень красиво!

    Ответить
  • dimadv7

    Большое спасибо)

    Ответить
  • DanilD

    Тоже не отправляет сообщения( Хотя после нажатия кнопки появляется сообщение об успешной отправке.

    <?php
    if($_POST)
    {
    $to = "danild91@gmail.com";
    $from = 'danild91@gmail.com';
    $subject = "Ваше сообщение";

    $message = 'Имя: '.$_POST['name'].'; Телефон: '.$_POST['telephone'].'; Email: '.$_POST['email'].';';

    $headers = "Content-type: text/html; charset=UTF-8 \r\n";
    $headers .= "From: \r\n»;

    $result = mail($to, $subject, $message, $headers);

    if ($result){
    echo «»;
    }
    else {echo» Сообщение не отпралено «;
    }
    }
    ?>

    Ответить
  • DanilD

    не $headers .= «From: \r\n»;
    а
    $headers .= «From: \r\n»;

    Ответить
  • dimadv7

    А в чем отличия?

    Ответить
  • DanilD

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

    Ответить
  • dimadv7

    Ну значит ошибка где-то у тебя. Ну у всех же работает. Я вчера обновил статью, подробнее описал php обработчик. Попробуй по новому

    Ответить
  • DanilD

    Подрубил обновлённый код, заработало сразу. После того как прописали свои стили — опять перестал работать. Пробовал разные почты, ничего. Хотя в логах хоста отправку показывает. /home/ххххххх/public_html/2/forma/application.php:33 11.12.2014 14:47:07

    Ответить
  • dimadv7

    Ну не может же из за стилей перестать работать. Возьми исходник, и редактируй его внимательно. Ну я не знаю как тебе еще помочь. Сам же говоришь, что работает. Значит где-то, что-то портишь во время правок :)

    Ответить
  • Сергей

    У меня форма на 1 поле (только телефон).
    Попытался сократить код, вот что вышло:
    <?php
    $sendto = "zalubov.s@gmail.com"; // почта, на которую будет приходить письмо
    $usertel = $_POST['telephone']; // сохраняем в переменную данные полученные из поля c телефонным номером

    // Формирование заголовка письма
    $subject = "Заявка на UF-X";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html;charset=utf-8 \r\n";

    // Формирование тела письма
    $msg = "»;
    $msg .= «Заявка на UF-X\r\n»;
    $msg .= «Номер: «.$usertel.»\r\n»;
    $msg .= «»;

    // отправка сообщения
    if(@mail($sendto, $subject, $msg, $headers)) {
    echo «»;
    } else {
    echo «»;
    }
    ?>

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

    Подскажите пожалуйста, что не так делаю?

    Ответить
  • dimadv7

    Ответил в вк =)

    Ответить
  • Сергей

    Спасибо, все заработало!

    Ответить
  • Сергей

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

    echo readfile('order_success.html');

    Но не срабатывает.

    Ответить
  • dimadv7
    if(@mail($sendto, $subject, $msg, $headers)) {
    	echo "<center><img src='images/spasibo.png'></center>";
    }
    

    Убирай

    <center> ... </center>

    И пиши

    <div class="" ></div>

    ну в общем как обычно, только кавычки после echo одинарные поставь, а то не будет работать

    Ответить
  • DanilD

    С проблемой отправки всё решилось банально просто — заменой хостинга) Автору спасибо за код.

    Ответить
  • Сергей

    Спасибо. Я наверное не совсем понятно сформировал вопрос или что-то недопонял.
    У меня есть html страница «order_success.html», я хочу, чтоб при успешной отправке формы пользователь попадал на эту страницу. Что нужно написать после echo?

    Ответить
  • dimadv7

    Я понял, что ты хочешь. Просто зачем создавать еще одну страницу, если можно эту оформить как угодно. То есть, если все хорошо, то покажем — такое, если ошибка, то покажем — такое. Просто начинаешь создавать обычную страницу, как бы ты это делал на новой, только без доктайпа и прочего. Сразу div и погнал..)
    Но если очень надо, попробуй так:

     echo 'header("Location: http://caqn.ru");';
    Ответить
  • Сергей

    Действительно, спасибо за совет!
    То есть вставляем всю страницу, начиная с и потом …? И все прописанное между и будет работать. Имею в виду «NOINDEX» для поисковиков и коды конверсии AdWords и Analytics?

    Ответить
  • Oleg

    Здравсвуйте, форма не отправляет письми и не переходит на страницу с картинкой, просто возврощается страница сайта. Пробовал создать новую html стриницу все работает, а на моей index.php никак

    Ответить
  • dimadv7

    Странно, ну нужно разбираться, может ты не в ту папку кладешь файл application.php?

    Ответить
  • Роман

    Спасибо! Отличная статья! Очень помогли!

    Ответить
  • Максим

    Почему-то при копировании не все строки передало( В кратце, мне нужно чтобы фаил по этому адрессу energosystems.com.ua/Catalog_Energosystems.zip начинал скачиваться автоматически, после заполнения формы и перехода на картинку об успешном заполнении.

    Ответить
  • dimadv7

    Привет, попробуй так:

    <meta http-equiv="refresh" content="0;url=http://example.com/file.rar" />
    Ответить
  • Максим

    Это нужно в echo в конце вставить?

    Ответить
  • Максим

    Если да, то пишет: Parse error: syntax error, unexpected '<' in …

    Ответить
  • dimadv7

    Нет, конечно не в echo, между тегами

    <head></head>

    , там где подключаешь таблицу стилей)

    Ответить
  • Максим

    Наверно я полный чайник в этом, но я вставил в мой документ index.html там где прописана эта кнопка, но оно скачивает его при заходе сразу на сайт( Очень нужно это сделать, но я блин даже не представляю уже как( Вот сама кнопка:

    Можете пожалуйста еще раз более подробно написать куда вставлять в мой главный файл index.html или в форму php? Заранее огромное спасибо!)

    Ответить
  • Максим

    Я полный чайник в этом, по этому можете пожалуйста более детально описать куда вставлять? В мой главный файл index.html или в форму php? Вот сама кнопка
    Извиняюсь если принес неудобства и заранее огромное спасибо!)

    Ответить
  • Максим

    Может как-то можно Вам скинуть на почту исходних php и код самой кнопки из html?

    Ответить
  • dimadv7

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

    Можем на «Ты») Если хочешь присылай smart-landing@yandex.ru

    Ответить
  • Ильдар

    как сделать чтоб не вертикально столбцы были а горизонтально? в дну строку…и второй вопрос…форму можно ли использовать два более раз на одной странице…первый вариант в шапке вертикальном исполнении и по середине сайта в горизонтальном положении???

    Ответить
  • dimadv7

    Ширину формы сделай больше, они (поля) встанут горизонтально, если не поможет, то задай float:left; Использовать несколько раз — можно! Меняй id у формы и инпутов и располагай как угодно.

    Ответить

Добавить комментарий