Создаем форму обратной связи на PHP. Простейшая форма отправки данных на почту при помощи HTML и PHP

• Шаг 5 . По выше приведённому примеру добавьте остальные нужные Вам поля, каждый раз начиная с тега

  . Для установки поля с текстовым сообщением используйте тэг . Параметры «cols » и «rows » отвечают за ширину и высоту текстового поля. Можете задать параметры, какие Вам больше нравятся. У Вас должно получиться примерно так, как показано на скриншоте ниже.

• Шаг 6 . Чтобы защитить себя от ботов, которых сегодня в интернете довольно много, создайте ещё одну строку с помощью тэга . За счёт параметра «style=»display:none» » данное поле не будет видно простым смертным, однако ботами будет заполняться автоматически. Таким образом, Вы всегда сможете отличить живого человека от программы.

• Шаг 7 . Завершающим этапом разметки станет создание кнопки отправки. Для этого используется тэг . Создайте новый блок

  и внутри него впишите код кнопки со следующими параметрами:

  Отправить сообщение . Получиться должен похожий результат, как показано на скриншоте.

Работа с каскадными таблицами стилей (CSS)

• Как Вы уже успели заметить в процессе разметки, у нас получилось что-то очень кривое, невзрачное и отвратительное. Для того, чтобы придать форме обратной связи более или менее опрятный вид, одного языка HTML будет недостаточно. Для этой цели придётся прибегнуть к использованию стилей CSS .
• В том случае, если Вы воспользовались советом подтянуть свои базовые навыки на ресурсе htmlbook.ru , то задать определённые параметры оформления для всех частей формы с помощью CSS Вам не составит никакого труда. Если же у Вас нет желания или времени со всем этим возиться, то мы предоставим Вам уже готовый код и расскажем, как его подключить.

Подключить стили CSS к HTML можно двумя способами:

• Скопируйте код из нашего файла каскадных таблиц в самый низ файла style.css , который присутствует на хостинге сайта
• Переместите наш файл стилей к себе на хостинг и подключите его

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

Подключение файла PHP и его настройка

Как уже было сказано ранее, скрипт PHP отвечает за исполнение формы обратной связи. Однако для того, чтобы более или менее понять принцип работы языка PHP , необходимо прочитать большой объём литературы и провести приличное количество часов за практикой. Поэтому, как и в случае с CSS , мы предоставим Вам уже готовый файл с php-скриптом, который останется только прикрепить к документу с формой.

В отличие от файла style.css , файл с php-скриптом прикрепляется в свойствах самой формы. Начнём по порядку:

• Шаг 1 . Откройте ранее написанный код и найдите строку с открытым тегом формы. Добавьте к нему свойства «action=»contact-form.php» » и «method=»post» ». Смотрите пример на скриншоте.

• Шаг 2 . Скачайте наш php-файл и поместите его на хостинг в ту же папку, где находится html-документ с формой. Таким образом, php и html файлы будут взаимодействовать между собой.

• Шаг 3 . Далее необходимо настроить скрипт под себя. Откройте файл и задайте переменные, присваивая им те же имена, что и в скрипте html. Если Вы добавляли в форму дополнительные поля, допишите их в скрипте php точно так, как показано на скриншоте.

• Шаг 4 . Далее необходимо добавить ещё две переменных с адресом вашей электронной почты и темой письма, которая будет отображаться на вашем ящике. В строке с переменной «$address » укажите E-mail, а в строке «$sub » тему письма как показано на скриншоте.

• Шаг 5 . В строке с переменной «$mes » настраивается формат письма, которое Вы получите на почту. Вы можете переписать его без изменений или отредактировать по собственному вкусу.

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

После выполнения всех действий на выходе Вы получите вот такую простенькую опрятную форму обратной связи

Подборка красивых дизайнерских форм обратной связи на HTML и CSS для разных целей

• Опираясь на выше приведённые инструкции, Вы без труда сможете «нарисовать» форму обратной связи под свой собственный вкус. Однако, если у Вас нет времени или желания самостоятельно создавать форму с нуля, Вы можете найти в интернете уже готовые дизайнерские формы и обладая базовыми навыками HTML отредактировать их под себя.

