Форма быстрой обратной связи на PHP и jQuery. PHP include уязвимость: от теории к практике
Привет, Друзья! Хочу представить вашему вниманию универсальный скрипт отправки данных из форм на email . Скрипт идеально подойдет для сайтов типа Landing Page , сайтов визиток и т.д. Наш скрипт Формы обратной связи выделяется среди массы остальных скриптов в интернете тем, что имеет возможность подключения неограниченного количества форм с разными полями на одной странице и способен отправлять письма нескольким получателям .
Итак. Давайте приступим. Начнем пожалуй с возможностей скрипта.
Скрипт работает на основе библиотеки , поэтому первое что нам необходимо сделать это подключить ее. Для этого рекомендую воспользоваться Google Hosted Libraries.
О остальных файлах давайте подробнее:
feedback.js
- основной файл скрипта, отвечает за AJAX отправку формы
.
jquery.arcticmodal.js,
jquery.arcticmodal.
- обеспечивают возможность вывода форм в модальном окне.
jquery.jgrowl.js,
jquery.jgrowl.css
- позволяют выводить уведомления на странице (блоки в верхнем углу страницы).
Обязательным атрибутом для всех элементов формы является атрибут name="" - необходим для последующей настройки формы.
Для кнопки (type=«button») обязательно нужно указать class=«feedback» . Так же хочу обратить ваше внимание на то, что в качестве кнопки может выступать любой html тег с классом «feedback».Вызов формы в модальном окнеДля вызова формы в модальном окне сперва нужно определить действие по нажатию на какой либо тег, например div с классом modal_btn
Вызов формы в модальном окне $(document).ready(function() { $(document).on("click", ".modal_btn", function(){ $("#small-modal").arcticmodal(); }); });
Так как форма должна быть видна только в модальном окне ее нужно скрыть, поместив в div с атрибутом style=«display: none;», а также для стилизации модального окна обернуть в парочку стандартных дивов.
x
Вот мы и разобрались с основными настройками подключения нашего скрипта отправки форм на E-mail. Давайте теперь заглянем во внутрь и разберемся с настройкой полей, уведомлений да и всего остального, что там есть.
Пример настроек для одной формыНастройки всех форм хранятся в файле feedback\index.php$form["form-1"] = array("fields" => array("name" => array("title" => "Имя", "validate" => array("preg" => "%%", "minlength" => "3", "maxlength" => "35",), "messages" => array("preg" => "Поле [ %1$s ] возможно содержит ошибку", "minlength" => "Минимальная длинна поля [ %1$s ] меньше допустимой - %2$s", "maxlength" => "Максимальная длинна поля [ %1$s ] превышает допустимую - %2$s",)), "tell" => array("title" => "Телефон", "validate" => array("preg" => "/^((8|\+)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{5,10}$/", "minlength" => "5",), "messages" => array("preg" => "Поле [ %1$s ] возможно содержит ошибку", "minlength" => "Минимальная длинна поля [ %1$s ] меньше допустимой - %2$s",)),), "cfg" => array("charset" => "utf-8", "subject" => "Тема письма", "title" => "Заголовок в теле письма", "ajax" => true, "validate" => true, "from_email" => "[email protected]", "from_name" => "noreply", "to_email" => "[email protected], [email protected]", "to_name" => "noreply1, noreply2", "geoip" => true, "referer" => true, "type" => "html", "tpl" => true, "antispam" => "email77", "antispamjs" => "address77", "okay" => "Сообщение отправлено - OK", "fuck" => "Сообщение отправлено - ERROR", "spam" => "Cпам робот", "notify" => "color-modal-textbox", "usepresuf" => false)); // Следующая форма $form["form-2"] = array("fields" => array(.....
Для добавления настроек новой формы, нужно по примеру массива $form["form-1"] создать новый массив $form[""]
Помните я говорил о обязательном атрибуте name=""
?
Так вот пришло время рассказать для чего же он все таки нужен.
name="" - это буквенно-цифровой ключ для массива, должен быть уникальным для массива $form[""]
Пример html кода для наглядности
Теперь давайте разберемся с массивами и для чего они нужны.
$form["form-1"] = array();
$form["form-2"] = array();
и т.д.
Это основные массивы для каждой новой формы, содержат в себе:
- "name" => array();
- Массив настроек элемента формы (например input name=«name» type=«text»
) который имеет ряд настроек.
- "title" => "Ваше имя" - название элемента формы, будет выводится при ошибках или в шаблоне
- "validate" => array();
- массив, содержит правила валидации элемента формы
- "preg" => "%%" - регулярное выражение
- "minlength" => "3" - минимальный размер поля
- "maxlength" => "35" - максимальный размер поля
- "substr" => "35" - всегда обрезать до N символов
- "messages" => array();
- массив, содержит сообщения валидации, а именно:
- "preg" => "Элемент формы не соответствует регулярному выражению"
- "minlength" => "Минимальная длинна поля [ %1$s ] меньше допустимой - %2$s" - ошибка валидации, ключ(preg) не соответствие ключу валидации
- "maxlength" => "Максимальная длинна поля [ %1$s ] превышает допустимую - %2$s" - ошибка валидации, ключ(preg) не соответствие ключу валидации
- "charset" => "utf-8" - кодировка
- "subject" => "Тема письма", - Тема письма
- "title" => "Заголовок в теле письма", - Заголовок в теле письма
- "ajax" => true, - это аякс форма TODO (если не нужно, поставить - false)
- "validate" => true, - (true) если хотим валидацию формы на сервере, заменяет js валидацию при "ajax" => true. Когда выкл(false) то можно не задавать настройки validate полей. TODO
- "from_email" => "myemail", - отправитель, указать имя поля(name=«myemail»), а если не нужно email от пользователя, тогда заглушку [email protected]
- "from_name" => "myname", - отправитель, указать имя поля(name=«myname»), а если не нужно имени пользователя, тогда заглушку No-reply
- "to_email" => "[email protected]", - email получателя. Для отправки на несколько адресов перечислить их через запятую. Пример ("to_email" => "[email protected], [email protected], [email protected]",)
- "to_name" => "noreply1", - Имя получателя. При отправке на несколько адресов через запятую перечислить имена получателей. Пример ("to_name" => "noreply1, noreply2, noreply3",)
- "geoip" => true, - узнать местоположение по типу TODO
- "referer" => false, - добавлять URL страницы с которой была отправлена форма
- "type" => "plain", - тип письма - plain, html (если используются html теги)
- "tpl" => false, - использовать шаблон письма. Если true, то будет подключен файл шаблона, в соответствии с именем формы (name=«form-1»), из папки и обработан файл (feedback/tpl/form-1.tpl), в противном случае будет отправлено все как есть, каждое поле с новой строки
- "antispam" => "email77", - Анти спам, метод основан на скрытом (display:none) поле, которое автоматом заполняет только робот, тем самым выдает себя.
- "antispamjs" => "address77", - Анти спам, метод основан на скрытом (display:none) поле, изначально заполненное, которое автоматически очищает javascript при загрузке страницы, даже умный робот не может это предвидеть, и тогда он блокируется.
- "okay" => "Сообщение пользователю", - Сообщение пользователю, выводится при условии успешно отправленной формы, можно использовать html теги.
- "fuck" => "Сообщение пользователю", - Сообщение пользователю, выводится при возникновении ошибки отправки формы, можно использовать html теги.
- "spam" => "Сообщение пользователю", - Сообщение пользователю, выводится при подозрении на спам робот, можно использовать html теги.
- "notify" => "color-modal", - какой тип уведомлений показывать, textbox - блоки в верхнем углу страницы, color - цветная подсветка в форме, modal - модальное окно в центре страницы, none - отключить. Можно совмещать, пример: color-modal - ошибки заполнения подсветкой полей, а текстовый статус отправки в модальном окне TODO
- "usepresuf" => false - Используется ли кастомное добавление к теме либо к заголовку письма, на случай не большого изменения можно указать например %%cfg.title.suffix%%, для этого в форме должно быть скрытое поле, подробнее, см. ф-цю presuf()
Во-первых, для того, что-бы форма была отправлена в шаблоне, в настройках формы нужно включить использование файла шаблона - "tpl" => true ,
Во-вторых, нужно создать файл шаблона с расширением *.tpl в папке (feedback/tpl/ ), в соответствии с именем формы (name=«form-1» ).
Пример: (feedback/tpl/form-1.tpl
)
| Заголовок в теле письма | |
| %%name.title%% | %%name.value%% |
| %%tell.title%% | %%tell.value%% |
name
, tell
и т.д. - Это атрибуты (name="") полей которые заполняет пользователь.
title
- Название элемента формы, которое задается в массиве настроек элементов формы.
value
- Значение элемента формы.
На сегодня пока все, но скрипт конечно же не идеален, так что комментарии и описания багов приветствуются и в следующих версиях будут исправлены.
P.S. Скрипт разработан командой
Не секрет, что очень часто приходится как-то общаться с посетителями своего сайта. Разумеется, можно просто дать свой e-mail (как сделал я), а можно предложить и другой способ - это форма обратной связи . Разумеется, здесь потребуется знание PHP . Но чтобы Вам не надо было писать всё с нуля, я предоставляю Вам очень даже хороший скрипт формы обратной связи .
После скачивания извлекайте архив на Ваш сайт (смотрите, ничего не сотрите у себя). Теперь давайте его настроим. Для этого открываем файл "config.php ". И меняем значения следующих переменных:
Теперь Вы можете запустить файл index.php у скрипта. В результате, перед Вами возникнет форма. Можете её заполнить и отправить письмо.
Теперь встаёт вопрос: "Как вставить эту форму обратной связи на свой сайт? ". Чтобы это сделать, найдите файл, который отвечает у Вас за страницу обратной связи (пусть это будет "feedback.html "). Сразу измените расширение на php (то есть на "feedback.php "). Скопируйте код из index.php скрипта в файл со страницей обратной связи (feedback.php ). Теперь Вы можете делать всё, что пожелаете нужным между тегами и , только не стирайте то, что Вы вставили из index.php . То что между тегов тоже не трогайте, если точно не знаете, что делаете.
И, наконец, если Вам не нравится внешний вид формы, то Вы можете его подкорректировать в файле "styling.css ".
Если у Вас остались какие-либо вопросы, либо происходят какие-то глюки со скриптом (я его не тестировал), то пишите мне на e-mail , чтобы я исправил.
Чтобы не зависеть от работы чужих скриптов, научитесь их создавать самостоятельно. Этому Вас научит мой Видеокурс "PHP и MySQL с Нуля до Гуру ":
На этом уроке мы познакомимся с функцией mail () , на примере создания формы обратной связи на PHP с последующей отправкой полученных данных на почту.
Для этого создадим два файла - forma.php и mail.php . В первом файлике будет находиться только форма с полями для ввода пользователем данных. Внутри тега form - кнопка "Отправить" и атрибут action , который ссылается на обработчик - mail.php , именно к нему обращаются данные из формы при нажатии кнопки "Отправить" . В нашем примере данные формы отправляются на веб-страницу с названием «/mail.php» . На этой странице прописан скрипт на PHP , который обрабатывает данные формы:
Данные формы отправляются методом POST (обрабатывается как $ _POST ). $ _POST - это массив переменных, переданных текущему скрипту через метод POST .
Ниже вы видите содержимое файла forma.php , поля которой заполняет сам пользователь на каком-нибудь веб-сайте. Все поля для ввода данных обязательно должны иметь атрибут name , значения мы прописываем сами, исходя из логики.
Форма обратной связи на PHP с отправкой на почту
Форма обратной связи на PHP
Оставьте сообщение:
Ваше имя:
E-mail:
Номер телефона:
Сообщение:
Текстовая область может содержать неограниченное количество символов-->
Так форма визуально выглядет в браузере.
Далее пишем код для файла mail.php . Придумываем сами имена для переменных. В PHP переменная начинается со знака $ , а затем имя переменной. Текстовое значение переменной заключается в кавычки. С помощью переменных на емайл администратора передается содержимое формы, просто подставив в квадратные скобки имя элемента формы - значение name .
Таким образом данные из массива $_POST будут переданы соответствующим переменным и отправлены на почту при помощи функции mail . Давайте заполним нашу форму и нажмем кнопку отправить. Не забудьте указать ваш е-майл. Письмо пришло моментально.
Почти на каждом сайте есть форма обратной связи. И конечно же различных реализаций очень много. В этой статье мы напишем форму обратной связи, в которой будет использоваться HTML5 валидация, всплывающие оповещения со звуком. Ну и конечно сам запрос будет отправляться с помощью ajax. К тому же пример будет предусматривать два варианта обработки запроса: через ajax и обычным POST запросом. В случае POST запроса будут использоваться flash сообщения, основанные на сессии. Подробнее под катом…
Итак, наш проект будет имееть следующую структуру:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | . ├── css │ ├── jquery.jgrowl.css │ ├── main.css │ └── normalize.css ├── images │ └── jgrowl.close.png ├── protected │ ├── bootstrap.php │ ├── flashes.php │ ├── func.php │ └── session.php ├── sounds │ ├── notice.mp3 │ └── notice.ogg ├── feedback.php └── index.php |
В файле index.php будет находиться форма обратной связи. После заполнения формы и нажатия пользователем кнопки отправить, будет отправляться ajax запрос на скрипт feedback.php . Который в свою очередь, обработав запрос, будет возвращать результат. Тут есть нюанс. Скрипт проверяет какой пришел запрос и в зависимости от этого, или возвращает результат в виде json или записывает flash сообщение в сессию с последующим перенаправлением обратно на index.php. То есть в случае каких либо ошибок в javascript запрос все равно будет обрабатываться путем простого POST запроса. Да и программист в таком случае имеет гибкий инструмент, который позволяет всегда отказаться от ajax.
Flash сообщения это вид данных в сессии, который стирается после их первого востребования. Является очень удобным инструментом для передачи сообщений между запросами.
Чтобы не усложнять верстку, а также унифицировать извещения для пользователя, в примере используются всплывающие growl сообщения на подобии, что применяются в OSX. Для этого используется хороший jQuery плагин jGrowl , который имеет гибкую систему настройки и стилизации.
Итак, начнем с HTML:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | Форма обратной связи Обратная связь Имя: Адресс эл.почты: Сообщение: Отправить //some code |
Как видно из приведенного кода выше. В примере не используется . Просто для таких вещей это вовсе не обязательно. Все равно данные будут проходить валидацию на сервере.
JavaScript :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | $(document) .ready (function () { buzz.defaults .formats = [ "ogg" , "mp3" ] ; buzz.defaults .preload = true ; if (buzz.isSupported () ) { var noticeSound = new buzz.sound ("sounds/notice" ) ; } $.jGrowl .defaults .position = "top-right" ; $.jGrowl .defaults .closer = false ; $.jGrowl .defaults .beforeOpen = function (e, m, o) { if (noticeSound) noticeSound.play () ; } ; $("form#feedback-form" ) .on ("submit" , function (e) { e.preventDefault () ; $(this ) .ajaxSubmit ({ dataType: "json" , success: function (response) { $.jGrowl (response.message , { theme: response.type } ) ; if (response.type == "success" ) $("form#feedback-form" ) [ 0 ] .reset () ; } , error: function () { $("form#feedback-form" ) .unbind ("submit" ) .submit () ; } } ) } ) ; } ) ; |
Код выше предельно понятен. Настройка вывода уведомлений и проигрывания звука. А также реализация работы формы через без перезагрузки страницы при помощи библиотеки ajaxForm .
Теперь преступим к реализации обработки запросов:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | //feedback.php require __DIR__ . "/protected/bootstrap.php" ; if (! IS_POST() ) { stopAndResponseMessage( "error" , "Скрипт принимает только POST запросы!" ) ; } $name = _POST("name" ) ; $email = _POST("email" , false ) ; $message = _POST("message" ) ; if (! $name || ! $email || ! $message ) { stopAndResponseMessage( "error" , "Не все обязательные поля были заполнены!" ) ; } // check captcha and csrf token if (! isEmail($email ) ) { stopAndResponseMessage( "error" , "Адрес эл. почты плохой!" ) ; } if (mb_strlen ($message ) _e($type ) , "message" => _e($message ) ) ) ; exit ; } Flashes:: add (_e($type ) , _e($message ) ) ; stopAndRedirect("index.php" ) ; } |
Самое важное место в скрипте это функция stopAndResponseMessage, которая и является гибгим механизмом обработки запроса. Она возвращает json ответ в случае ajax запроса или использует flash сообщения при простом POST запросе. На данном этапе может быть не понятно как реализованы flash сообщения. Но так как статья уже довольно таки большая, разобраться в этом вопросе читателю предстоит самостоятельно. Используя исходные коды конечно же. Все реализованно в файле protected/flashes.php .
