От автора: Мы часто сталкиваемся с контактными формами, будь то обычный сайт или, скажем, WordPress. Формы могут быть совершенно разными, всё зависит от Вас и от пожеланий клиента). В этом посте я наглядно покажу всю «анатомию» создания контактной формы для сайта средствами HTML и PHP.
Скачать исходный код себе на компьютер!
Перед тем, как мы приступим к создания контактной формы для сайта, я Вам рекомендую просмотреть демо-результат работы.
Первым делом мы должны определить место, где будет наша форма. Помещать всё её содержимое мы будем между тегами:
|
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-код флажков.
|
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. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
Комментарии (44)