• Немного поискав, мы нашли для Вас подборку из 35 красивых всплывающих дизайнерских форм обратной связи, которые написаны на HTML и CSS . Данные формы подходят для таких движков, как WordPress и Joomla , имеют простую и лёгкую настройку из панели управления, а также прекрасно подходят для сайтов без движка.

ВИДЕО: Всплывающая форма обратной связи для сайта WordPress

Сегодня будем работать над созданием красивой HTML формы обратной связи для сайта, работающей на PHP и имеющею встроенную защиту от спама. Никаких особых знаний вам не потребуется, достаточно будет основ html и элементарной логики. Я дам готовые файлы, которые вы сможете вставить на сайт без изменений или скорректировать под свои нужды.

Недавно я делал статью о том, как сделать с помощью плагина Contact Form 7. Также просто можно сделать форму обратной связи на Joomla и других популярных CMS.

Но, что делать сайтам, которые не используют популярные CMS? – Остается делать все руками.

Кроме того, использование обратной связи без плагинов возможно и для WordPress. Лишние плагины создают немалую нагрузку на сервера и отказ от них позволяет ускорить работу сайта.

Заказать установку и настройку готовой формы за 500 рублей можно здесь (это для тех кому лень руками поработать или навыка недостаточно).

Принцип работы формы обратной связи на html

Наша форма будет иметь 5 полей для ввода данных – имя, электронный адрес, телефон, адрес сайта, текст сообщения (вы сможете удалить или изменить их самостоятельно).

Все поля, кроме адреса веб сайта будут обязательны для заполнения (это вы тоже сможете настроить самостоятельно).

Для полей с email адресом и сайтом будет проводиться обязательная проверка правильности ввода данных.

Конечная форма связи будет иметь вот такой вид:

Для работы контактной формы, созданной на html, требуется 3 элемента.

Первый отвечает за структуру самой формы, за тип и количество полей ввода данных. Это обычный html код.

Второй отвечает за обработку данных, которые пользователь вводит в поля формы. Он определяет, что, куда и в каком виде пересылать, после того, как будет нажата кнопка отправки сообщения. Для реализации используется специальный PHP скрипт.

Третий отвечает за внешний вид. Устанавливает размеры и расположение полей ввода данных, добавляет различные цвета и эффекты. Это все задается CSS стилями.

Демо версия формы

Настройку каждого из этих элементов мы с вами разберем по шагам.

Создание HTML макета

Чтобы не делать статью слишком длинной и не добавлять отдельно каждый элемент, я приведу полный html код, а ниже опишу каждый блок и возможные изменения.

Для обозначения форм в html используется тег , внутри которого заполняются необходимые параметры.

