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

контактная форма

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

Скачать исходный код себе на компьютер!

Перед тем, как мы приступим к создания контактной формы для сайта, я Вам рекомендую просмотреть демо-результат работы.

Первым делом мы должны определить место, где будет наша форма. Помещать всё её содержимое мы будем между тегами:

<form>
</form>

Атрибут action указывает, в какой файл пойдут данные при нажатии кнопки «Отправить». Значит, второе, что мы создадим mail.php.

Метод передачи выбираем POST — то есть данные передадутся внутри тела запроса, а не через адресную строку.

Итак, получаем:

<form action="mail.php" method="POST">

Последняя задача, которую нам необходимо понять, это как браузер поймёт, какие данные куда определять? Чтобы имя пошло к имени, фамилия — к фамилии? Для этого каждому input’у нужно задать атрибут name

Начнём

Начнём с максимально простого примера формы, а дальше, по ходу, уже разберёмся уже более детально.

<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 в переменные:

К примеру, у нас есть:

<input type="text" name="email"/>

Дальше функцией $_POST захватываем значение атрибута nameemail и преобразуем в переменную $email:

$email = $_POST['email'];

И для всех сразу:

<?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:

<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 />  

И весь код:

<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, с учётом нашего выпадающего бокса:

<?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-код флажков.

<p>Способ связи</p>
Email<input type="checkbox" value="mail" name="connect[]"/><br />
Телефон<input type="checkbox" value="Телефон" name="connect[]"/><br />

Обратите внимание на квадратные скобки в параметре name — они обеспечивают возможность выбора нескольких значений. Иногда используются просто разные имена.

Что касается кнопок — переключателей (radio), то мы можем добавить такой пример:

<p>Необходим ли телефонный звонок?:</p>
  <input type="radio" name="call" value="Да">Да<br/>
  <input type="radio" name="call" value="Нет">Нет<br/>

Здесь имя одинаковое, но разные значение value.

И опять, полный HTML:

	<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>

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

$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, которая отвечает за вывод текста:

echo "Спасибо!" . " -" . "<a href='index.html' style='text-decoration:none;color:#ff0099;'> Вернуться на главную</a>";

Но это мой вариант, фраза и стили могут быть любыми.

И финальный PHP:

<?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. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Проверка формы без перезагрузки с помощью JavaScript

