Отправка форм при помощи JavaScript
HTML формы могут декларативно отправлять HTTP (en-US) -запросы. Но формы также могут подготовить HTTP-запросы для отправки с помощью JavaScript, например при помощи XMLHttpRequest . В этой статье исследуются подобные подходы.
Формы не всегда формы
В современных веб-приложениях, одностраничных приложениях и приложениях на основе фреймворков, обычно HTML-формы (en-US) используются для отправки данных без загрузки нового документа при получении данных ответа. В начале поговорим о том почему это требует другого подхода.
Получение контроля над глобальным интерфейсом
Отправка стандартной HTML формы, как описывалось в предыдущей статье, загружает URL-адрес, по которому были отправлены данные, это означает, что окно браузера перемещается с полной загрузкой страницы. Если избегать полную перезагрузку страницы, можно обеспечить более плавную работу, за счёт предотвращения задержек в сети и возможных визуальных проблем (например, мерцания).
Многие современные пользовательские интерфейсы используют HTML формы только для сбора пользовательского ввода, а не для для отправки данных. Когда пользователь пытается отправить свои данные, приложение берёт контроль и асинхронно передаёт данные в фоновом режиме, обновляя только ту часть всего интерфейса пользователя, которой требуется обновление.
Асинхронная отправка произвольных данных обычно называется AJAX, что означает «Asynchronous JavaScript And XML» (Асинхронный JavaScript и XML).
Чем он отличается?
Объект XMLHttpRequest (XHR) DOM может создавать HTTP-запросы, отправлять их, и получать их результат. Исторически, XMLHttpRequest был разработан для получения и отправки XML (en-US) в качестве формата обмена, который со временем был заменён на JSON (en-US) . Но ни XML, ни JSON не вписываются в кодировку запроса данных формы. Данные формы ( application/x-www-form-urlencoded ) состоят из списка пар ключ/значение в кодировке URL. Для передачи бинарных данных, HTTP-запрос преобразуется в multipart/form-data .
Примечание: Сейчас Fetch API часто используется вместо XHR — это современная, обновлённая версия XHR, которая работает в похожем стиле, но имеет несколько преимуществ. Большая часть XHR-кода, которую вы увидите в этой статье можно заменить на Fetch.
Если вы управляете фронтендом (кодом, который выполняется в браузере) и бэкендом (кодом, который выполняется на стороне сервера), вы можете отправлять JSON/XML и обрабатывать их как хотите.
Но если вы хотите использовать сторонний сервис, то вам необходимо отправлять данные в формате, который требуется сервису.
Так как нам следует отправлять подобные данные? Ниже описаны различные необходимые вам техники.
Отправка данных формы
Есть три способа отправки данных формы:
- Создание XMLHttpRequest вручную.
- Использование самостоятельного FormData объекта.
- Использование FormData связанного с элементом.
Давайте рассмотрим их подробнее:
Создание XMLHttpRequest вручную
XMLHttpRequest это самый безопасный и надёжный способ создавать HTTP-запросы. Для отправки данных формы с помощью XMLHttpRequest , подготовьте данные с помощью URL-кодирования, и соблюдайте специфику запросов данных формы.
Посмотрите на пример:
button>Click Me!button>
И на JavaScript:
const btn = document.querySelector("button"); function sendData(data) console.log("Sending data"); const XHR = new XMLHttpRequest(); let urlEncodedData = "", urlEncodedDataPairs = [], name; // Turn the data object into an array of URL-encoded key/value pairs. for (name in data) urlEncodedDataPairs.push( encodeURIComponent(name) + " token operator">+ encodeURIComponent(data[name]), ); > // Combine the pairs into a single string and replace all %-encoded spaces to // the '+' character; matches the behaviour of browser form submissions. urlEncodedData = urlEncodedDataPairs.join("&").replace(/%20/g, "+"); // Define what happens on successful data submission XHR.addEventListener("load", function (event) alert("Yeah! Data sent and response loaded."); >); // Define what happens in case of error XHR.addEventListener("error", function (event) alert("Oops! Something went wrong."); >); // Set up our request XHR.open("POST", "https://example.com/cors.php"); // Add the required HTTP header for form data POST requests XHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // Finally, send our data. XHR.send(urlEncodedData); > btn.addEventListener("click", function () sendData( test: "ok" >); >);
Примечание: This use of XMLHttpRequest is subject to the same-origin policy (en-US) if you want to send data to a third party web site. For cross-origin requests, you’ll need CORS and HTTP access control (en-US) .
Using XMLHttpRequest and the FormData object
Building an HTTP request by hand can be overwhelming. Fortunately, the XMLHttpRequest specification provides a newer, simpler way to handle form data requests with the FormData (en-US) object.
The FormData (en-US) object can be used to build form data for transmission, or to get the data within a form element to manage how it’s sent. Note that FormData (en-US) objects are «write only», which means you can change them, but not retrieve their contents.
Using this object is detailed in Using FormData Objects (en-US) , but here are two examples:
Using a standalone FormData object
button>Click Me!button>
You should be familiar with that HTML sample. Now for the JavaScript:
const btn = document.querySelector("button"); function sendData(data) const XHR = new XMLHttpRequest(), FD = new FormData(); // Push our data into our FormData object for (name in data) FD.append(name, data[name]); > // Define what happens on successful data submission XHR.addEventListener("load", function (event) alert("Yeah! Data sent and response loaded."); >); // Define what happens in case of error XHR.addEventListener(" error", function (event) alert("Oops! Something went wrong."); >); // Set up our request XHR.open("POST", "https://example.com/cors.php"); // Send our FormData object; HTTP headers are set automatically XHR.send(FD); > btn.addEventListener("click", function () sendData( test: "ok" >); >);
Here’s the live result:
Using FormData bound to a form element
The HTML is typical:
form id="myForm"> label for="myName">Send me your name:label> input id="myName" name="name" value="John" /> input type="submit" value="Send Me!" /> form>
But JavaScript takes over the form:
.addEventListener("load", function () function sendData() const XHR = new XMLHttpRequest(); // Bind the FormData object and the form element const FD = new FormData(form); // Define what happens on successful data submission XHR.addEventListener("load", function (event) alert(event.target.responseText); >); // Define what happens in case of error XHR.addEventListener("error", function (event) alert("Oops! Something went wrong."); >); // Set up our request XHR.open("POST", "https://example.com/cors.php"); // The data sent is what the user provided in the form XHR.send(FD); > // Access the form element. const form = document.getElementById("myForm"); // . and take over its submit event. form.addEventListener("submit", function (event) event.preventDefault(); sendData(); >); >);
Here’s the live result:
You can even get more involved with the process by using the form’s elements property to get a list of all of the data elements in the form and manually manage them one at a time. To learn more about that, see the example in Accessing form controls.
Dealing with binary data
If you use a FormData (en-US) object with a form that includes widgets, the data will be processed automatically. But to send binary data by hand, there’s extra work to do.
There are many sources for binary data, including FileReader , Canvas , and WebRTC (en-US) . Unfortunately, some legacy browsers can’t access binary data or require complicated workarounds. To learn more about the FileReader API, see Using files from web applications.
The least complicated way of sending binary data is by using FormData (en-US)‘s append() method, demonstrated above. If you have to do it by hand, it’s trickier.
In the following example, we use the FileReader API to access binary data and then build the multi-part form data request by hand:
form id="theForm"> p> label for="theText">text data:label> input id="theText" name="myText" value="Some text data" type="text" /> p> p> label for="theFile">file data:label> input id="theFile" name="myFile" type="file" /> p> button>Send Me!button> form>
As you see, the HTML is a standard . There’s nothing magical going on. The «magic» is in the JavaScript:
// Because we want to access DOM nodes, // we initialize our script at page load. window.addEventListener("load", function () // These variables are used to store the form data const text = document.getElementById("theText"); const file = dom: document.getElementById("theFile"), binary: null, >; // Use the FileReader API to access file content const reader = new FileReader(); // Because FileReader is asynchronous, store its // result when it finishes to read the file reader.addEventListener("load", function () file.binary = reader.result; >); // At page load, if a file is already selected, read it. if (file.dom.files[0]) reader.readAsBinaryString(file.dom.files[0]); > // If not, read the file once the user selects it. file.dom.addEventListener("change", function () if (reader.readyState === FileReader.LOADING) reader.abort(); > reader.readAsBinaryString(file.dom.files[0]); >); // sendData is our main function function sendData() // If there is a selected file, wait it is read // If there is not, delay the execution of the function if (!file.binary && file.dom.files.length > 0) setTimeout(sendData, 10); return; > // To construct our multipart form data request, // We need an XMLHttpRequest instance const XHR = new XMLHttpRequest(); // We need a separator to define each part of the request const boundary = "blob"; // Store our body request in a string. let data = ""; // So, if the user has selected a file if (file.dom.files[0]) // Start a new part in our body's request data += "--" + boundary + "\r\n"; // Describe it as form data data += "content-disposition: form-data; " + // Define the name of the form data 'name token operator">+ file.dom.name + '"; ' + // Provide the real name of the file 'filename token operator">+ file.dom.files[0].name + '"\r\n'; // And the MIME type of the file data += "Content-Type: " + file.dom.files[0].type + "\r\n"; // There's a blank line between the metadata and the data data += "\r\n"; // Append the binary data to our body's request data += file.binary + "\r\n"; > // Text data is simpler // Start a new part in our body's request data += "--" + boundary + "\r\n"; // Say it's form data, and name it data += 'content-disposition: form-data; name token operator">+ text.name + '"\r\n'; // There's a blank line between the metadata and the data data += "\r\n"; // Append the text data to our body's request data += text.value + "\r\n"; // Once we are done, "close" the body's request data += "--" + boundary + "--"; // Define what happens on successful data submission XHR.addEventListener("load", function (event) alert("Yeah! Data sent and response loaded."); >); // Define what happens in case of error XHR.addEventListener("error", function (event) alert("Oops! Something went wrong."); >); // Set up our request XHR.open("POST", "https://example.com/cors.php"); // Add the required HTTP header to handle a multipart form data POST request XHR.setRequestHeader( "Content-Type", "multipart/form-data; boundary token operator">+ boundary, ); // And finally, send our data. XHR.send(data); > // Access our form. const form = document.getElementById("theForm"); // . to take over the submit event form.addEventListener("submit", function (event) event.preventDefault(); sendData(); >); >);
Here’s the live result:
Conclusion
Depending on the browser and the type of data you are dealing with, sending form data through JavaScript can be easy or difficult. The FormData (en-US) object is generally the answer, and you can use a polyfill for it on legacy browsers.
HTML: Отправка формы
Последним шагом в создании формы является добавление кнопки для отправки результата на сервер. Для этого, используя парный тег , создадим кнопку отправки:
После нажатия на кнопку «Отправить», данные будут переданы обработчику, который указан в атрибуте action (если не указан, то данные отправятся на эту же страницу). После отправки данных страница будет перезагружена.
Теперь, используя элементы форм из прошлых уроков, создадим форму с разными полями.
Форма поиска
Если вы нажмёте на кнопку «Искать», то страница перезагрузится и данные должны будут уйти в обработчик на эту же страницу. Так как обработчика нет, то никаких видимых результатов, кроме перезагрузки страницы, не произойдёт.
Задание
Создайте форму, у которой файл с обработчиком данных лежит по адресу /people . Внутри формы расположите следующие элементы:
- 2 текстовых поля
- Список с возможностью множественного выбора
- Кнопку «Отправить»
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Простейшая форма отправки данных на почту при помощи HTML и PHP
Одной из самых востребованных функций на сайте является форма заявки или заказа, данные из которой отправляются на почту владельцу сайта. Как правило такие формы являются простыми и состоят из двух трех полей для ввода данных. Как же создать такую форму заказа? Здесь потребуется использование языка разметки HTML и языка программирования PHP.
Язык разметки HTML сам по себе несложен, нужно всего лишь разобраться в том как и где ставить те или иные теги. С языком программирования PHP все немного сложнее.
Для программиста создать такую форму не составит труда, а вот HTML верстальщику может показаться сложным некоторые действия.
Создаем форму отправки данных в html
На этом этапе нужно создать файл form.php, в него добавить html код формы. Подробности о каждом элементе формы читайте в статье Как сделать форму в HTML для сайта.
Первая строка будет следующей
Это очень важный элемент формы. В нем мы указываем каким способом будут передаваться данные и какому файлу. В данном случае все передачется методом POST файлу send.php. Программа в этом файле соответственно должна принять данные, они будут содержаться в post массиве, и отправить их на указанный email адрес.
Вернемся к форме. Вторая строка будет содержать поле для ввода ФИО. Имеет следующий код:
Тип формы text, то есть пользователь сможет ввести или скопировать сюда текст с клавиатуры. Под параметром name содержится название формы. В данном случае это fio, именно под таким именем будет передаваться все, что пользователь введен в данноу поле. Параметр placeholder указывает на то, что будет записано в этом поле в виде пояснения.
Здесь практически все то же самое, но имя для поля указано email, а пояснении указано, чтобы пользователь в эту форму ввел свой адресс электронной почты.
Следующей строкой будет кнопка «отправить»:
И последней строкой в форме будет тэг
Теперь соберем все вместе.
Теперь сделаем так, чтобы поля в форме стали обязательными для заполнения. Имеем следующий код:
Создаем файл, принимающий данные из HTML формы
Это будет файл с именем send.php
В файле на первом этапе нужно принять данные из пост массива. Для этого создаем две переменные:
$fio = $_POST[‘fio’];
$email = $_POST[’email’];
Перед названиями переменных в php ставится знак $, в конце каждой строки ставиться точка с запятой. $_POST это массив в который передаются данный из формы. В форме html при этом указан метод отправки method=»post». Так, приняты две переменные из формы html. Для целей защиты своего сайта нужно провести эти переменные через несколько фильтров — функций php.
Первая функция преобразует все символы, которые пользователь попытается добавить в форму:
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
При этом новые переменные в php не создаются, а используются уже имеющиеся. Что сделает фильтр, он преобразует символ »
Вторая функция декодирует url, если пользователь попытается его добавить в форму.
$fio = urldecode($fio);
$email = urldecode($email);
Третей функцией мы удалим пробелы с начала и конца строки, если таковые имеются:
$fio = trim($fio);
$email = trim($email);
Существуют и другие функции, позволяющие отфильтровать переменные php. Их использование зависит от того , насколько вы опасаетесь того, что злоумышленник попытается добавить программный код в данную форму отправки данных на почту html.
Проверка данных, передаваемых от HTML формы в файл PHP
Для того, чтобы проверить, работает ли этот код, передаются ли данные можно просто их вывести на экран при помощи функции echo:
Вторая строка здесь нужна для того, чтобы разделить вывод переменных php на разные строки.
Отправляем полученные данные из формы HTML на почту при помощи PHP
Для отправки данных на почту нужно воспользоваться функцией mail в PHP.
mail(«на какой адрес отправить», «тема письма», «Сообщение (тело письма)»,»From: с какого email отправляется письмо \r\n»);
Например, нужно отправить данные на email владельца сайта или менеджера example@mail.ru.
Тема письма должна быть понятной, а сообщение письма должно содержать то, что указал пользователь в HTML форме.
mail(«example@mail.ru», «Заявка с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»);
Необходимо добавить условие, которе проверит отправилась ли форма при помощи PHP на указанные адрес электронной почты.
if (mail(«example@mail.ru», «Заказ с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»))
<
echo «сообщение успешно отправлено»;
> else <
echo «при отправке сообщения возникли ошибки»;
>
Таким образом программный код файла send.php, который отправит данные HTML формы на почту будет выглядеть следующим образом:
$fio = $_POST[‘fio’];
$email = $_POST[’email’];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$email = urldecode($email);
$fio = trim($fio);
$email = trim($email);
//echo $fio;
//echo «
«;
//echo $email;
if (mail(«example@mail.ru», «Заявка с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»))
< echo "сообщение успешно отправлено";
> else <
echo «при отправке сообщения возникли ошибки»;
>?>
Три строки для проверки, передаются ли данные в файл закомментированы. При необходимости их можно удалить, так как они нужны были только для отладки.
Помещаем HTML и PHP код отправки формы в один файл
В комментариях к этой статье многие задают вопрос о том, как сделать, чтобы и HTML форма и PHP код отправки данных на почту находились в одном файле, а не двух.
Для реализации такой работы нужно поместить HTML код формы в файл send.php и добавить условие, которое будет проверять наличие переменных в массиве POST (этот массив передается из формы). То есть, если переменные в массиве не существуют, то нужно показать пользователю форму. Иначе нужно принять данные из массива и отправить их адресату.
Давайте посмотрим как изменить PHP код в файле send.php:
Существование переменной в POST массиве мы проверяем PHP функцией isset(). Восклицательный знак перед этой функцией в условии означает отрицание. То есть, если переменной не существует, то нужно показать нашу форму. Если бы я не поставил восклицательный знак, то условие дословно означало бы — «если существует, то показать форму». А это неправильно в нашем случае. Естественно, что вы можете переименовать его в index.php. Если будуту переименовывать файл, то не забудьте переименовать название файла и в строке . Форма должна ссылаться на эту же страницу, например index.php. В код я добавил заголовок страницы.
Частые ошибки, возникающие при отправке PHP формы с сайта
Первая, наверное самая популярная ошибка, это когда вы видите пустую белую страницу без сообщений. Это означает, что вы допустили ошибку в коде страницы. Вам нужно включить отображение всех ошибок в PHP и тогда вы увидите, где допущена ошибка. Добавьте в код:
Файл send.php должен запускаться только на сервере, иначе код просто не будет работать. Желательно, чтобы это был не локальный сервер, так как он не всегда настроен на отправку данных на внешний почтовый сервер. Если вы запустите код не на сервере, то вам отобразиться код PHP прямо на странице.
Таким образом, для корректной работы я рекомендую поместить файл send.php на хостинг сайта. Там, как правило, все уже настроено.
Еще одна частая ошибка, когда появляется оповещение «Сообщение успешно отправлено», а письмо не приходит на почту. В этом случае нужно внимательно проверить строку:
if (mail(«example@mail.ru», «Заказ с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»))
Вместо example@mail.ru должен быть email адрес на который нужно отправить письмо, а вместо example2@mail.ru должен быть существующий email данного сайта. Например для сайта webriz.ru это будет info@webriz.ru . Только в этом случае письмо с данными из формы будет отправлено.
Читайте также статью про немного модифицированный вариант данной формы отправки.
Расширение формы, добавление Google ReCaptcha (v.2)
По просьбам в комментариях я доработал форму, добавил в нее поле для отправки сообщения. Также для защиты от роботов я добавил Google ReCaptcha, вторую версию. Добавлено поле textarea.
Итак, имеется два файла: index.php и send.php
Программный код index.php:
Вам нужно вставить ключ сайта вместо текста в соответствующей строке.
Программный код send.php:
else < echo "При отправке сообщения возникли ошибки"; >> else < echo "Подтвердите, что вы не робот и попробуйте еще раз"; >> else < echo "поставьте галочку в поле 'Я не робот' для отправки сообщения"; >?>Также нужно вписать секретный ключ.
Отправка формы на почту на html | Форма отправки html
Задача: Создать на html странице форму ввода пользователем данных. Например, имени и номера телефона/ электронного адреса. После нажатия пользователем кнопки «отправить», введённые данные отправляются на определенный электронный адрес.
Это стандартная задача для страниц сбора данных пользователей. Частный случай — лендинг пейдж (одностраничники, продающие один товар). На лендинге описание товара с изображениями и форма с отправкой пользовательских контактных данных. Например, имя и телефон .
Существуют сервисы, где можно скачать готовый лендинг пейдж. И полностью создавать страницу с нуля не нужно. А вот доработать функционал отправки пользователем своих данных приходится. Речь идет о небольшой доработки самой формы на странице. И создания php скрипта, производящего отправку введенных данных на почту.
Кстати. Часто предприниматели настройку лендингов заказывают. И этот несложный навык обходится примерно в 500 рублей.
Реализация: Для выполнения задачи потребуется два компонента:
- Html страница с формой
- PHP скрипт, который будет принимать введение данные и отправлять их на почту
HTML форма
Это простейший html код формы отправки. Если мы работаем с готовым лендинг педж, то просто находим такой (или примерно такой) код и при необходимости редактируем. Основные моменты:
action="mail_script.php"
Здесь прописываем в атрибут action адрес нашего скрипта. Обрати внимание — в данном случае адрес указывается относительным. То есть от корня сайта.
method="post"
Атрибут method содержит указание способа передачи данных. Как правило, используется метод GET или POST. В нашем случае используется метод POST (пользовательские данные отправляются внутри HTTP запроса).
Ваше имя:В данном куске кода заполняется элемент input. Указывается тип ожидаемых данных. А также переменные, куда введённые данные заполняются. В нашем случае используются тип данных text (текст) и tel (для номеров телефонов). Также пользовательские данные записываются в переменные: name и telephone. Переменные будут отправлены в PHP скрипт для дальнейшей обработки.
Кнопка для отправки введенных данных пользователя. Кстати, тип submit для решения нашей задачи подходит. Однако это решение не самое «элегантное». Поэтому чаще применяется button, который позволяет реализовывать кнопку отправки с большим числом параметров. А значит, создавать более красивые конструкции.
PHP скрипт
else < echo ("Error"); >?>$name = $_POST['name']; $tel = $_POST['telephone'];Описанная выше форма html передала в скрипт две переменных: name и telephone (имена переменных идентичны в обоих скриптах). В php параметры этих переменных запишем в локальные переменные $name и $tel.
$name = htmlspecialchars($name); $tel = htmlspecialchars($tel); $name = urlencode($name); $tel = urlencode($tel); $name = trim($name); $tel = trim($tel);Так как мы имеем дело со «свободными» формами, где пользователи могут печатать что угодно, проводим форматирование: htmlspecialchars(), urlencode() и trim(). Скрипт будет работать и без этого. Но в таком случае возможны «нюансы» с безопасностью.
mail("to_mail@mail.ru", "Тема", "Имя: ".$name."\n". "Телефон ".$tel, "From: script@mail.ru \r\n")С помощью функции mail() формируем наше письмо, заполняем поля. Электронный адрес, куда необходимо отослать письмо. Далее тема сообщения. Далее вводятся пользовательские данные. В конце указывается электронный адрес, от имени которого будем получать это сообщение.
В целом, уже этого достаточно для решения поставленной вначале задачи. Но немного дополним наш код. В случае успешной отправки данных перенаправим пользователя на определенную страницу. Если этого не сделать, после выполненного действия у посетителя на экране будет простой белый лист.
Если мы говорим о лендинг пейджах (продающих страницах), пользователя перенаправляют на «страницы благодарности». Где пользователя (покупателя) поздравляют с покупкой/ заказом, сообщают полезную информацию: что делать дальше, контактные данные:
Перенаправление будем реализовывать с помощью управляющей логической конструкции if/ else. Если отправка прошла успешно, производим перенаправление:
header("Location: /thank_you.html");Если произошла ошибка, выполняем другой код. В нашем примере на экран выводится обычное сообщение об ошибке. Соответственно можно выполнить любой другой код.
Далее кидаем нашу html страницу и php код на хостинг и тестируем.