Форма обратной связи на ajax

Введение:

Какой функционал вы найдете на каждом сайте?
Форму обратной связи.

Будь то блог или интернет-магазин, или просто статический landing page. Отправить вопрос автору блога, сделать заказ, подать заявку на обратный звонок — механизм (логика везде) один и тот же.

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

Задача:

Реализовать отправку данных с сайта на почту, без перезагрузки страницы. Используется стандартный почтовый сервер ( протокол SMTP).

 

Описание:

Что дано:

  1. html-траница сайта
  2. поля необходимые для передачи

Что делаем:

  1. создаем код самой формы,
  2. подключаем обработчик JS
  3. подключаем обработчик PHP

Создание кода формы — форма это набор специальных элемент html-документа, тэг <form> означающий что начинается форма и поля ввода различных типов: текстовое <input>, область текста <textarea>, выпадающие списки <select>, кнопки <button> и другие . Браузер (компьютер ) .

 

HTML-код формы

 

Хорошим тоном в верстке является оборачивание полей в контейнеры, в нашем случае использован тэг <div> с классом «field».

Атрибут формы method задаем «post», action — решетка.

 

CSS-стили.

 

Сейчас модно задавать классы каждому элементу, но в данном случае мы используем наследование для полей формы. Обратите внимание на резет placeholder плейсхолдеров, движоки chrome по умолчанию задают полупрозрачность, а например FireFox этого не делает.

JS-обработчик

 

Здесь все просто. JS-ом мы сначала собираем данные с полей формы, после проводим валидацию и запускаем ajax.

Поскольку скрипт простой обойдемся без ООП, создавать классы и методы тут излишне.

Собираем поля формы вручную ( разработчики могут сделать динамическию сборку с формы — если будет актуально выложу это в блоге ).

Валидацию можно делать как на стороне сервера, на PHP, так и на стороне клиента на JS. Первое надежней, но второе быстрее т. к. не надо ждать ответа сервера и собственно этот сервер не нагружает.

С обработчиком ajax все также просто — отправляем запрос, и если там все в порядке выводим сообщение с соответствующим уведомлением.

.

PHP-обработчик

Обрабатываем полученные от JS данные и собираем письмо. Отправка осуществляется стандартной функцией языка PHP — mail().

 

Применение:

реализация формы обратной связи на статических сайтах и небольших сайтах на CMS.

 

Яндекс.Метрика