Прямо сейчас посмотрите курс по организации динамической работы с формами!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (42)

  1. Nikolai

    Благодарю. Этот урок мне очень помог.

    • Сергей

      Ну молодцы ребята, просто и доступно во всех ваших размеченных блоках. Я просто прочитал, и сразу кое-что уловил. Не скрою, раньше я 2 года преподавал информатику, но в школе такие темы не изучаются. А так хочется постичь совершенства самостоятельного изучения с помощью таких хороших и легких раскладок.
      Здоровья Вам всем и удачи в работе с пользователями.
      Пусть ваши труды будут зачтены хорошими заработками!

  2. Александр

    Спасибо! Как раз во время! Только хотел начинать писать форму обратной связи, а тут РАЗ! и урок пришел на нужную тему! Спасибо огромное!

  3. labintech

    Парень, вообщем, живет и работает в Москве.

  4. naikom

    всегда приятно читать хорошие отзывы)

  5. Ольга

    Материал очень ценный,но я пока не готова его принимать,т.к. многое для меня еще не понятно.Я в интернете недавно,нельзя ли отмотать пленку чуть-чуть назад.Заранее благодарна.

  6. Александр

    Большое спасибо! Помогли разобраться с формами.

  7. Павел

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

  8. Vladimir

    Вы молодцы! Ваш урок вышел во время!

  9. Николай

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

  10. Никита

    Спасибо большое, очень полезно, как раз нужно было делать форму для странички отписки от рассылки в смартреспондере=)

  11. Валерий

    Чувствую, что интересно, но, увы, непонятно, а потому и не получилось. На html я и раньше делал формы, а вот с php совсем сё запуталось.
    А нет ли у вас «за пазухой» пошаговой инструкции, чтобы на блоге отображалось количество просмотревших тот или иной пост? Было бы очень кстати.
    Заранее благодарен.

  12. Юрий

    Благодарю Вас за интересный и информационный материал.Лично мне еще учиться и учиться .

  13. Юрий

    ВАШ НАМЕК ПОНЯЛ ! Будьте бдительны.

  14. Николай

    Спасибо большое, очень полезно!

  15. Петр

    Спасибо ребята, толково и лаконично.

  16. Вова

    Спасибо. Хотелось бы чтобы в таком же духе кто-нибудь поразжёвывал PHP с самых азов и до профи.

  17. TRSteep

    т.е. php отправляет письмо встроенными средствами?
    А что нибудь нужно настраивать на денвере например для этого или он поддерживает эти функции?
    т.е. можно ли тестить подобные функции в офлайне?

  18. Шамиль

    Спасибо Вам ребята, за такой нужный и отличнейший материал. Форма на сайте это очень удобно.

  19. naikom

    TRSteep: можно, почему нет?

  20. Ильдар

    Хорошим делом занимаетесь, что помогаете начинающим, причём бесплатно!

  21. Дарья

    Материал для меня не был новым, но, думаю, новичкам данная информация будет полезна. Одно замечание – вы показываете пример конкретного кода, но не показываете как будет выглядеть форма визуально – итогового результата для наглядности не хватает!

  22. Ракипов Сергей

    День добрый, я бы хотел сказать Вам спасибо за Ваш труд.
    И у меня к вам просьба, мне очень нравиться Ваша обратная связь. Можете ли вы прислать мне
    код php файла, а то я его по этому адресу http://webformyself.com/wp-comments-post.php почему то не могу увидеть
    Заранее признателен.

  23. Алексей

    Спасибо, хорошая статья.
    а можно ли рассмотреть пример скрипта проверки валидности введенного пользователем е-мэйла?

  24. Дима

    Большое спасибо, очень хорошая статья.

  25. Евгений

    Михаил, большое спасибо за статью. Кратко и очень доступно для среднего пользователя.

  26. Михаил

    Очень хорошо и просто всё описано, сделал форму по вашему примеру.

    Не показали только, как прекрепить файл к письму. В форму вывел такую функцию, а вот как её в обработчик прописать не знаю. Буду очень признателен, если разъясните этот момент.

    Получилось так, что в теле письма указывается имя прикреплённого файла, а самого файла в письме нет.

  27. Дмитрий

    Спасибо большое за урок!
    У меня сама форма появляется, но при нажатии кнопки «Отправить» появляется текст php файла. Возможно вы знаете почему это происходит?

    • Андрей Кудлай

      Возможны 2 причины:
      1. Сервер не поддерживает PHP.
      2. Страница сохранена с расширением html, а не php.

  28. Igor

    Спасибо за урок!

  29. Михаил

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

  30. Михаил

    оперативно. благодарю.
    пошел изучать. спасибо

  31. Олег

    Помогите советом в чем проблема. Вставил код формы в код страницы сайта. Дописал стили. В скрипт вписал свой e-mail. Сервер поддерживает php скрипты. При отправке из формы появляется страница с адресом: мой сайт/send.php и текстом на странице «error»

    • Андрей Кудлай

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

  32. Олег

    А как может быть ошибка в коде, если я использовал предложенные здесь коды формы, стиля и скрипта, которые скачал по ссылке, указанной вверху этой страницы? :) ) В этих скачанных кодах может быть ошибка?

    • Андрей Кудлай

      Код абсолютно рабочий, я только что скачал исходники и проверил.

  33. Олег

    Помогите, пожалуйста, понять как правильно прикрепить код стиля контактной формы, потому что контактная форма использует код стиля страницы сайта. При вставке кода стиля контактной формы в код стиля страницы сайта меняются некоторые параметры страницы. Скрипт send.php «заработал» после добавления дополнительных параметров в скрипт службой поддержки хостинга.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree