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

Дата публикации: 2010-11-24

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<form>
</form>

1 2	<form> </form>

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

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

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

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

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

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

<p>Сообщение</p><textarea name="message" rows="6" cols="25"></textarea><br />

</form>

Рассмотрим этот код и попробуем его модифицировать.

Для того, чтобы наша форма работала, необходимо добавить php-функции. Используем функцию $_POST для перевода значений из полей input в переменные:

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

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

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

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

$email = $_POST['email'];

1	$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 "Спасибо!";
?>

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

<p>Выпадающий список</p>

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

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

<p>Выпадающий список</p>

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

</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 "Спасибо!";
?>

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

Узнать подробнее

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

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

<p>Необходим ли телефонный звонок?:</p>

Здесь имя одинаковое, но разные значение 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>

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

<option value="Низкая">Низкая</option>

<option value="Нормальная">Нормальная</option>

<option value="Высокая">Высокая</option>

<option value="Максимальная">Максимальная</option>

</select>

<br />

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

</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("Ошибка");

$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>";

1	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>";
?>

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

Узнать подробнее