Начнем с первой строки.

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 число строк.</p><p><b>Защита от спама </b> – невидимое поле с именем name=bezspama. У него стоит стиль display:none – это значит поле невидимо людям, но боты его будут заполнять на автомате.</p><p>И завершающий элемент любой формы – кнопка отправки сообщения, она задается тегом <button> </button>, имеющим свой класс для настройки внешнего вида и тип “submit”.</p><p>Для добавления или удаления полей, достаточно убрать ненужные или вставить новые по аналогии с существующими, прописав для них все свойства и имена.</p><h2>Оформление CSS стилями</h2><p>Если вы посмотрите в браузере на то, что получилось, то увидите нечто корявое и непривлекательное. Для того, чтобы у нас получилась красивая форма обратной связи, придется поработать над ее стилями (html будет недостаточно).</p><p>Если вы владеете CSS, то задать оформление для всех элементов формы сможете без проблем, тут даже не потребуется моя помощь.</p><p>Если же вы не знакомы со стилями, то я просто дам вам готовый файл, в котором уже все прописано таким образом, что ваша форма будет идентична той, что в примере.</p><p>Подключить стили можно двумя способами:</p><ol><li>Скопировать содержимое файла в файл style.css, который уже есть на вашем сайте (добавьте в самый конец)</li><li>Поместить файл, который я дал, на ваш хостинг и подключить его.</li> </ol><p>Подключаются файлы стилей следующим кодом <link rel=”stylesheet” media=”screen” href=”styles.css” >, размещаемым внутри <head></head>. Если файл со стилями (styles.css) находится не в одной папке с html страницей, то пропишите полный путь до него.</p><p>В файле со стилями, который я дал, каждый элемент подписан, поэтому, вы можете вносить в него любые изменения – менять цвета, размеры, форму, эффекты. Владея самыми базовыми знаниями, вы сможете легко его править.</p><h2>Настройка PHP кода (добавлена защита от спама)</h2><p>Как и в случае со стилями, я дам вам готовый код, обрабатывающий HTML форму обратной связи и защищающий от спама. Этот файл адаптирован для конкретной конфигурации и, если вы захотите задать новые поля или удалить существующие, в него придется вносить изменения. Поэтому, я расскажу вам, как он работает, чтобы вы поняли, что нужно менять.</p><blockquote><p>Для сайтов, использующих кодировку windows-1251 и версию php 5.4+, в код нужно будет внести дополнение, связанное с функцией htmlspecialchars. Покажу его ниже. Иначе, вместо кириллицы будут приходить пустые поля.</p> </blockquote><p>Помните, в свойствах формы (в html файле) мы указывали параметр action=”contact-form.php”. Вам нужно создать файл с названием contact-form.php и поместить в него находящийся ниже код.</p><p><?php /* Задаем переменные */ $name = htmlspecialchars($_POST["name"]); $email = htmlspecialchars($_POST["email"]); $tel = htmlspecialchars($_POST["tel"]); $website = htmlspecialchars($_POST["website"]); $message = htmlspecialchars($_POST["message"]); $bezspama = htmlspecialchars($_POST["bezspama"]); /* Ваш адрес и тема сообщения */ $address = "pochta@kakoy-to-sajt.com"; $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("Refresh: 5; URL=https://сайт"); echo "<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body></body>";} else { header("Refresh: 5; URL=https://сайт"); echo "<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body></body>";} } exit; /* Выход без сообщения, если поле bezspama заполнено спам ботами */ ?></p><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td><td class="crayon-code"><p><?php </p><p>/* Задаем переменные */ </p><p>$name = htmlspecialchars ($_POST [ "name" ] ) ; </p><p>$email = htmlspecialchars ($_POST [ "email" ] ) ; </p><p>$tel = htmlspecialchars ($_POST [ "tel" ] ) ; </p><p>$website = htmlspecialchars ($_POST [ "website" ] ) ; </p><p>$message = htmlspecialchars ($_POST [ "message" ] ) ; </p><p>$bezspama = htmlspecialchars ($_POST [ "bezspama" ] ) ; </p><p>/* Ваш адрес и тема сообщения */ </p><p>$sub = <span>"Сообщение с сайта ХХХ" </span>; </p><p>/* Формат письма */ </p><p>$mes = <span>"Сообщение с сайта ХХХ.\n </p><p>Имя отправителя: $name </p><p>Электронный адрес отправителя: $email </p><p>Телефон отправителя: $tel </p><p>Сайт отправителя: $website </p><p>Текст сообщения: </p><p>$message" ; </p><p>if (empty ($bezspama ) ) <span>/* Оценка поля bezspama - должно быть пустым*/ </p><p>/* Отправляем сообщение, используя mail() функцию */ </p><p>$from = <span>"From: $name <$email> \r\n Reply-To: $email \r\n" </span>; </p><p>if (mail ($address , $sub , $mes , $from ) ) { </p><p>header () ; </p><p>echo "<head> </p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> </p><p> <body>Письмо отправлено, через 5 секунд вы вернетесь на страницу XXX</body>" </span>; } </p><p>else { </p><p>header (<span>"Refresh: 5; URL=https://сайт" </span>) ; </p><p>echo "<head> </p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> </p><p> <body>Письмо не отправлено, через 5 секунд вы вернетесь на страницу YYY</body>" </span>; } </p><p>exit ; <span>/* Выход без сообщения, если поле bezspama заполнено спам ботами */ </p> </td> </tr></table><p>Первым делом нам необходимо задать переменные, которые будут обрабатываться php кодом. Для того, чтобы не запутаться, присваиваем им такие же имена, как были в самой форме, только начинаются все переменные со знака $. Сама команда присвоения значения имеет такой вид:</p><p>$название = htmlspecialchars($_POST["название"]);</p><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td><td class="crayon-code"><p>$ название= htmlspecialchars ($ _POST [ "название" ] ) ; </p> </td> </tr></table><p>Если вы добавляли какие-то дополнительные поля данных, то в блоке переменных допишите их имена.</p><p>Не все переменные мы берем из формы. Как минимум, адрес электронной почты, на который придет письмо (ваш адрес) указывается отдельно. В данном случае это переменная $address – впишите в ее значение свой электронный ящик.</p><p>Также, в данном примере явным образом задано значение переменной $sub – она будет выдавать тему письма. Можно добавить тему сообщения в HTML форму в виде текстового поля (наподобие name), и брать значение этой переменной оттуда.</p><p>В блоке формат письма настраивается то сообщение, которое получите вы. Он может отличаться от того, что было написано в поле textarea под названием message. Я просто сделал еще одну переменную $mes и включил в нее дополнительный текст и важные данные отправителя (имя, почту, телефон, сайт). Эту часть вы можете сконфигурировать так, как вам удобно.</p><p>Чтобы получаемые вами письма подписывались именем отправителя, и в них включался их обратный адрес, а не адрес сервера, на котором находится ваш php файл, мы задаем новую переменную $from, в нее включаем имя и электронный ящик отправителя письма.</p><p>Затем функция mail осуществляет отправку письма по заданным параметрам. В случае успешной отправки появляется сообщение о том, что письмо отправлено, а через 5 секунд пользователя перебрасывает на страницу вашего сайта (адрес страницы и время задержки вы можете изменить). Если письмо отправить не удалось, появляется сообщение, что письмо не отправлено и через 5 секунд идет переход на страницу сайта, аналогичным образом вы можете задать адрес страницы и время.</p> <h2>Вставка формы на страницу сайта</h2><p>Для того, чтобы вставить созданную вами форму обратной связи, вам нужно скопировать html код формы и вставить его в ту часть кода страницы, где вы хотите вывести обратную связь для сайта.</p><p>Еще раз хочу напомнить, если файл с PHP программой находятся не в той же папке, что и страница, на которой размещен html код, то в коде самой формы нужно прописать полный путь к нему, иначе, работать не будет, так как форма не найдет файл обработчик.</p><p><b><span>Скачать файлы контактной формы </span> </b></p><h2>Активный анти спам с вводом данных в поле</h2><p>Спамеры действуют с помощью различных программных средств и некоторые боты умеют обходить защиту с пустым полем, которая встроена в базовую версию. Если они вас начинают донимать, то можно применить вместо или дополнительно простую защиту со вводом данных в специальное поле. Например, сделать математическое выражение с просьбой ввести ответ или задать какой-либо простой вопрос. Больших изменений в форме это не потребует.</p><p>Я покажу как изменить код формы и PHP обработчик для использования этого метода антиспама. При желании вы можете не менять защиту с пустым полем, а добавить соответствующие строки в код и у вас будет работать одновременно 2 метода – по идее, должно быть более эффективно.</p><p>Первым делом нам необходимо добавить поле для ввода и вопрос в HTML код. В качестве основы у нас уже есть строка 25 (input name = “bezspama” ). Это поле невидимо. Мы превращаем его в обычное. Для этого всю строку меняем на вот такой блок:</p><p><p> <label for="bezspama">2+2*2=:</label> <input name="bezspama" type="text" required /> </p></p><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td><td class="crayon-code"><p><p><label for = "bezspama" > 2+2*2=: </label> </p><p><input name = "bezspama" type = "text" required /> </p> </p> </td> </tr></table><p>Вместо математического выражения 2+2*2 можете ввести любые данные – это визуальный вопрос для пользователя. Из поля input мы убрали стиль display:none и добавили обязательность заполнения.</p><p>Следующим шагом меняем данные в PHP обработчике, чтобы он делал проверку уже не на пустоту этого поля, а на правильность введенных данных. Проверка у нас делалась в строке 25 выражением empty ($bezspama ) . Мы меняем это выражение и будем делать проверку равенства заполненного поля заранее заданному числу. В моем примере, математическое выражение равно 6, поэтому вся строка будет выглядеть вот так.</p> <br><img src='https://i0.wp.com/nesmelov.ru/wp-content/uploads/2015/12/forma-obratnoj-svyazi-dlya-sajta1-550x412.jpg' width="100%" loading=lazy><p>Добрый день, форма обратной связи должна присутствовать на каждом сайте. Сегодня я покажу пример готовой формы для вставки на любой сайт, в том числе и на движок wordpress. Готовый пример html и php кода можно будет скопировать на свой сайт. Кроме готового примера, существует много плагинов, которые так же пользуются большой популярностью. На многих сайта такая форма уже встроена в тему, но иногда бывает необходимость добавить еще одну на другую страницу или заменить старую.<br><i> </i></p> <p>Перед тем, как начинать писать эту статью, я прошелся по интернету в поисках ответа на этот вопрос. Пересмотрев больше количество сайтов и блогов, я нашел очень мало качественных ответов по вставке формы обратной связи на сайт. Большинство материалов написано по работе с плагинами. В некоторых статьях не совсем понятно, что и как нужно делать, код не работает, письма не приходят...и так далее.</p> <p>Есть конечно и достойные ответы, но их очень мало. Я приведу простой пример, для которого много ума не нужно. Особых знаний в php не требуется, точнее они вообще не нужны. Что и где нужно изменить, я напишу подробно, когда это будет нужно. Форма работает нормально, без сбоев. Пример формы находится у меня на . В готовый пример я добавил немного стилей для красоты, чтоб форма совсем уже не смотрелась «убого». При желании можно все изменить на ваше усмотрение.</p> <h2>Готовая форма обратной связи для сайта на html</h2> <p>В данном примере, форма обратной связи для сайта состоит из html кода. Такой пример html кода вставляете абсолютно на любую страницу сайта, не важно, где и что вы используете. Этот же код можно вставить на страницу движка wordpress, все будет работать правильно и без сбоев.</p> <p><form action="/wp-content/themes/xmarkup/form.php" method="post" name="form">Имя<input class="inp" style="width: 30%;" name="name" type="text" /> E-mail:<input class="inp" style="width: 30%;" name="email" type="text" /> Тема сообщения<input class="inp" style="width: 30%;" name="temma" type="text" /> Ваш текст: <textarea class="inp" style="width: 80%;" cols="1" name="massage" rows="5">

