1185

Быстрая форма обратной связи на PHP и jQuery

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

Сегодня мы найдем решение этой проблемы. Инструменты для этого — jQuery, PHP и класс PHPMailer.

ПримерСкачать исходники

HTML

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

feedback.html

Внутри body вы можете увидеть div #feedback. Он крепится в нижнему правому углу окна с помощью позиционирования fixed.

Внутри #feedback находятся 5 цветных элементов span.У каждого стоит ширина 20% и свойство float:left. Т.е. они полностью по ширине заполняют весь элемент div.

Кроме того, еще есть контейнер .section, в котором находятся заголовок, текстовая область и кнопка.

CSS

Переходя к стилям формы, стоит сказать пару слов о том, как структурирована таблица стилей. Как вы видите из кода ниже, каждый элемент начинается с #feedback. Этим кодом мы присваиваем все названия элементов родителю. Это нужно для того, чтобы в будущем не было конфликтов с другими наименованиями элементов на сайте.

styles.css – часть 1

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

В конце CSS правил определяется отображение элемента textarea.

styles.css – часть 2

Во второй части таблицы стилей мы назначаем стили для кнопки. Стоит обратить внимание, что у кнопки существует три состояния. Это состояние кнопки в состоянии покоя, когда на нее наводят мышкой(hover) и режим «работы», когда она нажата. Когда кнопка в таком режиме, то эффект hover дезактивируется.

jQuery

Форма обратной связи имеет два состояния: минимизирована и максимизирована. При загрузке, по умолчанию, она свернута в правом нижнем углу экрана браузера. Затем она разворачивается, если щелкнуть по заголовку мышкой. Все это построено на простых событиях и анимации, что и видно из кода, расположенного ниже.

script.js – часть 1

Чтобы оставить код чистым, мы перенесли проверку состояния наверх и создали объект anim, отвечающий за анимацию.

Вторая часть script.js содержит Ajax функционал, контактирующий с submit.php.

script.js – часть 2

Мы используем jQuery низкоуровневый Ajax метод – $.ajax(), для контактирования с submit.php. Этот метод обеспечивает больше контроля над соединением, чем $.get() и $.post() функции.

Например, одно из преимуществ видно в функции “complete”. Она вернет нужный статус, если будет ошибка 404 not found error. Таким образом можно вывести на экран сообщение об ошибке, напоминающее пользователю, чтобы он проверил путь submitURL.

И в конце PHP шаг.

PHP

PHP обрабатывает данные, принимает с помощью Ajax, проверяет и корректирует их и отправляет email сообщение на ваш электронный адрес.

submit.php

С помощью PHP мы управляем сессиями, чтобы отслеживать частоту отправлений сообщений от пользователя. Если частота превышает определенный порог, то пользователю показывается сообщение об ошибке.

Email сообщения отправляются с помощью класса PHPMailer. Он работает только на PHP5, так что вам нужно проверять версию PHP, если вы будете использовать этот скрипт.

Быстрая форма обратной связи полностью готова!


Оставить комментарий