Связь пользователей с администратором является весьма важной частью каждого сайта. К сожалению, на многих веб сайтах возможность отправить сообщение разработчикам либо вообще не предоставляется, либо связана с достаточно серьезными трудностями. Сегодня мы сделаем простое решение данной задачи. Используя jQuery, PHP и класс PHPMailer форма посылает предложение пользователя прямо в ваш почтовый ящик. Форма обратной связи будет скрыта внизу страницы и легко вызываться нажатием на весьма заметный ярлык..

 при этом происходит плавная анимация появления данной формы. Для начала мы начнем с разметки HTML. Стили включаются вверху документа, а файлы JavaScript — внизу. Таким образом оптимизируется процесс загрузки страницы, так скрипты грузятся последними, позволяя пользователю увидеть содержание страницы:

Внутри body находится div #feedback. Он размещен внизу справа в окне с помощью фиксированного позиционирования, что будет видно в разделе урока, посвященного CSS.

Внутри данного div размещаются пять цветных элементов span. Каждый из них имеет 20% ширины и смещается влево. Таким образом, они размещаются точно на по всей ширине div #feedback. Перейдем к заданию стилей для формы. Для начала скажем несколько слов о том, из чего состоит структура таблицы стилей. Если взглянуть на определения CSS, представленные ниже, то можно заметить что каждое правило начинается с #feedback.

Первый элемент, для которого задается стиль — это div  #feedback. Ему назначается фиксированная позиция и привязка к окну браузера. После него идет определение для div.section и пяти цветных элементов span. Данные элементы отличаются только цветом фона, который назначается отдельно для каждого класса.

Во второй части таблицы стилей определяется вид кнопки отправки. Отметим, что существует три состояния кнопки, изображения для которых содержатся в одном файле для фонового рисунка – submit.png . Они выводятся только когда необходимо.

Форма обратной связи имеет два состояния — минимизированной и максимальное. При загрузке по умолчанию устанавливается минимизированное состояние внизу справа на экране. А jQuery переводит форму в максимальное состояние, когда пользователь нажимает кнопку мыши на заголовке.

Для того, чтобы код был простым и понятным, вверху создается объект anim, который содержит значения для анимации, и размещается оператор  if. В зависимости ото существования класса ‘down‘ на стрелке , мы разворачиваем или сворачиваем форму. Вторая часть script.js обрабатывает работу с AJAX с submit.php.

Мы используем метод jQuery для AJAX $.ajax() для взаимодействия с submit.php. Данный метод дает немного больше контроля над соединением, чем $.get() и $.post(). Одним из преимуществ метода является видимость свойств объекта во «всей» возвратной функции. Здесь мы проверяем статус ответа на соответствие ошибке 404 (не найдена страница), и выводим сообщение пользователю с просьбой проверить путь submitURL.

E-mail отправляется с помощью класса  PHPMailer. Внимание! Он работает только с PHP5. Несколько методов PHPMailer используется для конфигурации исходящего e-mail. МетодIsMail() указывает классу использовать внутреннюю функцию PHP mail(). Метод AddAddress()добавляет адрес получателя (вы можете добавить более одного получателя с помощью дополнительных вызовов данного метода). Вот и все! Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.