От автора: Мы часто сталкиваемся с контактными формами, будь то обычный сайт или, скажем, WordPress. Формы могут быть совершенно разными, всё зависит от Вас и от пожеланий клиента). В этом посте я наглядно покажу всю «анатомию» создания контактной формы для сайта средствами HTML и PHP.
Скачать исходный код себе на компьютер!
Перед тем, как мы приступим к создания контактной формы для сайта, я Вам рекомендую просмотреть демо-результат работы.
Первым делом мы должны определить место, где будет наша форма. Помещать всё её содержимое мы будем между тегами:

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее 1 2 | <form> </form> |
Атрибут action указывает, в какой файл пойдут данные при нажатии кнопки «Отправить». Значит, второе, что мы создадим mail.php.
Метод передачи выбираем POST — то есть данные передадутся внутри тела запроса, а не через адресную строку.
Итак, получаем:
1 | <form action="mail.php" method="POST"> |
Последняя задача, которую нам необходимо понять, это как браузер поймёт, какие данные куда определять? Чтобы имя пошло к имени, фамилия — к фамилии? Для этого каждому input’у нужно задать атрибут name
Начнём
Начнём с максимально простого примера формы, а дальше, по ходу, уже разберёмся уже более детально.
1 2 3 4 5 6 | <form action="mail.php" method="POST"> <p>Имя</p> <input type="text" name="name"/> <p>Email</p> <input type="text" name="email"/> <p>Сообщение</p><textarea name="message" rows="6" cols="25"></textarea><br /> <input type="submit" value="Отправить"/><input type="reset" value="Очистить"/> </form> |
Рассмотрим этот код и попробуем его модифицировать.
Для того, чтобы наша форма работала, необходимо добавить php-функции. Используем функцию $_POST для перевода значений из полей input в переменные:
К примеру, у нас есть:
1 | <input type="text" name="email"/> |
Дальше функцией $_POST захватываем значение атрибута name — email и преобразуем в переменную $email:
1 | $email = $_POST['email']; |
И для всех сразу:
1 2 3 4 5 6 7 8 9 10 | <?php $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $formcontent="От: $name \n Сообщение: $message"; $recipient = "emailaddress@here.com"; $subject = "Форма обратной связи"; $mailheader = "Отправитель: $email \r\n"; mail($recipient, $subject, $formcontent, $mailheader) or die("Ошибка!"); echo "Спасибо!"; ?> |
Переменная $recipient задаёт тот адрес, на который отправятся данные. Ну а функция mail отправляет данные на почту.
Теперь перед нами стоит задача продвинуться вперёд, я покажу, как можно добавить выпадающий список, и как добавить радио — кнопки.
Выпадающий список
Для создания выпадающего меню, нам потребуется вставить код в HTML, и подкрепить его PHP.
HTML:
1 2 3 4 5 6 7 8 | <p>Выпадающий список</p> <select name="dropdown" size="1"> <option value="Опция 1">Опция 1</option> <option value="Опция 2">Опция 2</option> <option value="Опция 3">Опция 3</option> <option value="Опция 4">Опция 4</option> </select> <br /> |
И весь код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <form action="mail.php" method="POST"> <p>Имя</p> <input type="text" name="name"/> <p>Email</p> <input type="text" name="email"/> <p>Выпадающий список</p> <select name="dropdown" size="1"> <option value="Option1">Опция 1</option> <option value="Option2">Опция 2</option> <option value="Option3">Опция 3</option> <option value="Option4">Опция 4</option> </select> <br /> <p>Сообщение</p><textarea name="message" rows="6" cols="25"></textarea><br /> <input type="submit" value="Отправить"/><input type="reset" value="Очистить"/> </form> |
Атрибут size указывает, сколько вариантов ответа будет показываться за раз. Чаще всего это 1.
А вот и модифицированный код PHP, с учётом нашего выпадающего бокса:
1 2 3 4 5 6 7 8 9 10 11 | <?php $name = $_POST['name']; $email = $_POST['email']; $dropdown = $POST['dropdown']; $message = $_POST['message']; $formcontent="От: $name \n Сообщение: $message"; $recipient = "emailaddress@here.com"; $subject = "Форма обратной связи"; $mailheader = "Отправитель: $email \r\n"; mail($recipient, $subject, $formcontent, $mailheader) or die("Ошибка!"); echo "Спасибо!"; ?> |
Мы видим, что добавилась $dropdown.
Флажки и Радио-кнопки
Рассмотрим HTML-код флажков.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее 1 2 3 | <p>Способ связи</p> Email<input type="checkbox" value="mail" name="connect[]"/><br /> Телефон<input type="checkbox" value="Телефон" name="connect[]"/><br /> |
Обратите внимание на квадратные скобки в параметре name — они обеспечивают возможность выбора нескольких значений. Иногда используются просто разные имена.
Что касается кнопок — переключателей (radio), то мы можем добавить такой пример:
1 2 3 | <p>Необходим ли телефонный звонок?:</p> <input type="radio" name="call" value="Да">Да<br/> <input type="radio" name="call" value="Нет">Нет<br/> |
Здесь имя одинаковое, но разные значение value.
И опять, полный HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <form action="send.php" method="POST"> <p>Имя</p> <input type="text" name="name"/> <!--Текстовое поле---> <p>Email</p> <input type="text" name="email"/><!--Текстовое поле---> <p>Телефон</p> <input type="text" name="phone"/><!--Текстовое поле---> <p>Необходим ли телефонный звонок?</p><!--Радио-кнопки---> Да<input type="radio" name="call" value="Да"/><br/> Нет<input type="radio" name="call" value="Нет"/><br/> <p>Способ связи</p><!--Флажки--> Email<input type="checkbox" value="mail" name="connect[]"/><br /> Телефон<input type="checkbox" value="Телефон" name="connect[]"/><br /> <p>Сайт</p> <input type="text" name="website"><!--Текстовое поле---> <p>Важность</p> <select name="priority" size="1"><!--Выпадающий список--> <option value="Низкая">Низкая</option> <option value="Нормальная">Нормальная</option> <option value="Высокая">Высокая</option> <option value="Максимальная">Максимальная</option> </select> <br /> <p>Тип</p> <select name="type" size="1"><!--Выпадающий список--> <option value="Обновление сайта">Обновление сайта</option> <option value="Изменение информации">Изменение информации</option> <option value="Информация добавлена">Информация добавлена</option> <option value="Новые продукты">Новые продукты</option> </select> <br /> <p>Сообщение</p><textarea name="message" rows="6" cols="25"></textarea><br /> <input type="submit" value="Отправить"/><input type="reset" value="Очистить"/> <!--Кнопки отправки/отмены--> </form> |
Дополняем наш обработчик переменными, которые потребуются для отправки письма:
1 2 3 4 | $recipient = "emailaddress@here.com"; $subject = "Форма обратной связи. Пользователь - $name"; $mailheader = "Отправитель: $email <div style='style:border:1px solid red'>1</div> \r\n"; $info = mail($recipient, $subject, $formcontent, $mailheader, "Content-type:text/plain; Content-type:text/plain; charset = UTF-8\r\n") or die("Ошибка"); |
Любую из этих переменных можно дополнить различной полезной информацией. Я добавил имя пользователя в $subject, которая отвечает за тему письма.
Вы, например, можете в $mailheader добавить адрес Вашей организации, телефоны и т.п.
И напоследок — поработаем с почтой.
Вообще, по-идее, у нас при отправке данных, выводится надпись — просто Спасибо!. Но мы пойдём дальше и создадим ссылку, по которой пользователь сможет вернуться назад. Будьте внимательны, синтаксис PHP заставит нас немного изменить написание HTML. Например, вместо двойных ковычек « мы будем использовтаь одинарные ‘.
После фразы Спасибо! добавим ссылку на form.html, и чуть поменяем стили ссылок.
Для начала в mail.php изменим команду echo, которая отвечает за вывод текста:
1 | echo "Спасибо!" . " -" . "<a href='index.html' style='text-decoration:none;color:#ff0099;'> Вернуться на главную</a>"; |
Но это мой вариант, фраза и стили могут быть любыми.
И финальный PHP:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <?php $name = $_POST['name']; $email = $_POST['email']; $phone = $_POST['phone']; $website = $_POST['website']; $priority = $_POST['priority']; $type = $_POST['type']; $message = $_POST['message']; $call = $_POST['call']; $check_msg=''; foreach($_POST['connect'] as $value) { $check_msg .= $value.' '; } $formcontent=" От: $name \n Телефон: $phone \n Обратный звонок: $call \n Сайт: $website \n Способ связи: $check_msg \n Важность: $priority \n Тип: $type \n Сообщение: $message"; $recipient = "emailaddress@here.com"; $subject = "Форма обратной связи. Пользователь - $name"; $mailheader = "Отправитель: $email \r\n"; $info = mail($recipient, $subject, $formcontent, $mailheader, "Content-type:text/plain; Content-type:text/plain; charset = UTF-8\r\n") or die("Error!"); echo "Спасибо!" . " -" . "<a href='/myform' style='text-decoration:none;color:#ff0099;'> Назад</a>"; ?> |
Самые внимательные заметили, что для обработки флажков применяем цикл foreach.
Разумеется, то, что у нас получилось — это простейший вариант, здесь нет ни одной проверки и способов защиты от спама.
К посту будет приложен исходник файлов нашей формы, так что можете использовать его для своих проектов и настраивать, как вам угодно. Надеюсь, урок был (или будет) полезен.
Можете скачать файлы формы, или посмотреть демо
Если есть вопросы, то пишите в комментариях ниже статьи, и я обязательно отвечу!
Надеюсь, урок по созданию контактной формы для сайта, вам понравился.
Автор: Найко Михаил
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
E-mail: contact@webformyself.com
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
"Киберсант-вебмастер" — самый полный курс по сайтостроению в рунете!
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Благодарю. Этот урок мне очень помог.
Ну молодцы ребята, просто и доступно во всех ваших размеченных блоках. Я просто прочитал, и сразу кое-что уловил. Не скрою, раньше я 2 года преподавал информатику, но в школе такие темы не изучаются. А так хочется постичь совершенства самостоятельного изучения с помощью таких хороших и легких раскладок.
Здоровья Вам всем и удачи в работе с пользователями.
Пусть ваши труды будут зачтены хорошими заработками!
Спасибо! Как раз во время! Только хотел начинать писать форму обратной связи, а тут РАЗ! и урок пришел на нужную тему! Спасибо огромное!
Парень, вообщем, живет и работает в Москве.
всегда приятно читать хорошие отзывы)
Материал очень ценный,но я пока не готова его принимать,т.к. многое для меня еще не понятно.Я в интернете недавно,нельзя ли отмотать пленку чуть-чуть назад.Заранее благодарна.
Большое спасибо! Помогли разобраться с формами.
Да все просто и доходчиво, однако хочется надеятся, что в далбнейшех уроках проверка полей и защита от спама будут. Ведь с такой формой можно было держать сайт лет десять назад, а сейчас так заспамят, что форму не хахочешь!
Вы молодцы! Ваш урок вышел во время!
Михаил, спасибо огромное. Все ясно и достаточно для создания контактных форм достаточного разнообразия. Вы основательно помогли.
Спасибо большое, очень полезно, как раз нужно было делать форму для странички отписки от рассылки в смартреспондере=)
Чувствую, что интересно, но, увы, непонятно, а потому и не получилось. На html я и раньше делал формы, а вот с php совсем сё запуталось.
А нет ли у вас «за пазухой» пошаговой инструкции, чтобы на блоге отображалось количество просмотревших тот или иной пост? Было бы очень кстати.
Заранее благодарен.
Благодарю Вас за интересный и информационный материал.Лично мне еще учиться и учиться .
ВАШ НАМЕК ПОНЯЛ ! Будьте бдительны.
Спасибо большое, очень полезно!
Спасибо ребята, толково и лаконично.
Спасибо. Хотелось бы чтобы в таком же духе кто-нибудь поразжёвывал PHP с самых азов и до профи.
вот кто-нибудь не знаю, а что нибудь
это книги по PHP для начинающих или диски
Ну купите книжку в библиотеке, самоучитель. Там все понятно и ясно
т.е. php отправляет письмо встроенными средствами?
А что нибудь нужно настраивать на денвере например для этого или он поддерживает эти функции?
т.е. можно ли тестить подобные функции в офлайне?
Спасибо Вам ребята, за такой нужный и отличнейший материал. Форма на сайте это очень удобно.
TRSteep: можно, почему нет?
Хорошим делом занимаетесь, что помогаете начинающим, причём бесплатно!
Материал для меня не был новым, но, думаю, новичкам данная информация будет полезна. Одно замечание – вы показываете пример конкретного кода, но не показываете как будет выглядеть форма визуально – итогового результата для наглядности не хватает!
Хорошее замечание, учтем на будущее! Спасибо.
День добрый, я бы хотел сказать Вам спасибо за Ваш труд.http://webformyself.com/wp-comments-post.php почему то не могу увидеть
И у меня к вам просьба, мне очень нравиться Ваша обратная связь. Можете ли вы прислать мне
код php файла, а то я его по этому адресу
Заранее признателен.
Спасибо, хорошая статья.
а можно ли рассмотреть пример скрипта проверки валидности введенного пользователем е-мэйла?
Большое спасибо, очень хорошая статья.
Михаил, большое спасибо за статью. Кратко и очень доступно для среднего пользователя.
Очень хорошо и просто всё описано, сделал форму по вашему примеру.
Не показали только, как прекрепить файл к письму. В форму вывел такую функцию, а вот как её в обработчик прописать не знаю. Буду очень признателен, если разъясните этот момент.
Получилось так, что в теле письма указывается имя прикреплённого файла, а самого файла в письме нет.
Спасибо большое за урок!
У меня сама форма появляется, но при нажатии кнопки «Отправить» появляется текст php файла. Возможно вы знаете почему это происходит?
Возможны 2 причины:
1. Сервер не поддерживает PHP.
2. Страница сохранена с расширением html, а не php.
Спасибо за урок!
круто. спасибо
а как сделать чтоб страницу не обновляло после отправки письма?
Посмотрите цикл уроковСоздание привлекательной формы . Думаю, там найдется ответ на этот вопрос.
оперативно. благодарю.
пошел изучать. спасибо
Пожалуйста)
Помогите советом в чем проблема. Вставил код формы в код страницы сайта. Дописал стили. В скрипт вписал свой e-mail. Сервер поддерживает php скрипты. При отправке из формы появляется страница с адресом: мой сайт/send.php и текстом на странице «error»
Проблема, скорее всего, в ошибке в коде. Возможно, в настройках сервера. Создайте тему на нашемфоруме , выложите ваш код и тогда можно будет подсказать что-то конкретное.
А как может быть ошибка в коде, если я использовал предложенные здесь коды формы, стиля и скрипта, которые скачал по ссылке, указанной вверху этой страницы?
) В этих скачанных кодах может быть ошибка?
Код абсолютно рабочий, я только что скачал исходники и проверил.
Помогите, пожалуйста, понять как правильно прикрепить код стиля контактной формы, потому что контактная форма использует код стиля страницы сайта. При вставке кода стиля контактной формы в код стиля страницы сайта меняются некоторые параметры страницы. Скрипт send.php «заработал» после добавления дополнительных параметров в скрипт службой поддержки хостинга.
Здравствуйте, я ваш подписчик, создаю сайт на локальном сервере… Не пойму, запустил денвер , нажимаю «Отправить» форму и мне выдает вот это: «<?php $name = $_POST['name']; Назад «;
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent="От: $name \n $email \n Сообщение: $message";
$recipient = "teplotsentr.bor@mail.ru";
$subject = "Форма обратной связи";
$mailheader = "Отправитель: $email \r\n";
$info = mail($recipient, $subject, $formcontent, $mailheader, "Content-type:text/plain; Content-type:text/plain; charset = UTF-8\r\n") or die("Error!");
echo "Спасибо!" . " -" . "
?> »
Что делать? Т.е. просто после нажатия на кнопку отправления, выдается просто текст файла «formdata.php».
Здравствуйте.форуме . К вопросу приложите, пожалуйста, скриншот окна браузера, на котором будет видно проблему и видно адресную строку браузера. Думаю, это должно помочь решить проблему и подсказать что-то конкретное.
Задайте вопрос на нашем