Скрипт формы обратной связи. Создаем форму обратной связи на PHP Вызов формы в модальном окне

Форму связи можно поместить на . Её просто сделать. Если принять предложенный CSS стиль, то форма будет "резиновой":

Ниже представлены два варианта скрипта отправки почты: с Javascript и без

1. Форма связи без перезагрузки

PHP вынесен в отдельный файл

при нажатии клавиши F5 форма не будет отправлена снова

после отправки формы страница не будет перезагружена

не поддерживается IE8 и ниже (нужно дополнить код аналогами addEventListener() , preventDefault() и XMLHttpRequest или использовать вариант 2)

Файл contacts.html Как к Вам обращаться: Email для связи: Ваше сообщение: document.getElementById("feedback-form").addEventListener("submit", function(evt){ var http = new XMLHttpRequest(), f = this; evt.preventDefault(); http.open("POST", "contacts.php ", true); http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); http.send("nameFF=" + f.nameFF.value + "&contactFF=" + f.contactFF.value + "&messageFF=" + f.messageFF.value); http.onreadystatechange = function() { if (http.readyState == 4 && http.status == 200) { alert(http.responseText + ", Ваше сообщение получено.\nНаши специалисты ответят Вам в течении 2-х дней.\nБлагодарим за интерес к нашей фирме!"); f.messageFF.removeAttribute("value"); // (две строки) f.messageFF.value=""; } } http.onerror = function() { alert("Извините, данные не были переданы"); } }, false); Файл contacts.php 2. Форма связи без JavaScript

в большинстве случаев расширение файла должно быть.php

при нажатии клавиши F5 форма будет отправлена снова

после отправки формы страница будет перезагружена

проверка на правильность заполнения полей осуществляется не на стороне сервера

Файл contacts.php #feedback-form { max-width: 400px; padding: 2%; border-radius: 3px; background: #f1f1f1; } #feedback-form { width: 100%; box-sizing: border-box; margin: 2px 0 2% 0; padding: 2%; border: 1px solid rgba(0,0,0,.1); border-radius: 3px; box-shadow: 0 1px 2px -1px rgba(0,0,0,.2) inset, 0 0 transparent; } #feedback-form :hover { border-color: #7eb4ea; box-shadow: 0 1px 2px -1px rgba(0,0,0,.2) inset, 0 0 transparent; } #feedback-form :focus { outline: none; border-color: #7eb4ea; box-shadow: 0 1px 2px -1px rgba(0,0,0,.2) inset, 0 0 4px rgba(35,146,243,.5); transition: .2s linear; } #feedback-form { padding: 2%; border: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset; background: #669acc; color: #fff; } #feedback-form :hover { background: #5c90c2; } #feedback-form :focus { box-shadow: 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05); } Как к Вам обращаться: Email для связи: Ваше сообщение:

нужно заменить свой@yandex.ru

нужно заменить contacts.php на полный адрес, например, http://сайт.ru/папка/папка/contacts.php

для того, чтобы добавить новое поле, нужно внести изменение в HTML, JavaScript и PHP код. Другими словами, добавить те же участки, что и для contactFF . Пример согласно описанию в

В соответствии с Федеральным законом от 27 июля 2006 г. № 152-ФЗ «О персональных данных» я, субъект персональных данных, именуемый в дальнейшем Пользователь, отправляя информацию через формы обратной связи (далее – Формы) на интернет-сайте (далее – Сайт), а также на адреса корпоративной электронный почты Адвокатского бюро «Деловой фарватер», заканчивающиеся на (далее – Корпоративная почта), свободно, в своей воле и в своем интересе, выражаю Адвокатскому бюро «Деловой фарватер» (ОГРН 1167700058679; ИННН 9705068808), располагающемуся по адресу: 109240, г. Москва, улица Гончарная, дом 24, (далее – Оператор), согласие на обработку моих персональных данных (далее – Согласие) на следующих условиях.

1. Моментом принятия Согласия является маркировка соответствующего поля в Форме и нажатие на кнопку отправки Формы на любой странице Сайта, а также нажатие на кнопку отправки электронного письма, содержащего персональные данные Пользователя, на адрес Корпоративной почты Оператора.

2. Обработка персональных данных – любое действие (операция) или совокупность действий (операций), совершаемых с использованием средств автоматизации или без использования таких средств с персональными данными, включая сбор, запись, систематизацию, накопление, хранение, уточнение (обновление, изменение), извлечение, использование, передачу (распространение, предоставление, доступ), обезличивание, блокирование, удаление, уничтожение персональных данных.

3. Обработка персональных данных осуществляется как с использованием средств автоматизации, в том числе в информационно-телекоммуникационных сетях, так и без использования таких средств.

4. Согласие дается на обработку следующих персональных данных Пользователя, указанных Пользователем в Формах, в файлах, прикрепленных к Формам, а также информации, направленной на адреса Корпоративной почты:

Фамилия, имя, отчество;

Адрес электронной почты;

Контактный телефон;

Возраст;

Иных персональных данных, указанных Пользователем в Формах или файлах, прикрепленных к Формам.

5. Цели обработки персональных данных:

Идентификация Пользователя;

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

Ответы на запросы Пользователей;

Обеспечение работы Пользователя с Сайтом Оператора;

Направление Пользователям аналитических материалов и информирование Пользователей о предстоящих мероприятиях, организуемых Оператором, а также регистрация Пользователей для участия в таких мероприятиях;

Заключение с Пользователем договоров, в том числе трудовых и договоров на оказание юридических услуг;

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

Предоставление Пользователям консультаций по вопросам, которые касаются оказываемых Оператором услуг, в целях маркетинговой деятельности и поддержки Пользователей, а также в иных целях, которые не противоречат действующему законодательству Российской Федерации и условиям соглашений между Оператором и Пользователями.

6. В ходе обработки персональных данных Оператор вправе осуществлять сбор, запись, систематизацию, накопление, хранение, уточнение (обновление, изменение), извлечение, использование, передачу (распространение, предоставление, доступ), обезличивание, блокирование, удаление, уничтожение персональных данных Пользователя.

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

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

9. Согласие на обработку персональных данных выдается Пользователем на срок, необходимый Оператору для достижения целей обработки персональных данных.

10. Согласие может быть отозвано Пользователем путем направления письменного заявления в адрес Оператора (109240, г. Москва, улица Гончарная, дом 24) или путем направления письменного заявления на следующий адрес Корпоративной электронной почты: .

11. Настоящее Согласие действует все время до момента прекращения обработки персональных данных.

12. Понятия, которые используются в настоящем Согласии, должны трактоваться в соответствии с их определениями, которые даны в Федеральном законе от 27.07.2006 N 152-ФЗ «О персональных данных».

Одной из наиболее часто встречающихся на практике задач является реализация формы обратной связи. Тобишь написание ее HTML кода, оформление ее на CSS, создание PHP скрипта, который бы обрабатывал полученные от пользователя данные и отправлял их на нашу почту, написание JS скрипта, который бы проверял форму на адекватность вводимых данных, защита нашего детища от спама, чтобы наш почтовый ящик не обвалился от атак ботов.

Все вышеперечисленные моменты будут рассмотрены в нашем обзоре и подробно прокомментированы.

Итак, начинаем создание формы обратной связи:

HTML

В первую очередь мы пишем HTML код, в нем задаются поля, которые будет заполнять пользователь. Они же в дальнейшем будут оформляться. Код формы выглядит следующим образом:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" > Имя: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" > Телефон: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" > E- mail : < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" > Сообщение: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Отправить" />

И визуально она выглядит сейчас следующим образом:

Согласен, пока все некрасиво и ничего не понятно, но мы только начали.

Рассмотрим приведенный выше код подробно:

• < form method= "post" action= "mail.php" > …

  
  для того, чтобы создать форму необходимо использовать тег form. Именно он определяет начало и конец формы для интерпретатора кода. У него, как и у любого тега, есть целый набор атрибутов, но обязательных для работы формы всего два, это method (метод отправки запроса на сервер, для форм стандартно используют post) и action (указывает путь к файлу-обработчику формы, именно в этом файле будет содержаться скрипт на PHP, который после будет отправлять введенные пользователем значения нам на почту, в нашем случае мы видим, что это файл называется mail.php и лежит он в том же директории сайта, что и рассматриваемая нами страница).

• < input maxlength= "30" type= "text" name= "name" />

  
  Далее у нас следуют инпуты. Это собственно сами поля формы в которые пользователи будут вводить необходимую нам информацию (type="text" говорит о том, что это будет текст). Атрибут maxlength указывает сколько символов может ввести пользователь в данное поле формы. Самый важный атрибут это name – он задает имя конкретного поля. Именно по этим именам в дальнейшем PHP скрипт будет обрабатывать поступающую в него информацию. При желании можно еще задать атрибут placeholder, который выводит внутри поля текст исчезающий при установке курсора внутри нее. Одной из проблем плейсхолдера является то, что он не поддерживается некоторыми старыми браузерами.

• < label for = "name" > Имя:

  
  Используется в случае если мы отказались от плейсхолдеров. Обычная подпись поля, атрибут for сообщает к какому конкретно полю относится данная подпись. Значением указывается name интересующего нас поля.

• < textarea rows= "7" cols= "50" name= "message" >

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

• < input type= "submit" value= "Отправить" />

  
  О том, что это кнопка для отправки формы нам сообщает type="submit", а value задает текст, который будет внутри этой кнопки.

• < div class = "right" >

  
  использованы только для дальнейшего визуального оформления формы.

CSS

Для того, чтобы наша форма обратной связи выглядела презентабельно ее нужно оформить. Для получения следующего результата:

Мы использовали данный код:

form { background: #f4f5f7; padding: 20px; } form . left, form . right { display: inline- block; vertical- align: top; width: 458px; } form . right { padding- left: 20px; } label { display: block; font- size: 18px; text- align: center; margin: 10px 0px 0px 0px; } input, textarea { border: 1px solid #82858D; padding: 10px; font- size: 16px; width: 436px; } textarea { height: 98px; margin- bottom: 32px; } input[ type= "submit" ] { width: 200px; float: right; border: none; background: #595B5F; color: #fff; text- transform: uppercase; }

Подробно расписывать CSS я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты:

Не стоит писать оформление под каждый тег в форме. Старайтесь строить свои селекторы так, чтобы парой строк кода оформлять все необходимые Вам элементы.

Не используйте для переноса строк и создания отступов лишние теги по типу < br>, < p> и тд, с этими задачами прекрасно справляется CSS со свойством display: block и margin с padding. Больше о том, почему не стоит пользоваться < br> в верстке вообще можете почитать в статье Тэг br, а так ли он нужен? .

Не стоит пользоваться табличной версткой для форм. Это противоречит семантике этого тега, а поисковики любят семантичный код. Для того, чтобы формировать визуальную структуру документа нам достаточно тегов div, и заданных им в CSS свойств display: inline-block (выстраивает блоки в ряд) и vertical-align: top (не дает им разбежаться по экрану), задаем им необходимую высоту и вуаля, ничего лишнего и все расположено так, как нам нужно.

Для желающих экономить свое время на оформлении сайтов могу посоветовать пользоваться CSS фреймворками при создании сайтов, особенно самописных. Мой выбор в этом плане- Twitter Bootstrap . Урок по оформлению форм с его использованием можно посмотреть .

PHP

Ну вот и пришло время сделать нашу форму работоспособной.

Заходим в наш корневой каталог сайта и создаем там файл mail.php, к которому мы ранее указывали путь в атрибуте action тега form.

В конечном итоге его код будет выглядеть следующим образом:

Ваше сообщение успешно отправлено

Обсуждение HTML и CSS части этого документа можно пропустить. По своей сути это обычная страница сайта, которую Вы можете оформить по своему желанию и необходимости. Рассмотрим же важнейшую ее часть – PHP скрипт обработки формы:

$back = "

Вернуться назад

" ;

Этой строкой мы создаем ссылку для возвращения на предыдущую страницу. Поскольку мы заранее не знаем с какой страницы пользователь попадет на эту, то делается это при помощи маленькой JS функции. В дальнейшем мы просто будем обращаться к этой переменной для вывода ее в нужных нам местах.

if (! empty ($_POST [ "name" ] ) and ! empty ($_POST [ "phone" ] ) and ! empty ($_POST [ "mail" ] ) and ! empty ($_POST [ "message" ] ) ) { //внутрення часть обработчика } else { echo "Для отправки сообщения заполните все поля! $back " ; exit ; }

Тут мы прикручиваем проверку формы на наполненность полей. Как вы догадались, в части $_POST["name"] в кавычках мы пишем значение атрибута name наших инпутов.

Если все поля заполнены, то скрипт начнет обрабатывать данные в своей внутренней части, если же хоть одно поле не было заполнено, то на экран пользователя выведется сообщение с требованием заполнить все поля формы echo "Для отправки сообщения заполните все поля! $back" и ссылкой для возврата на предыдущую страницу, которую мы создали самой первой строкой.

Дале вставляем во внутреннюю часть обработчика формы:

$name = trim (strip_tags ($_POST [ "name" ] ) ) ; $phone = trim (strip_tags ($_POST [ "phone" ] ) ) ; $mail = trim (strip_tags ($_POST [ "mail" ] ) ) ; $message = trim (strip_tags ($_POST [ "message" ] ) ) ;

Таким образом мы очистили вводимые пользователем данные от html тегов и лишних пробелов. Это позволяет нам обезопасить себя от получения вредоносного кода в высылаемых нам сообщениях.

Проверки можно и усложнить, но это уже по вашему желанию. Минимальную защиту на серверной стороне мы уже поставили. Дальнейшее мы сделаем на стороне клиента используя JS.

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

После чистки тегов добавляем отправку сообщения:

mail ("почта_для_получения_сообщений@gmail.com" , "Письмо с адрес_вашего_сайта" , "Вам написал: " . $name . "
Его номер: " . $phone . "
Его почта: " . $mail . "
Его сообщение: " . $message , "Content-type:text/html;charset=windows-1251" ) ;

Именно эта строка и занимается формированием и отправкой сообщения к нам. Заполняется она следующим образом:

"почта_для_получения_сообщений@gmail.com" – сюда между кавычек вставляете свою почту

"Письмо с адрес_вашего_сайта" – это тема сообщения, которое будет приходить на почту. Можно написать сюда что угодно.

"Вам написал: ".$name." < br /> Его номер: ".$phone." < br /> Его почта: ".$mail." < br /> Его сообщение: ".$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом < br /> делаем перенос строки, чтобы сообщение в целом было читабельно.

Content-type:text/html;charset=windows-1251 - в конце идет явное указание типа данных передаваемого в сообщении и его кодировки.

ВАЖНО!

Кодировка указанная в «голове» документа ( < meta http- equiv= "Content-Type" content= "text/html; charset=windows-1251" /> ), кодировка из сообщения Content-type:text/html;charset=windows-1251 и в целом кодировка файла PHP должны совпадать иначе в получаемых на почту сообщениях вместо русских или английских букв будут выводиться «кракозябры».

Многие не указывают кодировку отправляемого сообщения явно, но на некоторых почтовых клиентах из-за этого в дальнейшем могут возникнуть проблемы (на почту приходят нечитабельные письма), потому я рекомендую ее все-же указывать.

Проверка формы на адекватность вводимых данных

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

Это можно сделать как на PHP на стороне сервера, так и на JS на стороне клиента. Я использую второй вариант, поскольку так человек сразу может узнать что он сделал не верно и исправить ошибку не делая дополнительных переходов по страницам.

Код скрипта вставляем в том же файле, где у нас располагается HTML часть формы. Для нашего случая он будет выглядеть так:

< script> function checkForm(form) { var name = form. name. value; var n = name. match(/ ^[ A- Za- zА- Яа- я ] * [ A- Za- zА- Яа- я ] + $/ ) ; if (! n) { alert("Имя введено неверно, пожалуйста исправьте ошибку" ) ; return false ; } var phone = form. phone. value; var p = phone. match(/ ^[ 0 - 9 + ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; if (! p) { alert("Телефон введен неверно" ) ; return false ; } var mail = form. mail . value; var m = mail . match(/ ^[ A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([ A- Za- z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \. ) + [ A- Za- z] + $/ ) ; if (! m) { alert("E-mail введен неверно, пожалуйста исправьте ошибку" ) ; return false ; } return true ; }

Ну а теперь обычный разбор:

Для того, чтобы при нажатии на кнопку отправки формы, у нас происходила ее проверка вешаем запуск нашего скрипта на тег form:

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

Теперь по пунктам забираем состав проверки:

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

Не секрет, что очень часто приходится как-то общаться с посетителями своего сайта. Разумеется, можно просто дать свой e-mail (как сделал я), а можно предложить и другой способ - это форма обратной связи . Разумеется, здесь потребуется знание PHP . Но чтобы Вам не надо было писать всё с нуля, я предоставляю Вам очень даже хороший скрипт формы обратной связи .

После скачивания извлекайте архив на Ваш сайт (смотрите, ничего не сотрите у себя). Теперь давайте его настроим. Для этого открываем файл "config.php ". И меняем значения следующих переменных:

"mailto " - поставьте вместо "admin@aceweb.ru " адрес своего почтового ящика.

"charset " - поставьте кодировку, хотя если Ваш сайт русскоязычный, то можете оставить "windows-1251 ".

"content " - советую оставить "text/plain ", так как вряд ли Ваши посетители будут отправлять Вам сообщения в HTML-формате .

Теперь Вы можете запустить файл 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 . Давайте заполним нашу форму и нажмем кнопку отправить. Не забудьте указать ваш е-майл. Письмо пришло моментально.