В самом начале кода, в первом строчке, вы должны указать свой путь к php файлу form.php (про него немного попозже). Больше ничего менять не нужно. Если вас не устраивает название формы и ее поля, вы всегда можете добавить новые или изменить старые. Так же можно добавить свои стили прямо суда в таблицу. Если такой вариант вам неудобный, задавайте новые классы и уже потом добавляйте стили через ваш файл style.css

Кто не знает, как это можно сделать, заходим в админку сайта, переходим в редактор и открываем файл style.css. В самый конец таблицы стилей добавляем вот этот код. В итоге должен быть вставлен код формы на страницу и ваши css стили в таблицу style.css

Inp{ padding: 10px; border: 1px solid #E5E5E5; width: 200px; color: #999999; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; }

После проделанных действий, у вас должна получиться вот такая форма обратной связи на странице. Не стоит сильно увлекаться, ваша форма должна быть простой и максимально удобной. Без лишних дополнительных полей...имя, почта, тема и сообщение. При желании, даже Тему сообщения можно убрать.

Php код формы

С разметкой формы определились, красоту навели, теперь необходимо создать файл с расширением php и добавить в него вот такой код. Файл добавляйте через FTP клиент на ваш сайт. Большинство пользователей используют CMS, скидывайте данный файл в папке с вашей темой. Адрес и название этого файла, вы должны изначально прописать в разметке вашей формы, которую я показывал выше. Я прописал полный путь для примера, чтоб было понятно, что и куда необходимо вставить.

(