Bootstrap js форма в modal'льном окне

Элемент формы (form)

Главным для элемента <form> является атрибут action, который указывает обработчик данных для формы. Обработчик данных — это файл, описывающий, что нужно делать с данными формы. Данные формы отправляются с помощью method = «post»:

— это суперглобальная переменная, которая возвращает имя файла текущего выполняемого скрипта-обработчика.

Переменная отправляет данные из формы на саму же страницу с формой, вместо перехода на другую страницу. Таким образом, пользователь будет получать сообщения об ошибках на той же странице, где заполняется форма.

Функция преобразует данные, введенные пользователем, которые могут содержать нежелательные HTML-тэги. Производятся следующие преобразования:

‘&’ (амперсанд) преобразуется в ‘&’
‘<‘ (знак «меньше чем») преобразуется в ‘<’
‘>’ (знак «больше чем») преобразуется в ‘>’

Эти манипуляции предотвращает использование злоумышленниками кода путем внедрения скрипта (атаки с межсайтовым скриптингом) в формы.

Компонент CreateOwner

В папке , а затем внутри папки создайте новую папку и назовите ее . Внутри создайте новый файл .

Приступим к редактированию этого файла:

В приведенном выше коде мы импортируем все необходимые компоненты и функцию из файла . Этот компонент является компонентом класса или компонентом с отслеживанием состояния, и в хуке жизненного цикла мы обновляем наше локальное состояние с учетом всей конфигурации формы. Хук сработает непосредственно перед установкой компонента.

Давайте добавим еще одну строку кода между блоками и :

В функции мы хотим преобразовать объект ownerForm в массив объектов, чтобы отправить его компоненту . Итак, давайте добавим эту функцию в отдельный файл.

Внутри папки создайте новый файл . Измените этот файл, добавив функцию преобразования объекта:

Теперь нам нужно импортировать эту функцию в файл :

У нас будет больше действий внутри файла , поэтому мы импортируем все эти действия в компонент .

Мы заполнили , поэтому давайте воспользуемся им для отправки всех свойств компоненту .

Объект конфигурации элементов формы

Давайте добавим этот код в тег :

В этом коде мы перебираем все объекты (входные конфигурации) внутри и возвращаем компонент со всеми необходимыми свойствами и событиями, которые ему требуются. Существует функция , и мы собираемся создать эту функцию, чтобы включить проверку и двустороннюю привязку. Но об этом чуть позже.

Чтобы увидеть результат наших текущих действий, давайте изменим файл , добавив другой маршрут к компоненту ниже маршрута . Не следует забывать и об операторе импорта:

Если мы перейдем на страницу , мы увидим такой результат:

Мы создали элементы управления, но пока ничего не можем с ними сделать. Но как только мы реализуем функцию , мы сможем изменять и проверять наши входные данные.

Документация сниппета AjaxForm

AjaxForm

14 августа 2019, 07:00

Cниппет для отправки любых форм через ajax. По умолчанию рассчитан на работу с FormIt, но можно использовать и собственный сниппет.

Регистрирует нужные скрипты на фронтенде: jQuery.Form и jQuery.jGrowl.
Сохраняет в сессию при вызове сниппета.
Выводит указанную форму, прописывая класс ajax_form и скрытый input для получения .
Вешает обработчик на форму, чтобы она отправлялась через ajax.
При отправке запускает указанный сниппет для обработки и возвращает ответ от него.
Выводит сообщение об успехе, или ошибки, если есть.

Параметры сниппета

Имя	По умолчанию	Плейсхолдеры
&form	tpl.AjaxForm.example	Образец чанка с формой, которую нужно обработать.
&snippet	FormIt	Сниппет для обработки формы.
&frontend_css	]css/default.css	Стили оформления формы и полей с ошибками
&frontend_js	]js/default.js	Javascript для отправки формы через ajax
&actionUrl	]action.php	Адрес коннектора, на который отправляется форма

Всё, что вы указываете AjaxForm, будет передано в вызываемый сниппет.

Обработка своим сниппетом

Вы можете использовать собственный сниппет, вместо FormIt, который будет делать что угодно (хоть создавать страницы на сайте).
Единственное требование — он обязательно должен возвращать JSON массив с ключами:

