Блок «Название формы». Преимущества создания собственной контактной формы

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

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

HTML

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

Your name

Your e-mail

Message

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

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

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

method=»post» — определяет как отправить данные из контактной формы в файл, заданный атрибутом action . Теги и должны иметь атрибут "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 должна содержать электронную почту владельца сайта, это именно тот адрес, куда будут отправляться сообщения. Вы можете указать сразу несколько адресов электронной почты, разделяя их запятой (например, [email protected], [email protected])

$mail_to = "[email protected]";

Тема письма, которое Вы получите:

$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) { ?> // 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"; // Print a message alert("Message failed. Please, send an email to [email protected]"); // Redirect to some page of the site. You can also specify full URL, e.g. http://template-help.com window.location = "contact_page.html";

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

Из этой статьи вы узнаете, как создать форму обратной связи, которая отправляет данные с помощью AJAX. Мы будем использовать jQuery и простой почтовый PHP-скрипт для отправки данных формы на email.

Создание HTML-формы

Наша первая задача — настроить HTML-форму. Задайте для элемента идентификатор ajax-contact , для атрибута method установите значение post , а для атрибута action — значение mailer.php .

Name: Email: Message: Send

Мы создали форму с полями для ввода имени пользователя, адреса электронной почты и сообщения. Обратите внимание, что каждое поле формы содержит атрибут required . В браузерах, поддерживающих валидацию форм HTML5, его использование не разрешает отправку данных, если поля не заполнены.
Затем нужно создать , который будет использоваться для отображения сообщений об ошибках или об успешной отправке данных.Разместите этот элемент выше тега и присвойте идентификатор form-messages .

Теперь нужно загрузить примеры кода и скопировать файл style.css в каталог проекта. Также необходимо добавить элемент , который указывает браузеру загрузить файл CSS.

Нужно создать два элемента , которые ссылаются на библиотеку jQuery и файл app.js. Добавьте их перед закрывающим тегом .

Важно сначала загрузить файл jquery-2.1.0.min.js , так как для скрипта app.js требуется jQuery.
Это весь HTML-код, который понадобится. Теперь рассмотрим JavaScript.

Передача данных формы с помощью AJAX

Создайте в каталоге проекта новый файл с именем app.js . Он будет включать в себя код, необходимый для отправки данных формы с помощью AJAX.
Скопируйте следующий код в файл app.js .

Мы создали две переменные form и formMessages , которые ссылаются на соответствующие элементы HTML.
Затем нужно создать прослушиватель, который перехватывает событие submit в форме.Это можно сделать, используя метод jQuery submit .

// Устанавливаем прослушиватель для контактной формы. $(form).submit(function(event) { // Блокируем отправку данных формы в браузере. event.preventDefault(); // TODO });

Передаем методу submit функцию, которая будет выполнена, когда пользователь отправит данные формы. Мы также указали браузеру не отправлять форму, как обычно, вызвав для события метод preventDefault.
Теперь нужно сериализовать данные формы. Они будут преобразованы в строку ключ / значение для отправки ​​с помощью AJAX- запроса. Используйте jQuery- метод serialize для сериализации данных формы, а затем сохраните результат в переменной formData .

// Сериализуем данные формы. var formData = $(form).serialize();

Теперь напишем код, который отвечает за отправку данных формы на сервер и обработку ответа. Скопируйте следующий код в файл app.js .

// Отправка данных формы с помощью AJAX. $.ajax({ type: "POST", url: $(form).attr("action"), data: formData })

Для создания нового AJAX-запроса используется jQuery-метод ajax . Мы передали объект методу ajax , который включает в себя ряд свойств, используемых для настройки запроса. Свойство type указывает метод HTTP, который будет использоваться для отправки запроса. В нашем случае – это метод POST .
Свойство url — это местоположение скрипта, который будет обрабатывать данные формы. Мы задаем значение для этого свойства, извлекая атрибут action из формы. Значение свойства data задается с помощью переменной formData , которую мы создали ранее.
Затем нужно обработать успешный ответ, полученный с сервера. Скопируйте следующий код непосредственно после закрывающей скобки вызова ajax . Обратите внимание, что я умышленно оставил точки с запятой.

Done(function(response) { // Удостовериваемся в том, что div formMessages содержит класс "success". $(formMessages).removeClass("error"); $(formMessages).addClass("success"); // Задаем текст сообщения. $(formMessages).text(response); // Очищаем форму. $("#name").val(""); $("#email").val(""); $("#message").val(""); })

Метод done будет вызываться, если запрос завершится успешно. Сначала проверяем, что элемент formMessage s содержит класс success . Затем устанавливаем текстовое содержимое элемента, используя данные, возвращаемые почтовым скриптом. После чего очищаем значения каждого поля формы.
В последнем фрагменте JavaScript- кода нам нужно написать, что должно произойти, если произошла ошибка. Скопируйте следующий код в файл app.js .

Fail(function(data) { // Удостовериваемся, что div formMessages содержит класс "error". $(formMessages).removeClass("success"); $(formMessages).addClass("error"); // Устанавливаем текст сообщения. if (data.responseText !== "") { $(formMessages).text(data.responseText); } else { $(formMessages).text("Oops! An error occured and your message could not besent."); } });

Метод fail вызывается, если почтовый скрипт возвращает ошибку. Сначала проверим, что элемент formMessages содержит класс error . Затем проверяем, возвращает ли AJAX- запрос responseText . Если это так, используем текст для установки содержимого элемента formMessages. В противном случае используется стандартное сообщение об ошибке.
Это весь код HTML и JavaScript, необходимый для создания контактной формы на AJAX. В следующем разделе мы создадим скрипт, который отвечает за обработку данных формы и отправку электронной почты.

Создание почтового PHP-скрипта

Этот простой скрипт отвечает за проверку правильности данных формы и отправку электронной почты. Если возникнет ошибка, почтовый скрипт ответит соответствующим кодом состояния, чтобы выполнить JavaScript.
Создайте новый файл с именем mailer.php и скопируйте в него следующий код.