Добавление полей в контактную форму в HTML

Этот урок покажет, как добавить поля в контактную форму в 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/Назад.