Форма AJAX Для Контактов(100%)Без Плагинов — Создай!

форма ajax

Как создается контактная форма AJAX без какого-либо плагина? Узнай и сделай на своем сайте!

Здравствуйте, уважаемые друзья и гости блога! Вы новичок в веб-разработке? Хорошо! Я тоже. Я только что узнал удивительный трюк, который делает стандартную форму контакта выдающейся! Вы всегда можете перейти к обычному HTML, PHP. Но если Вы хотите сделать свой сайт еще лучше, то форма AJAX для отправки данных в PHP без перезагрузки страницы — это то, что Вам нужно. Позвольте мне поделиться с Вами?! Поехали ...

Прежде чем начать, позвольте мне дать Вам краткое представление о процедуре. Мы будем использовать AJAX для отправки данных формы и jQuery для упрощения кода JavaScript. Почтовый скрипт PHP будет там для отправки данных формы по электронной почте.

Шаг 1 — Создание формы HTML

Вам нужна HTML-форма для сбора данных от пользователя. Давайте сделаем это. Лучше назвать все функции и переменные как у меня. Давайте создадим <form>. Имя класса вашего элемента contact__form, установим method атрибут post и запомним имя нашего PHP-скрипта, это mail.php. Теперь, установите action атрибут на mail.php.

Взгляните на мой HTML-код:

kod dlya formy ajax_1

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

kod dlya formy ajax_2

Теперь нам нужно использовать jQuery для отправки этих данных. Итак, Вам нужно обратиться jquery-3.2.1.min.js к нижней или верхней части (где Вы хотите) вашего HTML-файла формы. О, забыл сказать, все функции JavaScript будут иметь место в main.js.

Чтобы файл main.js (этот main.js Вы увидите ниже) работал. Вы должны вызывать его после вызова jQuery.

kod dlya formy ajax_3

Вот и весь HTML, который нам нужен сегодня. Вы можете сохранить этот файл как index.html

Шаг 2 — Использование AJAX для отправки формы

Создайте файл JavaScript и назовите его main.js. Этот файл позаботится обо всей работе, необходимой для отправки нашей формы с использованием AJAX. Ниже приведен код main.js. Не волнуйтесь, мой полный проект «Форма AJAX», Вы найдете в конце этой статьи и сможете его скачать к себе на компьютер, совершенно бесплатно.

kod dlya formy ajax_4

Позвольте мне объяснить приведенный выше код. В самом начале кода мы объявили несколько переменных для хранения данных, которые мы получаем из нашей HTML-формы.

Затем submit функция сохраняет данные в form_data переменную. Позже $.ajax мы отправляем наши данные в mail.php. Теперь перейдем к тестированию, если наши данные пройдут гладко, то done функция будет выполнена и покажет сообщение об успехе. Но если этого не произойдет, то fail функция запустится и покажет сообщение об ошибке.

Шаг 3 — Пусть PHP сделает свою работу и отправит почту

Что мы делаем с данными, которые мы получили от пользователя? Мы храним это где-то. Правильно?! Но вместо этого мы можем отправить электронное письмо. Для этого мы пишем mail скрипт PHP. Скопируйте следующий код и сохраните его под именем mail.php.

kod dlya formy ajax_5

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

Я надеюсь, что Вы узнали сегодня, что-то новое для себя и своего сайта. Думаю, что этот трюк «Форма AJAX» Вам понравилась и пригодилась?!.

Если у Вас есть какие-либо вопросы или Вы не поняли какую-либо часть, обратитесь ко мне через раздел комментариев. Я всегда здесь для Вас! Спасибо за то, что Вы всегда со мной и моим блогом — Pribylwm.ru. Удачного кодирования :)

Всем удачи и благополучия! До новых встреч!

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: