форма обратной связи для сайта на html с php обработчиком
Делаем форму обратной связи на сайте
Говорят, что если программист может написать форму обратной связи, он может написать всё.
Форма обратной связи — древнейшее программистское искусство. Тут есть всё: форма с проверкой, приём запроса, обработка, безопасность, хранение и ответ. Это как Hello World, только для самых крутых.
В сегодняшней версии программы — только самые основы этого упражнения. В следующих частях мы прокачаем систему.
Смысл программы в том, что посетитель страницы заполняет нужные поля, пишет текст сообщения и нажимает кнопку «Отправить». На почту владельцу сайта приходит письмо с текстом сообщения и данными о том, кто это сообщение отправил.
Чтобы сделать у себя на сайте такое, нам понадобится:
Сервер для PHP
Для того, чтобы PHP-код исполнялся, нужен какой-то компьютер-исполнитель. Мы называем его сервером — то есть «раздающим». На сервере должна работать программа для PHP, которое отвечает за правильную обработку таких файлов.
Когда мы делали проект «Публикуем свою страницу в интернете», то уже использовали сервер (эту услугу нам предоставила хостинговая компания SpaceWeb). Этот же сервер мы можем использовать для нашей сегодняшней задачи, потому что он тоже умеет работать с PHP-файлами:
Готовим страницу с формой
Возьмём стандартный шаблон страницы и наполним его стилями и кодом для формы.
Пропишем CSS-стили, чтобы наша страница выглядела опрятно. Забежим немного вперёд и используем в стилях разделы input и textarea :
Чтобы сделать форму на странице, мы будем использовать такие теги:
— для ввода имени, почты для связи и темы письма. Они занимают одну строку, нам этого достаточно.
— здесь будут писать само сообщение, поэтому нужно будет сделать это поле побольше и пошире.
Ещё мы воспользуемся тегом
Пишем обработчик формы на PHP
Когда мы заполним и отправим форму на нашей странице, произойдёт следующее:
Логика работы PHP-программы будет такая:
Отправляем PHP-скрипт на сервер
Последнее, что осталось сделать — загрузить файл скрипта на сервер. Для этого сохраним его как post.php и загрузим по адресу mihailmaximov.ru/projects/mail/post.php. Если у вас ещё нет своего сервера, можете использовать этот скрипт для тестирования формы обратной связи.
Как загружать файлы, мы рассказывали в статье про публикацию сайта в Сети, поэтому просто сделаем всё по той инструкции:
Теперь, когда мы обновим HTML-страницу, заполним все поля и нажмём «Отправить», на указанную почту придёт письмо с нашим сообщением. Это значит, что форма работает, а мы с вами сделали очередной полезный проект!
Что дальше
Дальше как обычно — улучшаем.
Код простой формы обратной связи для сайта на HTML и PHP
Рассмотрим пример легкой и быстрой формы обратной связи для сайта написанной на html и php.
Почему используется HTML и PHP?
Форма связи на HTML просто вставляется в админке Joomla, WordPress, OpenCart, ModX, а если ваш сайт самонаписный или вы используете любой фреймворк на PHP, то использовать представленный код не составит труда и сайт будет загружаться так же быстро как и раньше.
Структура кода реализации обратной связи для сайта
Далее приведен алгоритм работы обратной связи:
В коде HTML содержится содержится информация, какие поля для ввода нужно заполнять, какие из них обязательны для заполнения, и подписи к ним. Стили CSS отвечает за визуальное оформление формы и отображение данных. При нажатии на кнопку «Отправить» выполняется PHP скрипт на сервере через POST запрос, который отправляет письмо или выполняет иное действие. Скачать исходники можно в конце статьи, а подробнее исходный код формы обратной связи разберем далее.
Код формы обратной связи на HTML
Вначале приведем исходный код простой формы обратной связи для сайта на HTML:
Рассмотрим атрибуты формы
Далее внутри тега находится контейнер
Обратите внимание, что имена полей формы должны быть уникальны на странице, так как через них передаются параметры формы. Различные трюки и фишки, связанные полями формы будут раскрыты в другой статье, которая сейчас готовится к выходу.
Отправка письма PHP скриптом
Приведем код простого скрипта для отправки письма
Простой скрипт обработки данных формы HTML в PHP скрипте
Приведем сначала исходный код:
проверяем или используется метод POST
Далее проверяем или были высланы данные с полей ввода
Функция strip_tags() удаляет HTML и PHP теги из строки. Делается для котого что бы злоумышленники не могли запустить свой код через форму связи.
Оформление формы обратного звонка для сайта CSS
Приведем код CSS оформления для формы обратной связи сайта.
Разберем подробнее код.
Подпись и поле ввода обернуты в контейнер div :
Для этого дива присвоим отступы сверху и снизу:
Кнопке «Отправить» делаем ширину равной ширине родительского блока и box-sizing присваиваем border-box — расчет ширины по границе, что бы она не выходила за пределы родительского блока:
Аналогично для подписей и полей ввода:
Настраиваем красивый внешний вид подписей и полей ввода:
Звездочку делаем красной:
Оформляем кнопку «Отправить» :
При наведении на кнопку настраиваем изменение цвета:
Скачать исходный код формы обратной связи
Для обучения вы можете скачать здесь исходные файлы примеров приведенные выше. Этот пример скорее для изучения и понимания как работает форма обратной связи на HTML в связке с PHP, а полноценный, рабочий пример будет выложен позже в другой статье.
Делаем форму обратной связи на PHP
Итак, давайте приступим, первым делом мы разметим страницу и пропишем для неё стили. Разметка будет включать в себя обычную форму обратной связи с двумя input (телефон, почта) и одной текстовой областью, куда, по нашей задумке, пользователь будет вводить своё сообщение. Обработчик формы разместим на отдельной странице.
В результате всех этих действий получится вот такая форма:
Теперь пришло время заняться сервером. Наш скрипт будет включать в себя несколько частей:
Все эти части, конечно, условные, так как нам никто не мешает сделать из кода кашу или наоборот вынести ключевые части в другие файлы. Но я думаю, обработчик лучше делать одним файлом, чтобы было удобно его подключать к другим проектам.
Настройка
Вспомогательные функции
Здесь опишем пять функций, которые упростят обработку данных.
Шаблоны вывода сообщений:
Очистка данных пришедших с формы:
И последняя функция, которая будет проверять телефон и почту на правильность записи их формата.
Как видите все написанные нами функции небольшого размера. Можно было их не выносить за приделы обработки данных, но, когда вам потребуется что-то изменить или расширить, например check_format(), это будет гораздо проще и удобнее.
Обработка пришедших данных
Первым делом мы узнаём, с какой страницы пришёл пользователь. Потом определяем переменные, в которых будут храниться наши сообщения и статус отправки письма.
Теперь, чтобы не возникло проблем с кодировкой, указываем её при помощи заголовка.
Далее пишем сам код обработки данных.
В написанном коде мы определяем, была ли отправлена форма, в противном случае закрываем этот файл при помощи функции exit. Далее проверяем наличие в массиве POST ячеек с нашими данными, если они пришли, чистим их от возможного мусора. После очистки проверяем форматы почты и телефона, а также наличие текста в переменной вопроса. Далее формируем письмо, отправляем и пишем логии, где, помимо данных, сохраняем статус отправки письма. Так мы сможем отследить работу функции mail() и одновременно не потерять данные.
Вывод сообщений
Нам осталось только оповестить пользователя об успешной или «не очень» выполненной операции и вернуть его обратно на сайт с формой. Для этого мы используем разметку с включениями PHP скрипта.
Для перенаправления пользователя обратно на сайт, мы воспользуемся метатегом refresh, где делаем вставки PHP кода уже с созданными переменными. Ещё нам потребуются немного использовать JavaScript, чтобы сделать страницу чуть динамичней. Пишем функцию timeBack(), которая будет в обратном порядке считать секунды до перенаправления.
PHP форма обратной связи
Вам нужна форма для обратной связи на сайте, но Вы не знаете, как ее сделать? Тогда этот урок специально для Вас.
Давайте начнем с простого. Нам понадобиться всего одна страница для формы, на которой будет находиться разметка формы, PHP для обработки и jQuery для проверки правильности введения данных в форму.
Шаг №1: создаем разметку формы
Шаг №2: придайте форме стиля
Шаг №3: проверьте форму с помощью jQuery
В самом начале мы уже подключили фреймворк jQuery в нашу страничку. Кроме этого нам необходимо еще подгрузить специальный плагин для проверки введеных данных и одну небольшую функцию. Все это выглядит так:
После этого нам необходимо внести некоторые коррективы в нашу форму. Если поле обязательное, необходимо добавить class=”required”. В случае с полем для ввода Email нам необходимо добавить class=”required email”. Вот измененный код формы:
После всех манипуляций у Вас должно получиться что-то наподобие этого:
Шаг №4: обработка и отправка формы
Настало время добавить немного PHP магии нашей форме. Поместите следующий код как можно выше в Вашем документе. Вы, наверное, спрашиваете себя, зачем нам проверять все поля формы еще раз с помощью PHP (ведь мы же уже проверили все с помощью jQuery)? Причина для этого есть, и она заключается в том, что даже если у Вашего посетителя будет отключен Javascript, он все равно сможет воспользоваться формой.
В коде есть комментарии, которые расскажут Вам что этот код делает. Также не забудьте поменять Email на свой (в примере указан name@yourdomain.com).
Вот и все! Теперь Вы знаете, как сделать форму обратной связи.
Единственный маленький недостаток: мне не удалось перевести на русский язык ошибки, которые всплывают, например, при введении неправильного Email. Дело в том, что эти сообщения находятся в зашифрованном виде в файле jquery.validate.pack.js. Если быть еще точнее, то они не зашифрованы, но разбросаны по всему файлу и при попытке внести коррективы возникают проблемы с кодировкой.
Если у меня получится это исправить, я обязательно напишу здесь :).
На сегодня все. Всем спасибо.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.raymondselda.com
Перевел: Максим Шкурупий
Урок создан: 9 Мая 2009
Просмотров: 287906
Правила перепечатки
5 последних уроков рубрики «PHP»
Фильтрация данных с помощью zend-filter
Когда речь идёт о безопасности веб-сайта, то фраза «фильтруйте всё, экранируйте всё» всегда будет актуальна. Сегодня поговорим о фильтрации данных.
Контекстное экранирование с помощью zend-escaper
Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак. В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.
Подключение Zend модулей к Expressive
Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение. В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.
Совет: отправка информации в Google Analytics через API
Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.
Подборка PHP песочниц
Подборка из нескольких видов PHP песочниц. На некоторых вы в режиме online сможете потестить свой код, но есть так же решения, которые можно внедрить на свой сайт.
Форма обратной связи html + css + php + jQuery + js
by Andrej — Category Веб-дизайнеру on 27/11/2018
Привет всем!
Хочу поделиться с вами готовой формой обратной связи для сайта, работающей на PHP, jQuery и имеющую некоторые бонусы, такие как встроенная защита от спама и запрет нажатия кнопки. Никаких особых умений вам не потребуется, достаточно будет знания основ html верстки и элементарной логики.
Так в конечном итоге будет выглядеть форма обратной связи
Давайте сразу рассмотрим все поля, которые будут вам доступны в этой форме.
Структура полей формы обратной связи
Особенности и возможности
Что входит в форму обратной связи?
Создание HTML разметки
И так, давайте посмотрим на разметку формы:
Вроде все. Едем дальше.
Оформление формы CSS/SCSS
Все поля формы стилизованы при помощи CSS flexbox (Flexible Box Layout Module) и разбиты на группы дополнительными классами. Разумеется, вы можете создать свои собственные стили. Если вы владеете CSS, то задать оформление для всех элементов формы сможете без проблем, тут даже не потребуется моя помощь.
Настройка PHP кода
Теперь переходим к обработчику формы, где все действия начинаются с зависимости от выбранного селектора — Бот/Человек.
Что здесь есть?
Здесь все. Едем дальше.
Дополнительные плюшки на js и jQuery
Ранее мы рассмотрели html шаблон формы, в котором видели добавленные id и функции у трех обязательных полей. Пришло время разобраться, для чего они были добавлены.
Посмотрите на js-код. Это блокиратор кнопки, который при disabled не дает посетителю нажать ее, прежде чем необходимые вам поля будут заполнены.
Как работает эта строка?
На этом все. Подключайте форму, тестируйте и пользуйтесь.
Если у вас остались вопросы, пишите в комментариях и не поскупитесь на оценку статьи. Заранее спасибо 🙂
Возможно Вас также заинтересует…
Представьте, что у вас на странице сайта есть форма обратной связи, для получения сообщений от…
Введение Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель…
Привет, дорогие читатели! Сегодня, я хочу поговорить о JSFiddle и разобрать вместе с вами этот…