AJAX форма обратной связи

Форма обратной связи для htm сайта и не только

Понравилась статья? Оставьте оценку:

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)

О модуле

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

Установка скриптов

Для установки скопируйте файлы из архива в корень сайта. Для работы необходима библиотека jQuery. Подключим скрипты:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="default.js"></script>

Далее откройте demo_form.html и настройте обработчики для своих инпутов (в своей форме) как в примере.  Для кнопки должен быть назначен обработчик

onclick="event.preventDefault(); sendAjax(this);"

для инпутов, которые будут валидироваться (проверяться) должен быть назначен обработчик по фокусу убирающий ошибку onFocus="removeError(this);"

Далее контейнеру, в который будет приходить сообщение об успешной/неуспешной отправке необходимо назначить класс class="container-resp"

Далее открываем файлик sendmessage.php и редактируем там переменную $sendto   = "admin_mail@exemple.ru";(прописываем нужный емайл, на которую будем получать почту), и остальные поля. label, заголовки письма итд. В принципе для человека, сталкивавшегося с отправкой почты — ничего сложного. Данный скрипт отправки форм можно очень просто поправить «под себя» — то есть практически для любой формы, поэтому он позиционируется скорее «для разработчика», чем для конечного пользователя.

Стили формы специально не заданы — вы можете в вашем шаблоне прописать любые CSS правила. Не забудьте для input.error прописать отличные правила. Например

input.error{ border-color: red; color: red; }

Рекомендации

Рекомендуется использовать форма обратной связи для сайтов, написанных на html, но в принципе нет никаких сложностей прикрутить это к любой CMS. (вопрос, скорее необходимости).

Если на сайте используются другие пути (то есть скрипты лежат в подкаталоге /js например) то необходимо исправить путь в файлике default.js