Одной из самых востребованных функций на сайте является форма заявки или заказа, данные из которой отправляются на почту владельцу сайта. Как правило такие формы являются простыми и состоят из двух трех полей для ввода данных. Как же создать такую форму заказа? Здесь потребуется использование языка разметки HTML и языка программирования PHP.
Язык разметки HTML сам по себе несложен, нужно всего лишь разобраться в том как и где ставить те или иные теги. С языком программирования PHP все немного сложнее.
Для программиста создать такую форму не составит труда, а вот HTML верстальщику может показаться сложным некоторые действия.
Создаем форму отправки данных в html
Первая строка будет следующей
Теперь соберем все вместе.
Теперь сделаем так, чтобы поля в форме стали обязательными для заполнения. Имеем следующий код:
Создаем файл, принимающий данные из HTML формы
Это будет файл с именем send.php
В файле на первом этапе нужно принять данные из пост массива. Для этого создаем две переменные:
$fio = $_POST["fio"];
$email = $_POST["email"];
Перед названиями переменных в php ставиться знак $, в конце каждой строки ставиться точка с запятой. $_POST это массив в который передаются данный из формы. В форме html при этом указан метод отправки method="post". Так, приняты две переменные из формы html. Для целей защиты своего сайта нужно провести эти переменные через несколько фильтров - функций php.
Первая функция преобразует все символы, которые пользователь попытается добавить в форму:
При этом новые переменные в php не создаются, а используются уже имеющиеся. Что сделает фильтр, он преобразует символ "<" в "<". Также он поступить с другими символами, встречающимися в html коде.
Вторая функция декодирует url, если пользователь попытается его добавить в форму.
$fio = urldecode($fio);
$email = urldecode($email);
Третей функцией мы удалим пробелы с начала и конца строки, если таковые имеются:
$fio = trim($fio);
$email = trim($email);
Существуют и другие функции, позволяющие отфильтровать переменные php. Их использование зависит от того, насколько вы опасаетесь того, что злоумышленник попытается добавить программный код в данную форму отправки данных на почту html.
Проверка данных, передаваемых от HTML формы в файл PHP
Для того, чотбы проверить, работает ли этот код, передаются ли данные можно просто их вывести на экран при помощи функции echo:
echo $fio;
echo "
";
echo $fio;
Вторая строка здесь нужна для того, чтобы разделить вывод переменных php на разные строки.
Отправляем полученные данные из формы HTML на почту при помощи PHP
Для отправки данных на почту нужно воспользоваться функцией mail в PHP.
mail("на какой адрес отправить", "тема письма", "Сообщение (тело письма)","From: с какого email отправляется письмо \r\n");
Например, нужно отправить данные на email владельца сайта или менеджера [email protected].
Тема письма должна быть понятной, а сообщение письма должно содержать то, что указал пользователь в HTML форме.
mail("[email protected]", "Заявка с сайта", "ФИО:".$fio.". E-mail: ".$email ,"From: [email protected] \r\n");
Необходимо добавить условие, которе проверит отправилась ли форма при помощи PHP на указанные адрес электронной почты.
if (mail("[email protected]", "Заказ с сайта", "ФИО:".$fio.". E-mail: ".$email ,"From: [email protected] \r\n"))
{
echo "сообщение успешно отправлено";
} else {
}
Таким образом программный код файла send.php, который отправит данные HTML формы на почту будет выглядеть следующим образом:
$fio = $_POST["fio"];
$email = $_POST["email"];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$email = urldecode($email);
$fio = trim($fio);
$email = trim($email);
//echo $fio;
//echo "
";
//echo $email;
if (mail("[email protected]", "Заявка с сайта", "ФИО:".$fio.". E-mail: ".$email ,"From: [email protected] \r\n"))
{ echo "сообщение успешно отправлено";
} else {
echo "при отправке сообщения возникли ошибки";
}?>
Три строки для проверки, передаются ли данные в файл закомментированы. При необходимости их можно удалить, так как они нужны были только для отладки.
Помещаем HTML и PHP код отправки формы в один файл
В комментариях к этой статье многие задают вопрос о том, как сделать, чтобы и HTML форма и PHP код отправки данных на почту находились в одном файле, а не двух.
Для реализации такой работы нужно поместить HTML код формы в файл send.php и добавить условие, которое будет проверять наличие переменных в массиве POST (этот массив передается из формы). То есть, если переменные в массиве не существуют, то нужно показать пользователю форму. Иначе нужно принять данные из массива и отправить их адресату.
Давайте посмотрим как изменить PHP код в файле send.php:
//проверяем, существуют ли переменные в массиве POST
if(!isset($_POST["fio"]) and !isset($_POST["email"])){
?> } else {
//показываем форму
$fio = $_POST["fio"];
$email = $_POST["email"];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$email = urldecode($email);
$fio = trim($fio);
$email = trim($email);
if (mail("[email protected]", "Заявка с сайта", "ФИО:".$fio.". E-mail: ".$email ,"From: [email protected] \r\n")){
echo "Сообщение успешно отправлено";
} else {
echo "При отправке сообщения возникли ошибки";
}
}
?>
Существование переменной в POST массиве мы проверяем PHP функцией isset(). Восклицательный знак перед этой функцией в условии означает отрицание. То есть, если переменной не существует, то нужно показать нашу форму. Если бы я не поставил восклицательный знак, то условие дословно означало бы - "если существует, то показать форму". А это неправильно в нашем случае. Естественно, что вы можете переименовать его в index.php. Если будуту переименовывать файл, то не забудьте переименовать название файла и в строке
, внутри которого заполняются необходимые параметры.Начнем с первой строки.
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). Текст во всплывающей подсказке для каждого поля контактной формы можно задать любой. Если такая фишка вам не нужна – просто удалите весь тег .
Поля для ввода самого сообщения размечается тегом
Защита от спама – невидимое поле с именем name=bezspama. У него стоит стиль display:none – это значит поле невидимо людям, но боты его будут заполнять на автомате.
И завершающий элемент любой формы – кнопка отправки сообщения, она задается тегом , имеющим свой класс для настройки внешнего вида и тип “submit”.
Для добавления или удаления полей, достаточно убрать ненужные или вставить новые по аналогии с существующими, прописав для них все свойства и имена.
Оформление CSS стилями
Если вы посмотрите в браузере на то, что получилось, то увидите нечто корявое и непривлекательное. Для того, чтобы у нас получилась красивая форма обратной связи, придется поработать над ее стилями (html будет недостаточно).
Если вы владеете CSS, то задать оформление для всех элементов формы сможете без проблем, тут даже не потребуется моя помощь.
Если же вы не знакомы со стилями, то я просто дам вам готовый файл, в котором уже все прописано таким образом, что ваша форма будет идентична той, что в примере.
Подключить стили можно двумя способами:
- Скопировать содержимое файла в файл style.css, который уже есть на вашем сайте (добавьте в самый конец)
- Поместить файл, который я дал, на ваш хостинг и подключить его.
Подключаются файлы стилей следующим кодом , размещаемым внутри
. Если файл со стилями (styles.css) находится не в одной папке с html страницей, то пропишите полный путь до него.В файле со стилями, который я дал, каждый элемент подписан, поэтому, вы можете вносить в него любые изменения – менять цвета, размеры, форму, эффекты. Владея самыми базовыми знаниями, вы сможете легко его править.
Настройка PHP кода (добавлена защита от спама)
Как и в случае со стилями, я дам вам готовый код, обрабатывающий HTML форму обратной связи и защищающий от спама. Этот файл адаптирован для конкретной конфигурации и, если вы захотите задать новые поля или удалить существующие, в него придется вносить изменения. Поэтому, я расскажу вам, как он работает, чтобы вы поняли, что нужно менять.
Для сайтов, использующих кодировку windows-1251 и версию php 5.4+, в код нужно будет внести дополнение, связанное с функцией htmlspecialchars. Покажу его ниже. Иначе, вместо кириллицы будут приходить пустые поля.
Помните, в свойствах формы (в html файле) мы указывали параметр action=”contact-form.php”. Вам нужно создать файл с названием contact-form.php и поместить в него находящийся ниже код.
\r\n Reply-To: $email \r\n"; if (mail($address, $sub, $mes, $from)) { header("Refresh: 5; URL=https://сайт"); echo "
";} else { header("Refresh: 5; URL=https://сайт"); echo " ";} } exit; /* Выход без сообщения, если поле bezspama заполнено спам ботами */ ?>/* Задаем переменные */ $name = htmlspecialchars ($_POST [ "name" ] ) ; $email = htmlspecialchars ($_POST [ "email" ] ) ; $tel = htmlspecialchars ($_POST [ "tel" ] ) ; $website = htmlspecialchars ($_POST [ "website" ] ) ; $message = htmlspecialchars ($_POST [ "message" ] ) ; $bezspama = htmlspecialchars ($_POST [ "bezspama" ] ) ; /* Ваш адрес и тема сообщения */ $sub = "Сообщение с сайта ХХХ" ; /* Формат письма */ $mes = "Сообщение с сайта ХХХ.\n Имя отправителя: $name Электронный адрес отправителя: $email Телефон отправителя: $tel Сайт отправителя: $website Текст сообщения: $message" ; if (empty ($bezspama ) ) /* Оценка поля bezspama - должно быть пустым*/ /* Отправляем сообщение, используя mail() функцию */ $from = "From: $name <$email> \r\n Reply-To: $email \r\n" ; if (mail ($address , $sub , $mes , $from ) ) { header () ; echo "
Письмо отправлено, через 5 секунд вы вернетесь на страницу XXX" ; } else { header ("Refresh: 5; URL=https://сайт" ) ; echo "
Письмо не отправлено, через 5 секунд вы вернетесь на страницу YYY" ; } exit ; /* Выход без сообщения, если поле bezspama заполнено спам ботами */ |
Первым делом нам необходимо задать переменные, которые будут обрабатываться php кодом. Для того, чтобы не запутаться, присваиваем им такие же имена, как были в самой форме, только начинаются все переменные со знака $. Сама команда присвоения значения имеет такой вид:
$название = htmlspecialchars($_POST["название"]);
$ название= htmlspecialchars ($ _POST [ "название" ] ) ; |
Если вы добавляли какие-то дополнительные поля данных, то в блоке переменных допишите их имена.
Не все переменные мы берем из формы. Как минимум, адрес электронной почты, на который придет письмо (ваш адрес) указывается отдельно. В данном случае это переменная $address – впишите в ее значение свой электронный ящик.
Также, в данном примере явным образом задано значение переменной $sub – она будет выдавать тему письма. Можно добавить тему сообщения в HTML форму в виде текстового поля (наподобие name), и брать значение этой переменной оттуда.
В блоке формат письма настраивается то сообщение, которое получите вы. Он может отличаться от того, что было написано в поле textarea под названием message. Я просто сделал еще одну переменную $mes и включил в нее дополнительный текст и важные данные отправителя (имя, почту, телефон, сайт). Эту часть вы можете сконфигурировать так, как вам удобно.
Чтобы получаемые вами письма подписывались именем отправителя, и в них включался их обратный адрес, а не адрес сервера, на котором находится ваш php файл, мы задаем новую переменную $from, в нее включаем имя и электронный ящик отправителя письма.
Затем функция mail осуществляет отправку письма по заданным параметрам. В случае успешной отправки появляется сообщение о том, что письмо отправлено, а через 5 секунд пользователя перебрасывает на страницу вашего сайта (адрес страницы и время задержки вы можете изменить). Если письмо отправить не удалось, появляется сообщение, что письмо не отправлено и через 5 секунд идет переход на страницу сайта, аналогичным образом вы можете задать адрес страницы и время.
Вставка формы на страницу сайта
Для того, чтобы вставить созданную вами форму обратной связи, вам нужно скопировать html код формы и вставить его в ту часть кода страницы, где вы хотите вывести обратную связь для сайта.
Еще раз хочу напомнить, если файл с PHP программой находятся не в той же папке, что и страница, на которой размещен html код, то в коде самой формы нужно прописать полный путь к нему, иначе, работать не будет, так как форма не найдет файл обработчик.
Скачать файлы контактной формы
Активный анти спам с вводом данных в поле
Спамеры действуют с помощью различных программных средств и некоторые боты умеют обходить защиту с пустым полем, которая встроена в базовую версию. Если они вас начинают донимать, то можно применить вместо или дополнительно простую защиту со вводом данных в специальное поле. Например, сделать математическое выражение с просьбой ввести ответ или задать какой-либо простой вопрос. Больших изменений в форме это не потребует.
Я покажу как изменить код формы и PHP обработчик для использования этого метода антиспама. При желании вы можете не менять защиту с пустым полем, а добавить соответствующие строки в код и у вас будет работать одновременно 2 метода – по идее, должно быть более эффективно.
Первым делом нам необходимо добавить поле для ввода и вопрос в HTML код. В качестве основы у нас уже есть строка 25 (input name = “bezspama” ). Это поле невидимо. Мы превращаем его в обычное. Для этого всю строку меняем на вот такой блок:
|
Вместо математического выражения 2+2*2 можете ввести любые данные – это визуальный вопрос для пользователя. Из поля input мы убрали стиль display:none и добавили обязательность заполнения.
Следующим шагом меняем данные в PHP обработчике, чтобы он делал проверку уже не на пустоту этого поля, а на правильность введенных данных. Проверка у нас делалась в строке 25 выражением empty ($bezspama ) . Мы меняем это выражение и будем делать проверку равенства заполненного поля заранее заданному числу. В моем примере, математическое выражение равно 6, поэтому вся строка будет выглядеть вот так.
Трудно сейчас представить сайт без формы для обратной связи.
Поэтому если на вашем ресурсе контактного раздела нет — стоит его установить. Разберемся, как это сделать.
Решения для организации обратной связи
Естественно, что сейчас существует несколько способов организации обратной связи на сайте: от универсальных скриптов на php до плагинов и модулей для CMS. То есть, необходимости писать код вручную, как видите, нет.
Можно воспользоваться следующими универсальными решениями:
- прибегнуть к услугам бесплатных онлайн-сервисов, которые автоматически генерируют код HTML формы связи. Но при этом файл обработки php нужно будет писать и ставить самостоятельно. Вот один из ресурсов для этих целей
- Обратиться к помощи бесплатных онлайн-сервисов, генерирующих код HTML и предоставляющих обработчики данных на php, которые зачастую размещаются на серверах этих сервисов. Один из примеров подобных ресурсов
- Найти в Интернете бесплатные скрипты для установки формы обратной связи. Этот вариант применим для людей, знающих на определенном уровне HTML и PHP, ведь скрипт в любом случае придется адаптировать конкретно под свой сайт.
Тем не менее, расширенных знаний по сайтопостроению от пользователей зачастую не требуется — универсальность и широкий выбор решений позволяют установить желаемую форму обратной связи любым из вышеизложенных способов.
Простая установка форм обратной связи в HTML
Рассмотрим одну из популярных программ для написания и установки HTML-форм обратной связи с капчей. Широкий их выбор представлен, например, на этом сайте . Сайт русскоязычный, определиться с выбором будет просто, а сама установка займет не более трех минут.
Но для начала следует не забыть внести поправки в стандартный файл config.php — нужно изменить кодировку и написать верный электронный адрес получателя.
Папку с исправленными файлами нужно скопировать в корневой каталог сайта, но перед этим ограничив ее индексацию в файле Robots.txt (Disallow: /sendmail-zakaz ).
По сути, это все — если действия выполнены правильно, готовая форма будет выглядеть так:
Существуют конструкторы форм обратной связи, не требующие поддержки РНР. Рассмотрим один из них. После перехода по ссылке вы увидите окно, внося настройки в которое, можно создать желаемую форму.
После того, как все необходимые параметры внесены, следует ввести проверочную капчу и нажать на кнопку «Генерировать», а после — «Получить код».
Полученный код нужно просто скопировать на выбранную страницу сайта.
Можно сделать простую контактную форму собственноручно. Для этого нужно создать файл form.php и сохранить в нем следующий код:
Для функционирования формы нужен файл-обработчик. Назовем его mail.php и сохраним в такой код:
Форма обратной связи в Joomla
В этой довольно универсальной системе управления форму обратной связи можно настроить с помощью компонента «Контакты». Он довольно простой, но тем не менее его функциональности вполне хватает для нормальной работы формы.
Итак, для настройки компонента заходим в административную панель и выбираем вкладку «Компоненты/Контакты/Категории контактов».
Откроется страница, на которой не будет ни одной категории. Чтобы создать ее, нажмем на кнопку «Новый».
Система предложит заполнить поля «Заголовок» и «Псевдоним». Сделав это, нужно поставить галочку «Да» в строке «Опубликовано».
Настройки нужно сохранить, нажав одноименную кнопку в правом верхнем углу окна. Категория есть, осталось создать страницу с контактной формой. Для этого нужно зайти во вкладку «Контакты» и нажать на кнопку «Новый» в правом верхнем углу.
Заполняем открывшееся диалоговое окно. Обязательно заполняем строку «Название», строку «Псевдоним»,. Ставим галочку «Да» в строке «Опубликовано» и указываем категорию данного контакта. Перейдя немного ниже, обнаружим окно «Связь с пользователем», где нужно указать контактное лицо-получатель сообщений.
Обязательно заполняется и поле «Информация», где необходимо указать положение формы на сайте и электронный адрес получателя. Остальные пункты меню заполнять можно по желанию.
Форма обратной связи настроена, осталось расположить ее на сайте. Для этих целей надо перейти на административную панель и, выбрав вкладку «Меню», определиться с местом отражения пункта.
В этом меню создаем новый пункт. Для этого нажимаем кнопку «Создать» и в открывшемся меню выбираем «Контакты/Страница контакта».
Откроется страница, на которой нужно задать название пункта меню, прописать его псевдоним, включить его отражение и в поле основных параметров «Выберите контакт» указать контактные данные, к которым будет привязан этот пункт меню. Сохраняем настройки.
Переходим на сайт, находим пункт «Контакты» и нажимаем на него. Должна открыться следующая страница:
Обратная связь для WordPress
В этой системе форму обратной связи можно создать, также прибегнув к помощи плагинов. Самый популярный и функциональный — плагин Contact Form 7.
После этого нужно проследовать во вкладку «Страницы/Добавить новую», и, включив режим HTML, вставить ранее скопированный код формы обратной связи
Приветствую дорогой читатель, сегодня приготовил для Вас вкусненькую форму обратной связи html, которая работает без перезагрузки страницы по технологии Ajax + мощный триггер, который будет мотивировать ваших посетителей воспользоваться формой. Читатели моего блога очень активно обсуждали мою предыдущую статью по на Landing Page, теперь оцениваем, смотрим на доработанную новую форму. Все необходимые исходники и демо прикрепил в статье , структуру работы и подключению так же разберем.
UPD: Устранена ошибка с кодировкой имени в теме письма. Теперь все отображается верно. Благодарим читательницу (Екатерину Карачеву)
Формат самой формы так же включает файл обработчик на языке php, дополнительно для работы понадобится библиотека jquery и скрипты, но обо всем по порядку, не буду долго грузить — переходим к обзору и разбору нашей обратной связи.
Форма обратной связи html — структура работы
Внешний вид нашей формы выглядит следующим образом
В чем здесь вся соль? Форма так таковая есть с правой стороны, а вот в левой части сделал специальный блок, который будет стимулировать вашего посетителя ввести свои контактные данные немедленно! Секрет прост: Видите дату и время в левом блоке? Дата будет выводиться сегодняшняя все время, со временем диапазон этих двух часов высчитывается от настоящего часа, допустим если у вас сейчас время 13:14 , то диапазоном часов будет: с 12 до 14. Посмотрите на как это работает)))
Посетитель будет видеть: ух ты скидка сегодня, да и по времени я как раз попал вовремя, тут еще и скидка! Надо брать незамедлительно! — Вот это и есть наш триггер.
Исходники формы обратной связи html скачали, демо посмотрели — наигрались думаю)) Теперь о само насущном, принцип работы:
Проверка полей в форме input происходит в файле обработчика contact.php ниже в листинге программного кода сможете посмотреть, сообщение об ошибках и успешной отправке письма появляется в самой форме, вот так это выглядит, после отправки:
Исходный код обработчика формы
Вставьте в строке 52 свою почту, таким образом все письма будут приходить на указанную почту.
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | < 1) { $error .= "Введите ваше сообщение. <".$tel."> ".$error." ";
}
}
?>
|
";
}
// Проверка телефона
function ValidateTel($valueTel)
{
$regexTel = "/^{7,12}$/";
if($valueTel == "") {
return false;
} else {
$string = preg_replace($regexTel, "", $valueTel);
}
return empty($string) ? true: false;
}
if(!$tel)
{
$error .= "Пожалуйста введите телефон.
";
}
if($tel && !ValidateTel($tel))
{
$error .= "Введите корректный телефон.
";
}
if(!$error)
// Проверка сообщения (length)
if(!$message || strlen($message) < 1)
{
$error .= "Введите ваше сообщение.
";// В этой строчке ставиться минимальное ограничение на написание букв.
}
if(!?utf-8?b?". base64_encode($name) ."?=";
$message ="\n\nИмя: ".$name."\n\nНомер телефона: " .$tel."\n\nСообщение: ".$message."\n\n";
$mail = mail("vash_email@gmail.com", $subject, $message,
"From: ".$name_tema." <".$tel."> "."Reply-To: ".$email." "." X-Mailer: PHP/" . phpversion());
if($mail)
{
echo "OK";
}
}
else
{
echo "
Работоспособность формы
Чтобы приходили письма на ваш почтовый ящик, измените строку о которой я говорил выше. Советую использовать gmail.com почту, на ней задержек и косяков не наблюдается при получении сформированного письма из формы. Предупредил, т.к. много было вопросов у читателей (письма не приходят на mail.ru). Будьте внимательны на этот счет.
Заполняем все поля, обратите внимание, что телефон вводится с 8 — я специально в подсказке так и написал номер с восьмерки «89251122333». При вводе знака «+» появится сообщение об ошибке. Если кому-то нужно, то легко добавить в обработчик данный «+» .
Заполненная форма с тестовыми данными
Письмо на почтовом ящике
Как видите письмо получили, со всеми тремя полями, которые заполняли и отправили. Заголовок письма «Заявка с сайта сайт» меняется в обработчике contact.php
Все работает отлично, будет приятно услышать вашу обратную связь (конструктивную критику) в комментариях, если появились затруднения и с чем-то не справляетесь — смело пишите мне в VK (в контактных данных найдете). Надеюсь вам понравился и дизайн и функционал данного симбиоза формы обратной связи (заказа услуг, заявки) и триггера, призывающего к действию. Всем удачи в работе и позитивного настроя, пока))
Подготовлено при поддержке,