status — 1 или 0, то есть успех или ошибка.
message — сообщение о работе сниппета, выводится если status = 0.
data — массив для полей с ошибками, в котором ключами является имя поля, а значением — сообщение об ошибке.

Для удобства работы в параметры сниппета передаётся переменная с классом компонента, чтобы вы могли вызывать из него методы error и success при выдаче ответа.

Простейший пример своего сниппета:

Вызываем так:

Этот сниппет ничего не делает, просто возвращает результат проверки имени.

Валидация формы

Сервер может вернуть ошибку отправки формы и массив полей, не прошедших проверку.
Этим полям автоматически будет добавлен CSS класс , который убирается при последующей отправке.

Так же вы можете запретить отправку формы, используя javascript переменную afValidated — если она объявлена и равна , то форма не будет отправлена.

Обратите внимание, что все проверки на javascript можно обойти, так что эту переменную стоит использовать только для удобства пользователей, а не для реальной проверки данных

Событие af_complete

При получении ответа от сервера вызывается событие af_complete, которое вы можете использовать для обновления содержимого страницы или другой операции javascript.

Вам просто нужно указать функцию, в которую будет передано событие javascript и объект с ответом от сервера

Обратите внимание, что внутри этого объекта есть и отправляющая форма

redirect на другую страницу сайта, после успешной отправки формы?

Добавляем id к форме, если его нет и затем в js файл прописать вот такие строки

Можно просто обернуть в выше приведенный код и подключить в шаблон с формой ближе к закрытию body.

Всплывающие сообщения

По умолчанию AjaxForm выводит сообщения об успешной отправке формы или о наличии ошибок.
Вы можете самостоятельно вызывать их для своих целей:

Вторым параметром можно указать «прилипающий» popup — его нужно будет закрыть вручную, бывает полезно для показа серьёзных ошибок.

То есть, просто вызвав сниппет на странице, вы получаете подключенный jQuery.jGrowl и можете показывать приятные всплывающие уведомления на javascript.

Отладка

При возникновении любых проблем, в первую очередь проверяйте, отправляется ли форма без AjaxForm.
Помните, что AjaxForm — сниппет-обёртка, он не отправляет письма и не проводит проверку формы. Это делает ваш сниппет или FormIt.

Так же не забывайте заглядывать в консоль браузера на предмет ошибок javascript.
Если сервер выдаёт ошибку 500 при отправке, проверьте параметр register_globals у вашего PHP — он должен быть отключен.

Панель значковЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полной страницыВверх НавигацияОтзывчивый TopnavПанель поискаИсправлена боковая панельБоковая навигацияПолноэкранная навигацияМеню Off-CanvasНаведение с помощью кнопокМеню горизонтальной прокруткиВертикальное менюНижняя навигацияОтзывчивый снимок NavСсылки на нижнюю границуСсылки справаЦентрированные ссылки менюИсправлено менюСлайд-шоу в прокруткеСкрыть Navbar в прокруткеПрикрепленное NavbarВыпадающие окна HoverНажмите «Раскрывающиеся окна»Раскрытие в ТопнавеРаспространение в СиденеОткроется панель NavbarDropupMega MenuпагинацияПанировочные сухариГруппа кнопокГруппа вертикальных кнопокВажная социальная панельОтзывчивый заголовок

Сервер для PHP

Для того, чтобы PHP-код исполнялся, нужен какой-то компьютер-исполнитель. Мы называем его сервером — то есть «раздающим». На сервере должна работать программа для PHP, которое отвечает за правильную обработку таких файлов.

Сервер для PHP можно запустить на вашем компьютере, но без дополнительной настройки он будет виден только лично вам. Это нормальная ситуация при разработке продукта, но для реальной боевой задачи нужно будет поднять сервер где-то в интернете.

Когда мы делали проект «Публикуем свою страницу в интернете», то уже использовали сервер (эту услугу нам предоставила хостинговая компания SpaceWeb). Этот же сервер мы можем использовать для нашей сегодняшней задачи, потому что он тоже умеет работать с PHP-файлами:

Если такое есть у вашего хостинга, то вы тоже сможете использовать все возможности PHP.

Задание Основ Формы

Открываем index.html, копируем следующую базовую структуру HTML:

