Как создать контактную форму в HTML

Этот урок покажет как создать самую простую контактную форму для HTML-шаблона.

Прежде всего создайте 2 файла: contact_form.html и contact.php. Первый файл будет содержать код Вашей контакт-формы, а второй будет обрабатывать данные этой формы.

HTML

Ниже приведен пример HTML-кода контактной формы:

<form action="contact.php" method="post">
	Your name

    <input type="text" name="cf_name">

	Your e-mail

    <input type="text" name="cf_email">

	Message

    <textarea name="cf_message">

	<input type="submit" value="Send">
	<input type="reset" value="Clear">
</form>

В браузере она будет выглядеть следующим образом:

Давайте кратко рассмотрим основные аспекты данной формы. Тег <form> должен иметь 2 дополнительных атрибута:

action=»contact.php» — определяет куда отправлять данные из контактной формы после отправки письма.

method=»post» — определяет как отправить данные из контактной формы в файл, заданный атрибутом action. Теги <input> и <textarea> должны иметь атрибут "name" с уникальным идентификатором. Этот атрибут используется для идентификации данных контактной формы после отправки письма. Следует также отметить 2 дополнительных элемента, которые используются в качестве кнопок Отправить и Очистить, первый елемент должен быть определен тегом type="submit", а второй — тегом type="reset".

Процедура создания контактной формы является довольно простой.

PHP

Перейдем к созданию файла contact.php, который будет собирать данные с контактной формы, компоновать их в сообщение и отправлять по электронной почте. Скачать готовый contact.php файл по этой ссылке. Ниже указан код файла с комментариями к его основным разделам:

Присвоение данных из каждого поля контактной формы (cf_name, cf_email, cf_message) следующим PHP-переменным ($ cf_message, $ field_email, $ field_message)

$field_name = $_POST['cf_name'];
$field_email = $_POST['cf_email'];
$field_message = $_POST['cf_message'];

Функция $mail_to должна содержать электронную почту владельца сайта, это именно тот адрес, куда будут отправляться сообщения. Вы можете указать сразу несколько адресов электронной почты, разделяя их запятой (например, mail-one@template-help.com, mail-two@template-help.com)

$mail_to = 'test@test-mail.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;

Построение заголовков сообщения:

$headers = "From: $cf_email\r\n";
$headers .= "Reply-To: $cf_email\r\n";

Определяем функцию mail() и присваиваем её переменной $mail_status, которая используются для проверки успешности отправки письма.

$mail_status = mail($mail_to, $subject, $body_message, $headers);

Если функция mail() выполнена успешно, тогда используйте код ниже:

if ($mail_status) { ?>
	<script language="javascript" type="text/javascript">
		// Print a message
		alert('Thank you for the message. We will contact you shortly.');
		// Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.com
		window.location = 'contact_page.html';
	</script>
<?php
}

Если функция mail() не была выполнена, следует использовать следующий код:

else { ?>
	<script language="javascript" type="text/javascript">
		// Print a message
		alert('Message failed. Please, send an email to gordon@template-help.com');
		// Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.com
		window.location = 'contact_page.html';
	</script>
<?php
}?>

Вы можете загрузить готовые файлы contact_form.html и contact.php одним файлом

 

Рекомендуем ознакомиться с уроком как создать новое поле для контактной формы