в Разработки

Отправка писем и оповещений с сайта — чуть ли не самая распространенная фишка, ведь это и формы обратной связи клиентами, и фидбэки для получения отзывов и заказов, и функционал волшебной кнопки “Связаться с нами”, “Форма заказа для сайта”. Уверен, что отдача от возможности отправить письмо или сообщение прямо с сайта (“здесь и сейчас”) на 90% эффективнее простого e-mail адреса в контактах, ведь для этого не надо совершать никаких дополнительных действий.

Более того, если эта самая форма обратной связи (далее по тексту — “форма”) будет работать асинхронно (не перезагружать страницу) и сама по себе интуитивно понятна — это отдельный плюс в карму разработчикам.

Итак, перед нами сейчас стоит задача:

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

В итоге у нас будут 3 файла:

  1. HTML — визуальное представление формы;
  2. JS — JavaScript с обработчиком события нажатия на кнопку “Отправить сообщение”, минимальной валидацией данных и функцией отправки AJAX запроса к php-скрипту отправки письма;
  3. PHP — скрипт, который будет проверять данные, переданные JavaScript скриптом или HTML формой, формировать письма, и отправлять их.

Детально расписывать написание скриптов и исходники каждого файла смысла не вижу, но вот основные критерии, которые к ним выставлялись, опишу ниже:

HTML:

  • Валидная верстка;
  • Отсутствие каких-либо обработчиков в самом коде.

JS:

  • Минимальное обращение к DOM;
  • Корректная валидация E-mail адреса на стороне клиента;
  • Доступный вывод сообщений в любой элемент верстки, изменение метода вывода должно изменяться просто и в одном месте;
  • Динамическая подставка css-классов (при ошибке или успешной отправке) для объекта, куда производится вывод сообщений;
  • Наглядная валидация остальных элементов формы, легкое их изменение;
  • Защита от многочисленного нажатия на кнопку отправки;
  • Передача данных в JSON формате;
  • Обработка события, если запрос не был доставлен до php скрипта;
  • Обработка события, если запрос был выполнен успешно, но скрипт вернул ошибку;
  • Легкость изменения под свои задачи;
  • Достаточное комментирование кода.

PHP:

  • Возможность отправки писем нескольким адресатам;
  • Возможность указывать в каком формате отправлять письма (hext/html);
  • Обработка ситуации, если JavaScript у браузера клиента был отключен (вывести понятное сообщение об успешной отправке или же ошибке);
  • Безопасная очистка входящих данных от html и спец. символов;
  • Валидация данных формы;
  • Корректное отображение HTML письма в различных почтовых клиентах;
  • Возврат результата в JSON формате;
  • Достаточное комментирование кода.

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

Скачать

  1. Большое спасибо!
    Наконец-то нашла хорошую удобную и простую форму :)
    Да ещё и код с комментариями!

Комментирование наглухо закрыто