Это наш базовый HTML шаблон, на основе которого мы будем создавать содержимое формы

Вы можете видеть, что мы связали все необходимые файлы CSS и JavaScript (обратите внимание, что для этого конкретного примера нам не нужен bootstrap.js). Мы включили метатег viewport для облегчения работы с медиа запросами в Bootstrap

JavaScript был прописан в нижней части файла, чтобы сначала загрузилась основная часть формы.

Внутри тега body мы включили div с классом . Это в основном означает, что на маленьких экранах (small) мы хотим отобразить столбец шириной 50% (максимум 12 столбцов). Класс добавляет отступ слева 25%, создавая таким образом макет, который занимает половину доступного экрана и выровнен по центру. Здесь мы добавили тег , и это начало основы нашей формы. Убедитесь, что вы применили ID к этой форме, чтобы мы могли позднее связать событие jQuery.

Кто не рискует, тот не пьет шампанское

Создавая элементы формы мы можем скопировать/вставить или написать следующий код в тегах :

Пользователь будет взаимодействовать со всеми этими полями и кнопками. Родительский с присвоенным классом — классический Bootstrap синтаксис, создает строку из элементов col. Столбцы в Bootstrap создают внутренние отступы или интервалы — добавление строки вокруг них приведет к удалению отступов слева и справа и столбцы идеально вписываются в основной контейнер.

Мы создали два столбца с классом (50%), который мы будем использовать для разделения нашей формы. В первом столбце мы создали метку и поле для имени, во втором столбце поле для электронной почты. Каждый из них включает метку с соответствующим атрибутом , ссылающийся на соответствующее поле. Каждый из этих столбцов заключен в класс который семантически группирует метку и поле вместе и также добавляет маленький внешний отступ снизу.

Типографика

Bootstrap позволяет вам использовать классы заголовков H1-H6. Эти классы помогают нам использовать строчные элементы без добавления дополнительных отступов или создания блочных элементов. Мы применили класс H4 к меткам, быстро увеличив их размер и сделав их более понятными.

Класс применяемый к каждому полю ввода, позволяет ему охватывать всю длину контейнера (100%). Он также добавляет различные стили, улучшающие читаемость текста (увеличивая высоту текста, добавляя рамку и т.д.).

После этих столбцов мы добавляем текстовое поле сообщения. Опять же, мы заключаем это внутри класса и применяем похожие стили к нашей метке и текстовому полю, как мы это делали раньше.

Призыв к действию

И наконец, мы добавляем кнопку. В Bootstrap имеется несколько классов для разных кнопок с различными цветами и состояниями. Мы решили использовать кнопку «успех» (), которая по умолчанию имеет зеленый цвет. Кроме того, нам необходимо добавить класс для сброса стандартных стилей кнопки (граница, отступы, выравнивание текста, насыщенность шрифта). Мы применили класс который увеличивает кнопку и наконец класс для выравнивания кнопки по правому краю.

После нашей кнопки мы добавили div с идентификатором и применили следующие классы: «». h3 создает более крупный заголовок, (как вы уже догадались) делает выравнивание текста по центру, и, наконец, мы установили класс , который устанавливает оба свойства, display в значение none и свойство visibility в значение hidden (display: none; visibility: hidden;).

AJAX отправка (субмит) формы ¶

Ну и осталось самое, наверное, полезное и главное из данной статьи. Хотя, если вы хоть раз делали аякс формы на 7-ке, вам не составит труда догадаться что в данном случае нужно сделать для этого. Всё супер просто и намного легче 7-ки.

Всё что нам необходимо сделать для AJAX отправки формы, это добавить точно такой же метод к кнопке отправки, который будет лишь получать системные сообщения, в которых выводятся сообщения об ошибках в форме или успешном отправлении и выводить их в форме. Приступим.

Добавляем новый элемент формы

Добавляем AJAX субмит к форме

AJAX callback

Вот и всё! Дальше лишь фантазия и необходимость.

Обеспечение плавного сокращения возможностей

При создании формы с поддержкой Ajax в примере из предыдущей статьи, мы передавали имя метода действия, который должен был вызываться асинхронно. В рассмотренном примере это было действие GetPeopleData, которое генерирует частичное представление с фрагментом HTML-разметки.

