Из этой статьи вы узнаете, как создается форма обратной связи, использующая AJAX. Мы будем использовать jQuery и простой почтовый PHP-скрипт для отправки данных формы на email.
Создание HTML-формы
Наша первая задача — настроить HTML-форму. Задайте для элемента идентификатор ajax-contact , для атрибута method установите значение post , а для атрибута action — значение mailer.php .
Мы создали форму с полями для ввода имени пользователя, адреса электронной почты и сообщения. Обратите внимание, что каждое поле формы содержит атрибут 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 будет вызываться, если запрос завершится успешно. Сначала проверяем, что элемент formMessage s содержит класс success . Затем устанавливаем текстовое содержимое элемента, используя данные, возвращаемые почтовым скриптом. После чего очищаем значения каждого поля формы. В последнем фрагменте JavaScript- кода нам нужно написать, что должно произойти, если произошла ошибка. Скопируйте следующий код в файл app.js .
Метод fail вызывается, если почтовый скрипт возвращает ошибку. Сначала проверим, что элемент formMessages содержит класс error . Затем проверяем, возвращает ли AJAX- запрос responseText . Если это так, используем текст для установки содержимого элемента formMessages. В противном случае используется стандартное сообщение об ошибке. Это весь код HTML и JavaScript, необходимый для создания контактной формы на AJAX. В следующем разделе мы создадим скрипт, который отвечает за обработку данных формы и отправку электронной почты.
Создание почтового PHP-скрипта
Этот простой скрипт отвечает за проверку правильности данных формы и отправку электронной почты. Если возникнет ошибка, почтовый скрипт ответит соответствующим кодом состояния, чтобы выполнить JavaScript. Создайте новый файл с именем mailer.php и скопируйте в него следующий код.
// Устанавливаем email адрес получателя. // FIXME: Изменяем егона нужный email-адрес. $recipient = "hello@example.com"; // Задаем тему письма. $subject = "New contactfrom $name"; // Создаем содержимое письма. $email_content = "Name: $namen"; $email_content .= "Email: $emailnn"; $email_content .= "Message:n$messagen"; // Создаем заголовок письма. $email_headers = "From: $name "; // Отправляем письмо. if (mail($recipient, $subject, $email_content, $email_headers)) < // Устанавливаем код ответа 200 (okay). http_response_code(200); echo "Thank You! Your message hasbeensent."; >else < // Устанавливаем код ответа 500 (internal server error). http_response_code(500); echo "Oops! Somethingwentwrong and wecouldn'tsend your message."; >> else < // Не POST запрос, устанавливаемкод ответа 403 (forbidden). http_response_code(403); echo "Therewas a problem with your submission, pleasetryagain."; >?>
Этот скрипт начинается с проверки того, что запрос был отправлен с использованием метода POST . Если это не так, скрипт вернет код состояния HTTP 403 (forbidden) и сообщение об ошибке. После того, как мы убедились, что был использован правильный HTTP-метод, извлекаемданные формы в переменные $name , $email и $message . А также используем метод PHP trim , чтобы вырезать пробелы. Затем проверяем, чтобы ни одна из этих переменных не былапустой. Если одна или несколько переменных являются пустыми, устанавливаем код ответа 400 (bad request) и возвращаем в браузер сообщение об ошибке.
Готовим письмо к отправке. Сначала создаем переменную с именем получателя email . Затем создаем переменные для темы, содержимого и заголовка электронного письма. Примечание . Настройка заголовка электронного письма является необязательной. Но благодаря ей письмо будет выглядеть так, будто его отправил человек, заполнивший форму. Пытаемся отправить письмо с помощью PHP-функции. Если все прошло успешно, возвращаем сообщение об успешном завершении. Если это не так, задаем код ответа 500 (internal server error) и возвращаем сообщение об ошибке. Примечание . Стандартная функция mail подходит для этих целей, но есть более надежные способы отправки электронной почты с помощью PHP. Вот и все! Мы закончили. Откройте созданный HTML-файл в браузере и протестируйте форму. Чтобы все работало корректно, нужно использовать веб-сервер с поддержкой PHP и функции mail.
Из этой статьи вы узнали, как создать контактную форму, в которой для связи с почтовым скриптом на сервере используется AJAX. Мы использовали jQuery, чтобы упростить код JavaScript.
Вадим Дворников автор-переводчик статьи « How to Create an AJAX Contact Form »
Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, отклики, подписки, дизлайки!
We have our Contact Service email service and Contact Form email template from the previous steps. Let’s create a simple HTML form and send its content by email.
DOCTYPEhtml>html>head>title>Contact Formtitle>scripttype="text/javascript"src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">script>scripttype="text/javascript">(function()// https://dashboard.emailjs.com/admin/account emailjs.init('YOUR_PUBLIC_KEY');>)();script>scripttype="text/javascript">window.onload=function() document.getElementById('contact-form').addEventListener('submit',function(event) event.preventDefault();// generate a five digit number for the contact_number variablethis.contact_number.value = Math.random()*100000|0;// these IDs from the previous steps emailjs.sendForm('contact_service','contact_form',this).then(function() console.log('SUCCESS!');>,function(error) console.log('FAILED. ', error);>);>);>script>head>body>formid="contact-form">inputtype="hidden"name="contact_number">label>Namelabel>inputtype="text"name="user_name">label>Emaillabel>inputtype="email"name="user_email">label>Messagelabel>textareaname="message">textarea>inputtype="submit"value="Send">form>body>html>
You can obtain your public key from the Account
(opens new window) page in the EmailJS dashboard. After filling the fields and sending the request we should find the new email in our personal inbox. If you can’t find it take a look at the spam folder.