Как создается контактная форма AJAX без какого-либо плагина? Узнай и сделай на своем сайте!
Здравствуйте, уважаемые друзья и гости блога! Вы новичок в веб-разработке? Хорошо! Я тоже. Я только что узнал удивительный трюк, который делает стандартную форму контакта выдающейся! Вы всегда можете перейти к обычному HTML, PHP. Но если Вы хотите сделать свой сайт еще лучше, то форма AJAX для отправки данных в PHP без перезагрузки страницы – это то, что Вам нужно. Позвольте мне поделиться с Вами?! Поехали …
Прежде чем начать, позвольте мне дать Вам краткое представление о процедуре. Мы будем использовать AJAX для отправки данных формы и jQuery для упрощения кода JavaScript. Почтовый скрипт PHP будет там для отправки данных формы по электронной почте.
Шаг 1 – Создание формы HTML
Вам нужна HTML-форма для сбора данных от пользователя. Давайте сделаем это. Лучше назвать все функции и переменные как у меня. Давайте создадим <form>. Имя класса вашего элемента contact__form, установим method атрибут post и запомним имя нашего PHP-скрипта, это mail.php. Теперь, установите action атрибут на mail.php.
Взгляните на мой HTML-код:
Вы создали стандартную форму, которая будет собирать имя, адрес электронной почты, телефон, тему и сообщение. Вы можете придать своей HTML-форме дизайн, который Вам нравится, с помощью Bootstrap, это ваше дело. Здесь мы сделали основное. Вы можете заметить, что все поля имеют required атрибут, который будет препятствовать отправке формы, если какое-либо из этих полей останется пустым. Помните, что следующий фрагмент кода, который Вы видите выше (также), предназначен только для отображения сообщения об успехе или ошибке.
Теперь нам нужно использовать jQuery для отправки этих данных. Итак, Вам нужно обратиться jquery-3.2.1.min.js к нижней или верхней части (где Вы хотите) вашего HTML-файла формы. О, забыл сказать, все функции JavaScript будут иметь место в main.js.
Чтобы файл main.js (этот main.js Вы увидите ниже) работал. Вы должны вызывать его после вызова jQuery.
Вот и весь HTML, который нам нужен сегодня. Вы можете сохранить этот файл как index.html
Шаг 2 – Использование AJAX для отправки формы
Создайте файл JavaScript и назовите его main.js. Этот файл позаботится обо всей работе, необходимой для отправки нашей формы с использованием AJAX. Ниже приведен код main.js. Не волнуйтесь, мой полный проект “Форма AJAX”, Вы найдете в конце этой статьи и сможете его скачать к себе на компьютер, совершенно бесплатно.
Позвольте мне объяснить приведенный выше код. В самом начале кода мы объявили несколько переменных для хранения данных, которые мы получаем из нашей HTML-формы.
Затем submit функция сохраняет данные в form_data переменную. Позже $.ajax мы отправляем наши данные в mail.php. Теперь перейдем к тестированию, если наши данные пройдут гладко, то done функция будет выполнена и покажет сообщение об успехе. Но если этого не произойдет, то fail функция запустится и покажет сообщение об ошибке.
Шаг 3 – Пусть PHP сделает свою работу и отправит почту
Что мы делаем с данными, которые мы получили от пользователя? Мы храним это где-то. Правильно?! Но вместо этого мы можем отправить электронное письмо. Для этого мы пишем mail скрипт PHP. Скопируйте следующий код и сохраните его под именем mail.php.
Обратите внимание, Вам нужно заменить на нужный адрес электронной почты. Вы можете скачать файлы моего проекта с помощью кнопки загрузки ниже.
Я надеюсь, что Вы узнали сегодня, что-то новое для себя и своего сайта. Думаю, что этот трюк “Форма AJAX” Вам понравилась и пригодилась?!.
Если у Вас есть какие-либо вопросы или Вы не поняли какую-либо часть, обратитесь ко мне через раздел комментариев. Я всегда здесь для Вас! Спасибо за то, что Вы всегда со мной и моим блогом – atready.ru. Удачного кодирования 
Всем удачи и благополучия! До новых встреч!