Однако проблема такого подхода заключается в том, что он не очень хорошо работает, если пользователь отключил поддержку JavaScript (или эта поддержка вообще отсутствует в браузере). В таких случаях, когда пользователь отправляет форму, браузер отбрасывает текущую HTML-страницу и заменяет ее фрагментом, возвращенным целевым методом действия. Этот эффект можно наблюдать на рисунке ниже:

На рисунке приведен экранный снимок окна браузера Google Chrome, т.к. он позволяет легко включать и отключать поддержку JavaScript.

Простейший способ решения этой проблемы предусматривает указание в свойстве AjaxOptions.Url целевого URL для асинхронного запроса вместо передачи имени действия в качестве аргумента методу Ajax.BeginForm(), как показано в примере ниже:

Мы применяем вспомогательный метод Url.Action() для создания URL, который будет вызывать действие GetPeopleData, и используем версию метода Ajax.BeginForm(), принимающую единственный параметр AjaxOptions. В результате создается элемент <form>, который осуществляет обратную отправку инициировавшему методу действия, если поддержка JavaScript не включена:

...
<form action="/People/GetPeople" id="form0" method="post" 
    data-ajax="true" 
    data-ajax-mode="replace" 
    data-ajax-update="#tableBody" 
    data-ajax-url="/People/GetPeopleData" >
...

Если поддержка JavaScript включена, то библиотека ненавязчивого Ajax получит целевой URL из атрибута data-ajax-url, который ссылается на наше дочернее действие. Если же поддержка JavaScript отключена, тогда браузер будет использовать обычный прием отправки формы, получающий целевой URL из атрибута action, который указывает на метод действия, генерирующий полную HTML-страницу.

Вас может удивить, зачем так сильно заботиться о пользователях, отключивших поддержку JavaScript. В конце концов, кто так поступает? На самом деле это на удивление широко распространено в двух группах пользователей:

Первая группа состоит из пользователей, которые очень серьезно относятся к проблеме информационной безопасности и отключают все, что может послужить основой для атаки — чем и была поддержка JavaScript на протяжении многих лет.
Во вторую группу входит офисный планктон, на компьютерах которых применяют исключительно ограничивающие политики во имя информационной безопасности (хотя, по моему опыту, на корпоративных компьютерах настолько плохо настроена защита, что она фактически отсутствует, и такие ограничения всего лишь раздражают пользователей).

Вы можете игнорировать плавное сокращение возможностей, если уверены, что вас не интересуют эксперты в области информационной безопасности и сотрудники офисов, но поскольку они могут оказаться состоятельными и технически подкованными пользователями, имеет смысл всегда уделять время для их поддержки.

Создание ссылок Ajax

В дополнение к формам, ненавязчивый Ajax можно применять для создания элементов <a>, по которым допускается переходить асинхронным образом. Механизм очень похож на способ работы форм Ajax. В примере ниже показано, как добавить ссылки Ajax в представление GetPeople.cshtml:

Мы добавили цикл foreach, в котором вспомогательный метод Ajax.ActionLink() вызывается для каждого значения, определенного перечислением Role, и создает элементы <a>, поддерживающие Ajax. Сгенерированные элементы <a> имеют тот же вид атрибутов data, как и при работе с формами.

В конфигурации маршрутизации для проекта не предусмотрено записи для переменной selectedRole, поэтому URL, сгенерированный для атрибута href, указывает роль, которую представляет ссылка, используя компонент строки запроса URL. Добавленные в представление ссылки показаны на рисунке ниже:

Щелчок на одной из этих ссылок приводит к вызову метода действия GetUserData() и замене содержимого элемента <tbody> возвращаемым им фрагментом HTML-разметки. Это дает тот же самый эффект фильтрации данных, что и достигнутый ранее с помощью формы, поддерживающей Ajax. Чтобы увидеть изменения, внесенные в этот пример, может потребоваться очистка хронологии браузера.

Обеспечение плавного сокращения возможностей для ссылок

Со ссылками Ajax связана та же проблема, что и с формами. Если в браузере отсутствует или отключена поддержка JavaScript, то щелчок на такой ссылке приводит просто к отображению фрагмента HTML-разметки, сгенерированного методом действия GetPeopleData().

