Php обработка формы post. Простейшая форма отправки данных на почту при помощи HTML и PHP
Сегодня будем работать над созданием красивой HTML формы обратной связи для сайта, работающей на PHP и имеющею встроенную защиту от спама. Никаких особых знаний вам не потребуется, достаточно будет основ html и элементарной логики. Я дам готовые файлы, которые вы сможете вставить на сайт без изменений или скорректировать под свои нужды.
Недавно я делал статью о том, как сделать с помощью плагина Contact Form 7. Также просто можно сделать форму обратной связи на Joomla и других популярных CMS.
Но, что делать сайтам, которые не используют популярные CMS? – Остается делать все руками.
Кроме того, использование обратной связи без плагинов возможно и для WordPress. Лишние плагины создают немалую нагрузку на сервера и отказ от них позволяет ускорить работу сайта.
Заказать установку и настройку готовой формы за 500 рублей можно здесь (это для тех кому лень руками поработать или навыка недостаточно).
Принцип работы формы обратной связи на htmlНаша форма будет иметь 5 полей для ввода данных – имя, электронный адрес, телефон, адрес сайта, текст сообщения (вы сможете удалить или изменить их самостоятельно).
Все поля, кроме адреса веб сайта будут обязательны для заполнения (это вы тоже сможете настроить самостоятельно).
Для полей с email адресом и сайтом будет проводиться обязательная проверка правильности ввода данных.
Конечная форма связи будет иметь вот такой вид:
Для работы контактной формы, созданной на html, требуется 3 элемента.
Первый отвечает за структуру самой формы, за тип и количество полей ввода данных. Это обычный html код.
Второй отвечает за обработку данных, которые пользователь вводит в поля формы. Он определяет, что, куда и в каком виде пересылать, после того, как будет нажата кнопка отправки сообщения. Для реализации используется специальный PHP скрипт.
Третий отвечает за внешний вид. Устанавливает размеры и расположение полей ввода данных, добавляет различные цвета и эффекты. Это все задается CSS стилями.
Демо версия формы
Настройку каждого из этих элементов мы с вами разберем по шагам.
Создание HTML макетаЧтобы не делать статью слишком длинной и не добавлять отдельно каждый элемент, я приведу полный html код, а ниже опишу каждый блок и возможные изменения.
Для обозначения форм в html используется тег , внутри которого заполняются необходимые параметры.
Имя:
Email: Правильный формат "[email protected]"
Телефон: Правильный формат "+7-123-4567890"
Сайт: Правильный формат "http://someaddress.com"
Текст сообщения:
Отправить сообщение
Имя:
Email:
Телефон:
Правильный формат "+7-123-4567890" Сайт:
Правильный формат "http://someaddress.com" Текст сообщения:
Отправить сообщение
|
Начнем с первой строки.
class=”contact_form” – указываем класс, для того, чтобы в будущем задать CSS стили.
action=”contact-form.php” – указываем название файла со скриптом, который будет обрабатывать данные формы и осуществлять отправку сообщения. Если файл лежит в той же папке, что и страница с формой, то достаточно указать только название файла, если в другой, то нужно будет указать и путь к файлу.
Дальше идут 4 блока
Отвечающих за вывод полей для ввода данных, по названиям понятно, какой за что отвечает. Сами поля выводятся с помощью тегов , внутри которого задаются следующие характеристики:
Type – отвечает за тип вводимых данных, text – обычный текст, email – электронный адрес, такие поля автоматически проверяются на правильность (должна присутствовать @), tel – телефон, url – адрес сайта.
Name – собственное название самого элемента, оно необходимо, что скрипт знал как использовать данные каждого поля. Если вы сделаете несколько полей одного типа, то вам необходимо каждому полю присвоить свое name.
Placeholder – это подсказка, находящаяся внутри поля, текст, замещающий пустое поле элемента. Ее можно изменить или удалить, на работу формы она не влияет.
Required – этот параметр указывает на то, что поле обязательно для заполнения. Вы можете самостоятельно решить, какие элементы обязательны, а какие нет.
pattern=”(http|https)://.+” – эта конструкция служит для проверки корректности поля веб сайт, указывает на то, что адрес обязательно должен содержать http://текст или https://текст , в противном случае будет ошибка.
Для некоторых полей задана всплывающая подсказка, которая появляется при выборе элемента. Ее задет , где form_hint является классом элемента (его свойства прописываются в CSS). Текст во всплывающей подсказке для каждого поля контактной формы можно задать любой. Если такая фишка вам не нужна – просто удалите весь тег .
Поля для ввода самого сообщения размечается тегом , в котором cols задает количество символов поля в ширину, а rows число строк.
Защита от спама – невидимое поле с именем name=bezspama. У него стоит стиль display:none – это значит поле невидимо людям, но боты его будут заполнять на автомате.
И завершающий элемент любой формы – кнопка отправки сообщения, она задается тегом , имеющим свой класс для настройки внешнего вида и тип “submit”.
Для добавления или удаления полей, достаточно убрать ненужные или вставить новые по аналогии с существующими, прописав для них все свойства и имена.
Оформление CSS стилямиЕсли вы посмотрите в браузере на то, что получилось, то увидите нечто корявое и непривлекательное. Для того, чтобы у нас получилась красивая форма обратной связи, придется поработать над ее стилями (html будет недостаточно).
Если вы владеете CSS, то задать оформление для всех элементов формы сможете без проблем, тут даже не потребуется моя помощь.
Если же вы не знакомы со стилями, то я просто дам вам готовый файл, в котором уже все прописано таким образом, что ваша форма будет идентична той, что в примере.
Подключить стили можно двумя способами:
Подключаются файлы стилей следующим кодом , размещаемым внутри . Если файл со стилями (styles.css) находится не в одной папке с html страницей, то пропишите полный путь до него.
В файле со стилями, который я дал, каждый элемент подписан, поэтому, вы можете вносить в него любые изменения – менять цвета, размеры, форму, эффекты. Владея самыми базовыми знаниями, вы сможете легко его править.
Настройка PHP кода (добавлена защита от спама)Как и в случае со стилями, я дам вам готовый код, обрабатывающий HTML форму обратной связи и защищающий от спама. Этот файл адаптирован для конкретной конфигурации и, если вы захотите задать новые поля или удалить существующие, в него придется вносить изменения. Поэтому, я расскажу вам, как он работает, чтобы вы поняли, что нужно менять.
Для сайтов, использующих кодировку windows-1251 и версию php 5.4+, в код нужно будет внести дополнение, связанное с функцией htmlspecialchars. Покажу его ниже. Иначе, вместо кириллицы будут приходить пустые поля.
Помните, в свойствах формы (в html файле) мы указывали параметр action=”contact-form.php”. Вам нужно создать файл с названием contact-form.php и поместить в него находящийся ниже код.
Если мы сейчас откроем файл test.html , заполним поля формы и нажмём на кнопку, то попадём в файл action.php , где будет выведено сообщение. В данном случае браузер обращается к скрипту action.php и передает ему, через знак "?" все значения атрибутов name , расположенных внутри тегов , разделенных символом & . Обратите внимание, что подставляется вместо $_SERVER . Нашу задачу мы можем решить, разобрав строку QUERY_STRING с помощью стандартных функций по работе со строками в PHP, но лучше воспользоваться другим механизмом — это использование массива $_REQUEST . Все данные, которые получены из полей формы, PHP помещает в массив $_REQUEST, не зависимо от того, каким способом были переданы данные: POST или GET (узнать можно через $_SERVER["REQUEST_METHOD"] ). Напоминаю чем эти способы отличаются: Метод GET является открытым, метод POST является закрытым, т.е. они отличаются способом передачи параметров. Пример: 1) Если мы используем метод post: mysite.ru/request.php. Также, помимо массива $_REQUEST, PHP создаёт массивы $_GET и $_POST . Давайте теперь реализуем нашу задачу, на основе полученных знаний:
Если мы сейчас заполним форму и нажмём на кнопку, то увидим, что скрипт action.php приветствует нас по фамилии и имени. Всё работает корректно. Здесь всё хорошо, но если мы изменим название скрипта, то нужно будет вносить изменения в файл test.html . Давайте модифицируем файл action.php, так, чтобы, обращаясь к нему либо выводилась форма, когда мы ничего не отправили, либо приветствие, когда мы нажали кнопку:
Примечание
Последнее обновление: 1.11.2015 Одним из основных способов передачи данных веб-сайту является обработка форм. Формы представляют специальные элементы разметки HTML, которые содержат в себе различные элементы ввода - текстовые поля, кнопки и т.д. И с помощью данных форм мы можем ввести некоторые данные и отправить их на сервер. А сервер уже обрабатывает эти данные. Создание форм состоит из следующих аспектов: Создание элемента в разметке HTML Добавление в этот элемент одно или несколько поле ввода Установка метода передачи данных: GET или POST Установка адреса, на который будут отправляться введенные данные Итак, создадим новую форму. Для этого определим новый файл form.php , в которое поместим следующее содержимое:
Вход на сайт
Логин: Атрибут action="login.php" элемента form указывает, что данные формы будет обрабатывать скрипт login.php , который будет находиться с файлом form.php в одной папке. А атрибут method="POST" указывает, что в качестве метода передачи данных будет применяться метод POST. Теперь создадим файл login.php , который будет иметь следующее содержание:
Чтобы получить данные формы, используется глобальная переменная $_POST . Она представляет ассоциативный массив данных, переданных с помощью метода POST. Используя ключи, мы можем получить отправленные значения. Ключами в этом массиве являются значения атрибутов name у полей ввода формы. Так как атрибут name поля ввода логина имеет значение login (), то в массиве $_POST значение этого поля будет представлять ключ "login": $_POST["login"] И поскольку возможны ситуации, когда поле ввода будет не установлено, например, при прямом переходе к скрипту: http://localhost:8080/login.php . В этом случае желательно перед обработкой данных проверять их наличие с помощью функции isset() . И если переменная установлена, то функция isset() возвратит значение true . Теперь мы можем обратиться к форме: И по нажатию кнопки введенные данные методом POST будут отправлены скрипту login.php : Необязательно отправлять данные формы другому скрипту, можно данные формы обработать в том же файле формы. Для этого изменим файл form.php следующим образом:
Вход на сайт
Логин: Большое значение в PHP имеет организация безопасности данных. Рассмотрим несколько простых механизмов, которые могут повысить безопасность нашего веб-сайта. Но вначале возьмем форму из прошлой темы и попробуем ввести в нее некоторые данные. Например, введем в поле для логина "alert(hi);", а в поле для пароля текст "пароль": После отправки данных в html разметку будет внедрен код javascript, который выводит окно с сообщением. Чтобы избежать подобных проблем с безопасностью, следует применять функцию htmlentities() : If(isset($_POST["login"]) && isset($_POST["password"])){
$login=htmlentities($_POST["login"]);
$password = htmlentities($_POST["password"]);
echo "Ваш логин: $login И даже после ввода кода html или javascript все теги будут экранированы, и мы получим следующий вывод: Еще одна функция - функция strip_tags() позволяет полностью исключить теги html: If(isset($_POST["login"]) && isset($_POST["password"])){
$login=strip_tags($_POST["login"]);
$password = strip_tags($_POST["password"]);
echo "Ваш логин: $login Результатом ее работы при том же вводе будет следующий вывод. Популярное |
