- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
Добавление полей в контактную форму в HTML
Апрель 20, 2011
Этот урок покажет, как добавить поля в контактную форму в HTML . Данный урок – это продолжение туториала Как создать контактную форму в HTML. Если у Вас остались файлы из предыдущего урока, то откройте их, чтобы продолжить работу или же скачайте
Часть 1. HTML
В любом HTML редакторе откройте файл index.html. В нем есть 2 кнопки, созданные элементом input, 1 текстовый элемент и две кнопки, созданные с помощью buttons. Давайте добавим больше разных функций таких как, например, флажки (checkboxes), переключатели (radio buttons) и выпадающий (drop-down) список. Прямо после кнопок Submit (подписать) и Reset (Сброс) добавьте следующий код.
Дополнительные опции:
<input type="checkbox" name="check[]" value="USA">USA<br /> <input type="checkbox" name="check[]" value="Canada">Canada<br /> <input type="checkbox" name="check[]" value="Mexico">Mexico<br />
Вы согласны?
<input type="radio" value="yes" name="cf_radio_button">Yes <input type="radio" value="no" name="cf_radio_button">No
Выберите элемент из выпадающего списка:
<select size="1" name="cf_drop_down"> <option>php</option> <option>html</option> <option>css</option> <option>asp</option> <option>ajax</option> <option>javascript</option> </select>
Давайте разберем несколько интересных моментов в этом коде. Вы, наверное, обратили внимание, что имена, присвоенные к флажкам, не отличаются, как в случае с добавленным ранее текстовым редактором, и в конце у них стоят квадратные скобки. Скобки определяют, что это переменная массива. Вот как это работает. Для каждого чекбокса, массив check[] получает значение нажатого флажка. Например, после того как Вы выбрали два флажка USA и Canada, массив check[] будет иметь значения checked_usa и check_canada.
Ничего фантастического не происходит с переключателями (radio buttons) и выпадающим (drop-down) списком. К двум переключателям мы привязываем имя «cf_radio_button«, так как нельзя выбрать оба переключателя одновлеменно, то нет необходимости каждому давать уникальное имя.
Синтакс выпадающего списка также очень простой. Откройте тэг <select>, перечислите опции, завернутые в тэги <option>…</option> и в конце закройте тегом </select>. У тэга <select> два атрибута – имя (name) и размер (size). Атрибут size определяет количество видимых опций в выпадающем списке.</select>
Вот такой будет результат после добавления кода.
Часть 2. PHP
Итак, у нас есть элементы на странице. Теперь мы должны обработать переданные данные и добавить в отправленное письмо. Вот конечный код файла contact.php
<?php // Grabbing data sent from the form and assigning it to variables $field_name = $_POST['cf_name']; $field_email = $_POST['cf_email']; $field_message = $_POST['cf_message']; foreach($_POST['check'] as $value) { $check_boxes .= $value." "; } $radio_button = $_POST['cf_radio_button']; $drop_down_item = $_POST['cf_drop_down']; // Composing body of the message $mail_to = 'gordon@template-help.com'; $subject = 'Message from a site visitor '.$field_name; $body_message = 'From: '.$field_name."\n"; $body_message .= 'E-mail: '.$field_email."\n"; $body_message .= 'Message: '.$field_message."\n"; $body_message .= "Additional options checked: ".$check_boxes."\n"; $body_message .= "Did the customer agree: ".$radio_button."\n"; $body_message .= "Selected item from the dropdown list: ".$drop_down_item; // Creating headers of the message $headers = 'From: '.$field_email."\r\n"; $headers .= 'Reply-To: '.$field_email."\r\n"; $mail_status = mail($mail_to, $subject, $body_message, $headers); if ($mail_status) { ?> <script language="javascript" type="text/javascript"> alert('Thank you for the message. We will contact you shortly.'); history.back(1); </script> <?php } else { ?> <script language="javascript" type="text/javascript"> alert('Message failed. Please, send an email to gordon@template-help.com'); history.back(1); </script> <?php } ?>
Давайте посмотрим, что мы добавили в код и для чего.
Мы будем использовать функцию php foreach() для организации перебора всех элементов массива «check» и для сохранения каждого элемента массива в значение $value. Потом создадим значение $check_boxes и расширим его значением каждого элемента в массиве
foreach($_POST['check'] as $value) { $check_boxes .= $value." "; }
Как вы видите, радио-кнопки и выпадающий список определяются также как и текстовое поле ввода. Мы создаем PHP переменную и присваиваем ей данные, отправляемые из переключателей (radio box )или выпадающего списка.
$radio_button = $_POST['cf_radio_button']; $drop_down_item = $_POST['cf_drop_down'];
Эта часть кода аналогична той, что мы создавали раньше. Мы только добавили новые данные в э-мейл
$body_message .= "Additional options checked: ".$check_boxes."\n"; $body_message .= "Did the customer agree: ".$radio_button."\n"; $body_message .= "Selected item from the dropdown list: ".$drop_down_item;
СОВЕТ:Одно маленькое обновление, которое может быть полезно. В предыдущей версии скрипта, после предупреждения JavaScript, стоит перенаправление на страницу, которую Вы указали в коде window.location = ‘contact_page.html’;. Поэтому, если Вы переименовываете contact_page.html на что-то другое, Вам нужно будет изменить имя файла в contact.php. Лучше было бы заменить этот код на этот
history.back(1);
Обычно код сам объясняет, что он делает. Это тоже самое, что и нажатие в браузере кнопки Back/Назад.