Эту проблему можно решить путем применения свойства AjaxOptions.Url для указания URL с запросом Ajax и передачи действия GetPeople вспомогательному методу Ajax.ActionLink(), как показано в примере ниже:

Именно по этой причине для каждой требуемой ссылки создается новый объект AjaxOptions, а не используется один объект, созданный в блоке кода Razor для элемента <form>. Независимые объекты AjaxOptions позволяют указывать разные значения для свойства Url в каждой ссылке и поддерживают плавное сокращение возможностей для браузеров с отключенной поддержкой JavaScript.

Как осуществляется валидация формы

В данной форме валидация осуществляется как на клиенте, так и на сервере.

Скриншот формы с ошибками валидации:

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

Установка требований к полям формы обратной связи определяется с помощью атрибутов , , , , и др.

Например, требование к полю name в данном проекте:

<!-- required="required" - обязательное поле -->
<!-- minlength="2" - количество символов не меньше 2 -->
<!-- maxlength="2" - количество символов не больше 30 -->
<input id="name" type="text" name="name" class="form-control" value="" placeholder="Имя" minlength="2" maxlength="30" required="required">

На сервере валидация данных формы осуществляется в файле .

Например, валидация поля осуществляется с помощью следующего php-кода:

if (isset($_POST)) {
  $name = filter_var($_POST, FILTER_SANITIZE_STRING); // защита от XSS
  $nameLength = mb_strlen($name, 'UTF-8');
  if ($nameLength < 2) {
    $data = 'Текст должен быть не короче 2 симв. Длина текста сейчас: '. $nameLength .' симв.';
    $data = 'error';
  } else if ($nameLength > 30) {
    $data = 'Длина текста не должна превышать 30 симв. (сейчас '. $nameLength .' симв.).';
    $data = 'error';
  }
} else {
  $data = 'Заполните это поле.';
  $data = 'error';
}

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

Откройте файл index.html и скопируйте в него следующую базовую структуру AJAX формы обратной связи:

<!DOCTYPE html>
<html>
<head>
    <title>Contact form using Bootstrap 3.3.4</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">

</head>
<body>"
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
    <h3>Send me a message</h3>
    <form role="form" id="contactForm">

    </form>
</div>
</div>
</body>
<script  src="js/jquery-1.11.2.min.js"></script>
<script src="js/form-scripts.js"></script>
</html>

Это базовый шаблон HTML, в который мы будем добавлять содержимое формы. Мы подключили все необходимые файлы CSS и JavaScript. Заметьте, что для этого конкретного примера нам не нужен bootstrap.js.

Мы включили мета-тег viewport для медиа-запросов в рамках Bootstrap. JavaScript был помещен в нижней части файла, чтобы в первую очередь обрабатывался основной код.

В теге body мы включили div с классом col-sm-6 col-sm-offset-3. Это означает, что в пределах окна просмотра sm (маленького) и поверх него мы хотим отобразить столбец шириной 50% (максимальное количество столбцов 12). Класс col-sm-offset-3 задает отступ слева на 25%.

Таким образом, создается макет, который занимает половину доступного пространства и отцентрирован по горизонтали. После этого мы включили h3, и дальше идет основа формы. Убедитесь в том, что вы применили к форме идентификатор, чтобы позже прикрепить к ней событие для отправки формы AJAX JQuery:

Подготовка компонента

Чтобы сэкономить время, предлагаю установить один прикольный модуль «Мастер создания компонента», он позволит быстро и без лишних телодвижений создать простой макет нашего компонента формы обратной связи. Устанавливаем компонент через страницу на маркетплейсе или через админку.

Затем переходим в раздел: Настройки -> Настройки продукта -> Список мастеров, тут ищем «Мастер создания компонента» и в контекстном меню напротив, выбираем пункт «Установить»:

Для нашего компонента я выбрал следующие базовые настройки:

Тип компонента — простой
Пространство имён — custom
Идентификатор — emptyscript
Название — Пустой скрипт
Описание — Заготовка под кастомный компонент
Категория в списке компонентов — Custom

component_epilog.phpНажимаем «Создать», ждём пару секунд, готово! Компонент успешно создан! Можете поблагодарить автора компонента донатом, он действительно экономит кучу времени. Давайте создадим какой-нибудь раздел на сайте и разместим нашу заготовку.

Перейдём к описанию самой формы.

Функционал формы

Тут существует множество вариантов, и наверняка у меня не самый простой, но достаточно понятный вариант.
Добавляем в

    <script>
        var SendContactForm = {
            type: 'POST',
            resetForm: 'true',
            url: 'mail.php',
            success:    function(){
            }
          }

        function FormSendOK() {
            $("#ContactForm").ajaxSubmit(SendContactForm);
            $("#ContactModal").modal('hide');
            alert("Спасибо! Ваше сообщение отправлено.");
          }

    </script>

Скрипт отправляет пользовательские данные методом POST обработчику mail.php.
Скрывает и очищает модальное окно с формой и выводит уведомление «Спасибо! Ваше сообщение отправлено.»

Без борьбы не бывает победы

Дальше нужно вставить следующий код внутри тегов <form></form>:

<div class="row">
            <div class="form-group col-sm-6">
                <label for="name" class="h4">Name</label>
                <input type="text" class="form-control" id="name" placeholder="Enter name" required>
            </div>
            <div class="form-group col-sm-6">
                <label for="email" class="h4">Email</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email" required>
            </div>
        </div>
        <div class="form-group">
            <label for="message" class="h4 ">Message</label>
            <textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
        </div>
        <button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>

Это все поля ввода и кнопки, с которыми будет взаимодействовать пользователь. Первоначальный div с присвоенным классом row — это классический синтаксис Bootstrap, представляющий собой горизонтальную группировку элементов col. Столбцы в пределах Bootstrap создают отступы или пробелы. Удаляя их, можно добиться, чтобы строка равномерно вписывалась в контейнер.

Мы создали два столбца с классом col-sm-6 (50%), который будем использовать, чтобы отделить верхнюю часть формы. В пределах первого столбца col-sm-6 мы создали label и поля для имени и электронной почты. Каждый из них содержит label с соответствующим атрибутом for, поэтому метка связана с соответствующим полем.

Каждый из этих столбцов включает в себя form-group, который семантически группирует метки, создавая небольшой отступ снизу:

Как избежать эксплойтов $_SERVER[«PHP_SELF»]?

Экспло́йт (англ. exploit, эксплуатировать) — это фрагмент вредоносного программного кода либо последовательность команд, которые используют уязвимости в программе и применяеются для проведения хакерской атаки.

Чтобы избежать экспойты нужно переменную $_SERVER предать в качестве аргумента в функцию :

Функция преобразует специальные символы (в нашем случае угловые скобки < и >) в объекты HTML. Теперь, если пользователь попытается использовать переменную с целью внедрения стороннего кода, это приведет к следующему выводу:

<form method=»post» action=»send_form.php/"><script">(‘hacked’)</script>»>

Попытка эксплойта в этом случае не удастся и никакой вредоносный код не сработает.

Пишем обработчик формы на PHP

Когда мы заполним и отправим форму на нашей странице, произойдёт следующее:

Браузер соберёт введённые нами данные и скомпонует таким образом, чтобы их можно было передать в программу на PHP. Как бы упакует в посылку.
В нашей PHP-программе мы сможем получить доступ к этим данным, как бы засосать их в память и хранить в переменных. Можно представить, что мы распакуем посылку и сможем пользоваться её содержимым.
Скрипт PHP что-то сделает с полученными данными, а потом выплюнет пользователю какой-то ответ. Этот ответ будет отображён в виде веб-страницы в браузере.

Логика работы PHP-программы будет такая:

получаем значения переменных из тех данных, которые получил обработчик;
готовим сообщение, где укажем все поля в форме;
отправляем это сообщение и смотрим на результат выполнения функции отправки;
если письмо ушло по нужному адресу — пишем, что всё хорошо, если нет — говорим, что что-то не так;
через 10 секунд после вывода сообщения автоматически переходим на сайт «Кода»

Мы специально делаем так, чтобы форма отсылала письма на тот же адрес, который одновременно и адрес отправителя. Это сделано для того, чтобы вы получали эти письма, когда будете тестировать сервис. В рабочем проекте замените переменную в функции на свой настоящий адрес, чтобы самим получать письма из формы.