Создаем форму обратной связи на сайте

Одной из наиболее часто встречающихся на практике задач является реализация формы обратной связи.

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

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

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

HTML

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

  Имя:   Телефон:   E-mail:   Сообщение:    

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

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

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

• … для того, чтобы создать форму необходимо использовать тег form. Именно он определяет начало и конец формы для интерпретатора кода. У него, как и у любого тега, есть целый набор атрибутов, но обязательных для работы формы всего два, это method (метод отправки запроса на сервер, для форм стандартно используют post) и action (указывает путь к файлу-обработчику формы, именно в этом файле будет содержаться скрипт на PHP, который после будет отправлять введенные пользователем значения нам на почту, в нашем случае мы видим, что это файл называется mail.php и лежит он в том же директории сайта, что и рассматриваемая нами страница).
• Далее у нас следуют инпуты. Это собственно сами поля формы в которые пользователи будут вводить необходимую нам информацию (type=»text» говорит о том, что это будет текст). Атрибут maxlength указывает сколько символов может ввести пользователь в данное поле формы. Самый важный атрибут это name – он задает имя конкретного поля. Именно по этим именам в дальнейшем PHP скрипт будет обрабатывать поступающую в него информацию. При желании можно еще задать атрибут placeholder, который выводит внутри поля текст исчезающий при установке курсора внутри нее. Одной из проблем плейсхолдера является то, что он не поддерживается некоторыми старыми браузерами.
• Имя:Используется в случае если мы отказались от плейсхолдеров. Обычная подпись поля, атрибут for сообщает к какому конкретно полю относится данная подпись. Значением указывается name интересующего нас поля.
• Также как и инпут предназначен для введения пользователем информации, только на этот раз поле заточено для длинных сообщений. Rows указывает размер поля в строках, cols в символах. В целом они задают высоту и ширину нашего поля.
• О том, что это кнопка для отправки формы нам сообщает type=»submit», а value задает текст, который будет внутри этой кнопки.
• использованы только для дальнейшего визуального оформления формы.

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 { width: 200px; float: right; border: none; background: #595B5F; color: #fff; text-transform: uppercase;}

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

1. Не стоит писать оформление под каждый тег в форме. Старайтесь строить свои селекторы так, чтобы парой строк кода оформлять все необходимые Вам элементы.
2. Не используйте для переноса строк и создания отступов лишние теги по типу , и тд, с этими задачами прекрасно справляется CSS со свойством display: block и margin с padding. Больше о том, почему не стоит пользоваться в верстке вообще можете почитать в статье Тэг br, а так ли он нужен?.
3. Не стоит пользоваться табличной версткой для форм. Это противоречит семантике этого тега, а поисковики любят семантичный код. Для того, чтобы формировать визуальную структуру документа нам достаточно тегов div, и заданных им в CSS свойств display: inline-block (выстраивает блоки в ряд) и vertical-align: top (не дает им разбежаться по экрану), задаем им необходимую высоту и вуаля, ничего лишнего и все расположено так, как нам нужно.

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

PHP

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

https://www.youtube.com/watch?v=7X1_tC1CcVM

Заходим в наш корневой каталог сайта и создаем там файл 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″);

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

1. 'почта_для_получения_сообщений@gmail.com' – сюда между кавычек вставляете свою почту
2. 'Письмо с адрес_вашего_сайта' – это тема сообщения, которое будет приходить на почту. Можно написать сюда что угодно.
3. 'Вам написал: '.$name.'Его номер: '.$phone.'Его почта: '.$mail.'Его сообщение: '.$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом делаем перенос строки, чтобы сообщение в целом было читабельно.
4. Content-type:text/html;charset=windows-1251 — в конце идет явное указание типа данных передаваемого в сообщении и его кодировки.

ВАЖНО!

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

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

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

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

https://www.youtube.com/watch?v=X_kZCHrhXJI

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

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

function checkForm(form) {  var name = form.name.value; var n = name.match(/*+$/); 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(/**@(+(* +)*.

)++$/); if (!m) { alert(«E-mail введен неверно, пожалуйста исправьте ошибку»); return false; } return true; }

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

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

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

1. Обращаемся к нашей форме и по значению атрибута name выбираем интересующий нас инпут.
2. Записываем его содержимое в переменную
3. Собственно сама проверка формы на совпадение с заданными нами символами. (/*+$/ — могут использоваться только буквы русского и английского алфавитов; /[0-9+][0-9- ]*[0-9- ]+$/ — первый символ это «+» или цифра, дальше могут быть только цифры; /**@(+(*+)*.)++$/ — первые несколько символов это английские буквы или точки, потом знак @, потом снова английские буквы, потом точка и потом еще несколько английских букв).
4. Если все верно, то проверка ничего не выводит и идет к следующему блоку кода, если же проверка на символы выдала ошибку, то выполняется часть скрипта с действиями 5 и 6.
5. Пользователю выводится это сообщение о ошибке.
6. Происходит выход из скрипта проверки.

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

Полный код страниц формы

Для удобства разместили полный код страниц в открытом доступе. Итак, в корне сайта должны лежать файлы:

• index.php
• mail.php
• style.css

Подводя итоги

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

Так что начинайте с малого, своей первой рабочей формы, и дополняйте ее по мере необходимости своими частями.

Видео:ФОРМА ОБРАТНОЙ СВЯЗИ ДЛЯ САЙТА - ЛЕГКО! Используем html и phpСкачать

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

31 август 2015 Пример готовой формы для сбора заявок с сайта + исходный код (css, php, html)

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

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

Для чего нужна форма обратной связи на сайте?

Форма обратной связи служит для отправки общений владельцу сайта от посетителей.
В специальные поля вводятся специальные данные (имя, электронная почта, текст). Для отправки сообщения на е-мейл владельцу сайта, необходимо нажать на кнопку «Отправить», может быть и другой вариант.

Ещё один плюс в пользу формы обратной связи – возможность сохранить свой е-мейл в тайне от спамеров.

https://www.youtube.com/watch?v=WdO044b_FbA

В современном мире спам, это настоящий бич, который заставляет прятать е-мейл от посторонних глаз за семью печатями.

Спам боты круглосуточно рыскают по сайтам в поисках новых электронных адресов для отправки на них спама.

Если он найдёт е-мейл владельца сайта, то на этот адрес начнут сыпаться кучи нежелательной корреспонденции. В скором времени, на нём будет невозможно найти действительно нужную почту.

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

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

Создаем форму обратной связи на html

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

Вставляем в нужное место на сайте следующий код:

Онлайн заявка

Отправить

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

Вставили код и получилось вот так:

Форма появилась, но надо придать ей вид. Для этого добавляем следующие стили (готовая html верстка формы обратной связи):

/* Форма обратной связи */ #inline { margin-left: 30px; width: 80%; margin: 0 auto; background: #fff; padding: 10px 20px; } .txt { display: inline-block; color: #676767; width: 190px; margin-bottom: 10px; border: 1px solid #ccc; padding: 5px 9px; font-size: 15px!important; line-height: 1.4em; } .txtarea { display: inline-block; color: #676767; width: 617px; margin-bottom: 10px; border: 1px solid #ccc; padding: 5px 9px; font-size: 15px!important; line-height: 1.4em; height: 80px; } .txt:focus, .txtarea:focus { border-style: solid; border-color: #bababa; color: #444; } input.error, textarea.error { border-color: #973d3d; border-style: solid; background: #f0bebe; color: #a35959; } input.error:focus, textarea.error:focus { border-color: #973d3d; color: #a35959; } #send { color: #FFFFFF; display: block; cursor: pointer; padding: 5px 11px; font-size: 1.2em; border: solid 1px #F9F9F9; border-radius: 2px; background: #70C6B9; width: 210px; margin-bottom: 20px; } #send:hover { background: #979797; } /* Форма обратной связи */

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

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

Выглядит это вот так:

Что получается? Посетитель кликает на поле, и скрипт подставляет ему уже готовую маску, с кодом страны. Довольно удобно.

Для этого, необходимо подключить скрипт маски. Скачать его вы сможете в самом конце статьи вместе с исходниками.

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

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

Для этого перед закрывающимся тегом вставьте следующий скрипт:

Как работает этот скрипт?

1. Производит проверку введенного e-mail.
2. Указывает поля, с которыми будет работать.
3. Проверяет эти поля на заполнения. В случае, если обязательные поля не указаны – выдает сообщение о том, что их нужно заполнить.
4. Обрабатывает введенную информации и инициирует отправку уведомления на почту.
5. Выдает сообщение пользователю о том, что его заявка принята с помощью Ajax.

Осталось сделать самое последнее – создать файл sendmessage.php вставить в него нижеприведенный php код и загрузить его в корень вашего сайта.

https://www.youtube.com/watch?v=0bexJuzHFRo

Вот и все, простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.

Всплывающая форму обратной связи для сайта

Бывают случаи, когда нужна именно всплывающая форма, которая открывается при нажатии на кнопку. Сделать ее очень просто. В качестве примера возьмем форму, созданную нами ранее и будет работать с ней. Для начала нам нужно подключить jqury fancybox, скачать который вы сможете в конце статьи.

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

Обратный звонок

И придаем ей стили.

.modalbox { color: #FFFFFF; display: block; cursor: pointer; padding: 10px 11px; font-size: 1.2em; border: solid 1px #F9F9F9; border-radius: 2px; background: #70C6B9; width: 210px; text-decoration: none; text-align: center; margin:0 auto 20px; } .modalbox:hover { background: #979797; }

Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=»#inline».

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

Для этого нужно заменить стили #inline со старых на новые.

#inline { display:none; margin-left: 30px; width: 80%; margin: 0 auto; background: #fff; padding: 10px 20px; }

В итоге получаем вот такую кнопку.

При нажатии на которую открывается всплывающее окно с обратной связью.

Опять же, стили, расположение полей и элементов можно менять так, как вам будет нужно. К примеру, для обратного звонка с сайта достаточно будет оставить всего 2 поля – имя и телефон, а остальные поля убрать.

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

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

url: `http://site.ru/sendmessage.php`

Скачать исходные файлы форм обратной связи.

Ключевые слова статьи: добавить форму обратной связи на сайт, верстка формы обратной связи, форма обратной связи html, форма обратной связи php, форма обратной связи почта, добавить форму обратной связи, css форма обратной связи, форма обратный звонок, виджет обратный звонок.

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

Делаем форму обратной связи на сайте — Журнал «Код»: программирование без снобизма

Делаем форму обратной связи на сайте

Фор­ма обрат­ной свя­зи — древ­ней­шее про­грам­мист­ское искус­ство. Тут есть всё: фор­ма с про­вер­кой, при­ём запро­са, обра­бот­ка, без­опас­ность, хра­не­ние и ответ. Это как Hello World, толь­ко для самых кру­тых.

В сего­дняш­ней вер­сии про­грам­мы — толь­ко самые осно­вы это­го упраж­не­ния. В сле­ду­ю­щих частях мы про­ка­ча­ем систе­му.

Смысл про­грам­мы в том, что посе­ти­тель стра­ни­цы запол­ня­ет нуж­ные поля, пишет текст сооб­ще­ния и нажи­ма­ет кноп­ку «Отпра­вить». На почту вла­дель­цу сай­та при­хо­дит пись­мо с тек­стом сооб­ще­ния и дан­ны­ми о том, кто это сооб­ще­ние отпра­вил.

Что­бы сде­лать у себя на сай­те такое, нам пона­до­бит­ся:

• сер­вер, кото­рый уме­ет рабо­тать с PHP-скриптами,
• стра­ни­ца, где раз­ме­стим фор­му,
• скрипт на PHP — он будет отве­чать за отправ­ку сооб­ще­ния.

Для того, что­бы PHP-код испол­нял­ся, нужен какой-то компьютер-исполнитель. Мы назы­ва­ем его сер­ве­ром — то есть «раз­да­ю­щим». На сер­ве­ре долж­на рабо­тать про­грам­ма для PHP, кото­рое отве­ча­ет за пра­виль­ную обра­бот­ку таких фай­лов.

Сер­вер для PHP мож­но запу­стить на вашем ком­пью­те­ре, но без допол­ни­тель­ной настрой­ки он будет виден толь­ко лич­но вам. Это нор­маль­ная ситу­а­ция при раз­ра­бот­ке про­дук­та, но для реаль­ной бое­вой зада­чи нуж­но будет под­нять сер­вер где-то в интер­не­те.

Когда мы дела­ли про­ект «Пуб­ли­ку­ем свою стра­ни­цу в интер­не­те», то уже исполь­зо­ва­ли сер­вер (эту услу­гу нам предо­ста­ви­ла хостин­го­вая ком­па­ния SpaceWeb). Этот же сер­вер мы можем исполь­зо­вать для нашей сего­дняш­ней зада­чи, пото­му что он тоже уме­ет рабо­тать с PHP-файлами:

Если такое есть у ваше­го хостин­га, то вы тоже смо­же­те исполь­зо­вать все воз­мож­но­сти PHP.

Готовим страницу с формой

Возь­мём стан­дарт­ный шаб­лон стра­ни­цы и напол­ним его сти­ля­ми и кодом для фор­мы.

language: HTML

Про­пи­шем CSS-стили, что­бы наша стра­ни­ца выгля­де­ла опрят­но. Забе­жим немно­го впе­рёд и исполь­зу­ем в сти­лях раз­де­лы input и textarea:

language: CSS

/*Задаём общие параметры для всей страницы: шрифт и отступы*/

body{

  /*text-align: center;*/

  margin: 10;

  font-family: Verdana, Arial, sans-serif;

  font-size: 16px;

} 

/* Настраиваем внешний вид полей ввода*/

input {

  display: inline-block;

  margin: 10px auto;

  border: 2px solid #eee;

  padding: 10px 20px;

  font-family: Verdana, Arial, sans-serif;

  font-size: 16px;

}

textarea {

  display: inline-block;

  margin: 10px auto;

  border: 2px solid #eee;

  padding: 10px 20px;

  font-family: Verdana, Arial, sans-serif;

  font-size: 16px;

}

Что­бы сде­лать фор­му на стра­ни­це, мы будем исполь­зо­вать такие теги:

— для вво­да име­ни, почты для свя­зи и темы пись­ма. Они зани­ма­ют одну стро­ку, нам это­го доста­точ­но.

— здесь будут писать само сооб­ще­ние, поэто­му нуж­но будет сде­лать это поле поболь­ше и поши­ре.

Ещё мы вос­поль­зу­ем­ся тегом — он мыс­лен­но соби­ра­ет наши поля в одну фор­му и помо­га­ет управ­лять ими из одно­го места. У каж­дой фор­мы есть свой метод, по кото­ро­му она рабо­та­ет с дан­ны­ми. Фор­ма может или отправ­лять дан­ные (post), или полу­чать их (get).

Так как нам надо отпра­вить сооб­ще­ние в PHP-скрипт, будем исполь­зо­вать метод post. Сра­зу про­пи­шем путь к скрип­ту на сер­ве­ре — по это­му адре­су мы зальём нуж­ный файл на сле­ду­ю­щем эта­пе. Этот скрипт, кото­рый мы поз­же напи­шем, и есть обра­бот­чик фор­мы.

Офор­мим всё в виде кода:

language: HTML

   Текст сообщения

У нас уже есть фор­ма, но она пока не рабо­та­ет. Сей­час это испра­вим.

Пишем обработчик формы на PHP

Когда мы запол­ним и отпра­вим фор­му на нашей стра­ни­це, про­изой­дёт сле­ду­ю­щее:

1. Бра­у­зер собе­рёт вве­дён­ные нами дан­ные и ском­по­ну­ет таким обра­зом, что­бы их мож­но было пере­дать в про­грам­му на PHP. Как бы упа­ку­ет в посыл­ку.

2. В нашей PHP-программе мы смо­жем полу­чить доступ к этим дан­ным, как бы засо­сать их в память и хра­нить в пере­мен­ных. Мож­но пред­ста­вить, что мы рас­па­ку­ем посыл­ку и смо­жем поль­зо­вать­ся её содер­жи­мым.

3. Скрипт PHP что-то сде­ла­ет с полу­чен­ны­ми дан­ны­ми, а потом выплю­нет поль­зо­ва­те­лю какой-то ответ. Этот ответ будет отоб­ра­жён в виде веб-страницы в бра­у­зе­ре.

Логи­ка рабо­ты PHP-программы будет такая:

• полу­ча­ем зна­че­ния пере­мен­ных из тех дан­ных, кото­рые полу­чил обра­бот­чик;
• гото­вим сооб­ще­ние, где ука­жем все поля в фор­ме;
• отправ­ля­ем это сооб­ще­ние и смот­рим на резуль­тат выпол­не­ния функ­ции отправ­ки;
• если пись­мо ушло по нуж­но­му адре­су — пишем, что всё хоро­шо, если нет — гово­рим, что что-то не так;
• через 10 секунд после выво­да сооб­ще­ния авто­ма­ти­че­ски пере­хо­дим на сайт «Кода»

  Видео:Как сделать форму обратной связи для сайта | Google FormsСкачать

  

  Создание формы обратной связи

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

  Статья давно на сайте, но пришло время актуализировать ее, ведь с момента написания прошло более 5 лет, что-то устарело, за некоторые моменты откровенно стыдно, а что-то не так доходчиво разжевано.

  С этого момента обновления статей буду делать максимально полными и подробными, чтобы вам не приходилось ничего искать на других ресурсах. Это статья, изначально, была ориентирована на форму с перебросом на страницу благодарности после нажатия кнопки «отправить».

  Мы реализуем как такой вариант, так и возможность вывода сообщения об успешной отправке без перезагрузки страницы.

  Создание формы обратной связи – HTML разметка

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

  https://www.youtube.com/watch?v=Ltmh0ybH1cI

  Больше на эту тему можно почитать в статье с вредными советами, которые помогут испортить ваш landing page.

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

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

  Оставьте заявку на расчет стоимости

  Узнать стоимость

  Знаю, что заголовок формы не согласован с кнопкой, но лень переделывать все скриншоты. Суть же не в этом совсем. Правда?

  Давайте, кратко объясню, что тут к чему. В теге 'form' я размещаю два параграфа. В одном будет заголовок формы, а второй послужит для вывода сообщений и уведомлений, возникающих при отправке формы. Например, о том, что сообщение успешно отправлено в варианте, когда все происходит без перезагрузки.

  Под каждым полем создаю 'div' для вывода уведомлений об ошибках при валидации '.contact-form__error'.

  Параметр 'enctype' в теге 'form' нужен для того, чтобы отправлять файл. Пока можете его не писать, но, если планируете сделать так, чтобы пользователь мог прикрепить вложение к письму, то нужно оставить все как есть.

  Далее, для простоты работы с js воспользуемся jQuery. Подключаем его, как обычно, перед всеми скриптами, которые зависят от него. Я, обычно, делаю это ближе к закрывающему тегу 'body', чтобы основной контент грузился быстрее.

  Скрипт 'mail.js' — это файл формы, который помогает в отправке и обработке ответа сервера. О нем чуть позже. Сейчас нужно познакомить вас со структурой всех файлов, отвечающих за отправку.

  Структура проекта

  Здесь нас интересует папка 'mail'. Именно тут и происходит вся магия.

  Обратите внимание, что она лежит в корне сайта.

  В первую очередь давайте разберем файл 'config.php'. Тут задаются основные настройки формы.

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

  

  Страница благодарности

  Оформляйте как вам будет угодно

  Вернуться на главную

  В первой строке мы отлавливаем наш GET-параметр, и, если он совпадает с заданным, то показываем страницу, если нет, то перебрасываем пользователя на главную.

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

  То есть это строка говорит, что через 4 секунды после открытия этой страницы, перекинь автоматически посетителя на главную страницу. За это время, человек успеет прочитать ваше сообщение и его благополучно вернет на главную.

  Если вам важен такой функционал, то раскомментируйте ее и настройте приемлемое время.

  Маска ввода номера телефона

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

  Для маски ввода номера телефона нам понадобиться сторонний скрипт. Я предлагаю взять 'jQuery Mask Plugin' из статьи, ссылку на которую дал выше.

  Подключаем после jQuery. Я делаю это так:

  Теперь необходимо инициализировать скрипт.

  После этого маска успешно появилась в поле телефона:

  С этим, думаю, более-менее понятно. Теперь давайте потихоньку добавлять поля для ввода сообщения, чекбокс с принятием пользовательского соглашения и файла.

  Совсем подробно расписывать не буду, просто покажу что и куда добавляю, а в конце дам ссылку на исходник. Если какое-то из полей вам не понадобится, то просто не используйте его в разметке, а в файле 'config' — установите значение 'false' там, где задаем обязательность заполнения.

  Область для ввода сообщения

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

  Стили я уже добавил в 'style.css', так что теперь наша форма выглядит так:

  Теперь необходимо передать данные в файл валидации 'valid.php' и проверить все ли в порядке. Как уже говорил выше, у нас простейший случай с проверкой не пустое ли поле. Прежде чем перейти к реализации валидации давайте предположим, что поле для ввода текста обязательно для заполнения.

  https://www.youtube.com/watch?v=IVseF725EaU

  Для этого перейдем в файл 'config.php' и укажем 'true' в константе, отвечающей за это текстовое поле.

  // Текстовое поле const TEXTISREQUIRED = true; const MSGSTEXTERROR = «Поле обязательно для заполнения»;

  Теперь наше текстовое поле стало обязательно для заполнения. В файле 'valid.php', по аналогии с другими полями напишем такую проверку:

  if (isset($_POST['text']) ) { if(empty($_POST['text']) && TEXTISREQUIRED) { $msgs['text'] = MSGSTEXTERROR; } else { if (!empty($_POST['text'])) { $text = «Сообщение: » . trim(strip_tags($_POST['text'])) . «
  «; } } }

  Обратите внимание на 'text' в проверке POST запроса. Этот то самое значение, которое указывали в параметре 'name' у тега 'textarea'.

  В файле 'mail.js' сохраним 'div' в который будем выводить ошибку, если валидатор ее вернет для текстового поля:

  // Сохраняем в переменные дивы, в которые будем выводить текст ошибки let inpNameError = $(this).find('.contact-form__error_name'); let inpEmailError = $(this).find('.contact-form__error_email'); let inpTelError = $(this).find('.contact-form__error_tel'); let inpTextError = $(this).find('.contact-form__error_text');

  А затем, ниже, напишем проверку:

  if (respond.text) { inpTextError.text(respond.text); } else { inpTelError.text(''); }

  По аналогии вы можете добавлять любые другие поля. Но прежде нужно передать нашу переменную '$text' в тело письма. Делается это в файле 'mail.php' в 34 строке, той самой, о которой я уже упоминал выше.

  $mail->Body = «$name $tel $email $text»;

  Теперь, если все сделали правильно, в письме будут приходить данные и из этого поля.

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

  Checkbox

  Настало время добавить 'checkbox' с соглашением на обработку персональных данных. Вы можете делать и другие чекбоксы или радиокнопки. Принцип один и тот же для всех полей.

  Создаем разметку в форме, определяем в 'config.php' обязательно ли поле, проверяем в валидаторе и формируем ошибку если она есть и выводим при помощи mail.js ее обратно в форму. Если нет, то передаем в mail.php и отправляем.

  Итак, checkbox. Добавим разметку:

  Я принимаю условия пользовательского соглашения

  Не забудьте указать ссылку на соглашение. Стили уже добавлены в исходник.

  Идем в файл 'config.php' и делаем поле обязательным.

  // Соглашение const AGGREMENTISREQUIRED = true; const MSGSAGGREMENTERROR = «Примите пользовательское соглашение»;

  Далее открываем файл 'valid.php' и добавляем следующий код:

  if(empty($_POST['agreement']) && AGGREMENTISREQUIRED) { $msgs['agreement'] = MSGSAGGREMENTERROR; } else { if (!empty($_POST['agreement'])) { $agreement = «Соглашение: Пользовательское соглашение принято » . «
  «; } }

  Теперь переходим в файл 'mail.js' добавляем 'div' в который будет выводится ошибка, если она есть, и обработчик ошибки:

  // Сохраняем в переменные дивы, в которые будем выводить текст ошибки let inpNameError = $(this).find('.contact-form__error_name'); let inpEmailError = $(this).find('.contact-form__error_email'); let inpTelError = $(this).find('.contact-form__error_tel'); let inpTextError = $(this).find('.contact-form__error_text'); let inpAgreementError = $(this).find('.contact-form__error_agreement');

  Обработчик ошибки:

  if (respond.agreement) { inpAgreementError.text(respond.agreement); } else { inpAgreementError.text(''); }

  Осталось в тему письма добавить переменную с текстом о принятии соглашения.

  $mail->Body = «$name $tel $email $text $agreement»;

  В принципе, если поле обязательно модно было этого и не делать, но пусть лучше будет.

  Добавление файла

  Многим может понадобиться возможность отправки файла, давайте реализуем и этот функционал. Я уже подготовил все, вам остается только добавить разметку и выбрать обязательное ли поле для заполнения.

  Разметка:

  Настройки в файле 'config.php':

  // Файл const FILEISREQUIRED = false; const MSGSFILEERROR = «⚠ Забыли добавить файл»;

  Вот так теперь выглядит форма.

  https://www.youtube.com/watch?v=b7VI36KSqDs

  А вот так выглядят пришедшие данные.

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

  Ссылка на скачивание появится через сек. А пока, поддержи, пожалуйста, лайком!

  Видео:Как отправлять заявку с сайта на почту? SMTP скрипт отправки писемСкачать

  

  Обратная связь для сайта — Интернет работа

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

  Я предпочитаю использовать готовые формы для связи, чем городить каждый раз «велосипеды» и пытаться изобрести самую лучшую форму связи. Это лишнее — есть множество бесплатных решений, упрощающих коммуникацию между владельцем сайта и посетителями и при этом экономящие время вебмастера.

  Формы обратной связи на сайт — что выбрать

  Форма для связи — такая вещь, которая всегда должна быть под рукой. Я имею ввиду какой-то свой проверенный скрипт, который вы изучили вдоль и поперек, а его встраивание в оформление сайта занимает 5 минут, настройка — ну пусть еще 5.

  У меня такой скрипт есть, писал я его конечно не сам. Я им с вами поделюсь и расскажу, как пользоваться — в качестве бонуса к основной статье.

  Основная проблема которая стоит перед вебмастерами в вопросе установки формы для заказа звонка на сайте — совместимость, универсальность.

  Допустим, сегодня я делаю блог на Ворпдрессе (только по этой инструкции), завтра на Джумле, послезавтра на Друпале, в выходные делаю интернет-магазин на Опенкарте, затем верстаю лендинг страницу на чистом HTML5 + CSS3… И во всех проектах мне нужна эта форма, будь она неладна.

  Вот скажите мне — это же сколько времени нужно потратить, чтобы к каждому отдельному сайту подобрать скрипт или плагин, удовлетворяющий требованиям? Ну ладно, допустим ты блоггер, работаешь с одним Ворпдрессом и по умолчанию в твоей сборке WordPress есть какой-нибудь плагин wp-contact-form-7.

  Остальным-то что делать?

  Поэтому я и предлагаю работать с кодом. Ваша персональная «карманная» форма обратной связи на языке PHP и HTML может быть супер гибкой, с множеством полей и AJAX, но она должна:

  • Быть в наличии в одной из ваших бесконечных папок со скриптами.
  • Работать всегда и везде.
  • Не требовать танцев с бубном при встраивании на сайт.

  Программисты конечно могут написать самостоятельно подобный скрипт обработки данных на PHP, оформить внешний стиль, прикрутить к нему капчу, добавить проверку правильности ввода полей (в т.ч. email) на странице, добавить поля для загрузки файлов, сделать эту форму на AJAX без перезагрузки.

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

  Я же предлагаю сэкономить:

  • Время.
  • Деньги.
  • Трудозатраты.

  И поэтому мы будем использовать удобные, готовые универсальные скрипты, которые подойдут и динамическим сайтам на CMS, и статическим сайтам на HTML. Ведь в вопросе «как сделать милую и красивую форму обратной связи» нет «с нуля, разработать, написать, своими руками, самостоятельно». И правильно. А зачем?

  Скачайте просто скрипт Simple Send Mail или другую его версию Simple Send Mail Order с сайта landman.ru.

  Скачать скрипт формы (.zip, 169Кб)

  Вот какие формы вы получите:

  Обратите внимание, скрипты поставляются с встроенной каптчей. Второй скрипт (Simple Send Mail Order) имеет одно отличие — он одновременно отправляет два письма. Одно заказчику, другое — вам.

  Как сделать одну из таких форм обратной связи на сайте? Качайте архив, закачивайте файлы из архива на сайт в каталог /sendmail, настраиваете конфигурационный файл config.php (прописываете свой email, другие настройки) и можно пользоваться — скрипт формы обратной связи готов к работе. Покажу как выглядит конфигурационный файл:

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

  https://www.youtube.com/watch?v=gl41IJSoZsI

  Вставка на сайт производится просто:— можете дать ссылку на /sendmail/index.php

  — можете сразу вставить на страницу, при помощи кода

  Пример кода:

  Код можно найти на сайте, ссылка на который размещена выше.

  Форма довольно минималистичная — не всем понравится дизайн «прямиком из девяностых», кому-то не нужна каптча, кому-то не хватает Аякса и красивых сообщений об ошибке. Решение есть.

  Super (AJAX) Contact Form — русифицированная версия формы обратной связи

  Скачать (.zip, 72.4Кб)

  Работает эта штучка на чистом PHP + jQuery & AJAX — очень удобно для блога или небольшого интернет-магазина. Пример формы:

  Как выглядит конфиг внутри («codeassetsxmlconfig.php»):

  Конфиг для настройки полей («codeassetsxmlfields.php»):

  Установка скрипта формы для связи SuperAJAX ContactForm ничем не отличается от инструкции по установке другого скрипта выше. Содержимое архива закачиваете на сервер и пользуетесь.

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

  — есть подсказки под полями

  Например, посмотрите как в этой форме связи выводятся ошибки:

  Выглядит неплохо! А вот что увидит пользователь, после успешной отправки сообщения:

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

  Вы также можете посмотреть интересный видеоурок по данному скрипту:

  Итак, вы познакомились с двумя функциональными скриптами и можете выбрать свой. Но не торопитесь, потому что вас еще ждет третий PHP-cкрипт формы обратной связи для блога. Тот, которым я пользуюсь уже наверное года два с лишним.

  Установка готовой бесплатной формы обратной связи на сайт

  Итак, на одном сайтов установлена вот такая «кнопка»:

  Если нажать на нее, вниз «выпадет» форма обратной связи:

  На другом сайте установлена всплывающая (popup) форма обратной связи, выглядит она так:

  А вот что придет вам на почту, после того как пользователь оставит свои контактные данные в форме:

  Очень удобно. Вот код для работы формы как в первом случае:

  $(«#forma0»).toggle(function() {$(«#forma1»).slideDown(«slow»);}, function() {$(«#forma1»).slideUp(«slow»);});

  Расшифровываю: в скрытом div-блоке подгружается скрипт и все что с ним связано, этот блок при помощи JavaScript открывается и все — можно оставлять свои данные. Преимущество такого подхода — пользователю не нужно ждать, пока там что-то подгрузится еще.

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

  Приведу содержимое конфиг-файла

  Все! Больше ничего нет, остальное (стили) — вручную. Но они и так везде вручную. При этом форма использует Ajax, выводит сообщения об ошибке, а еще можно задать свою собственную маску номеров. Вот скриншоты:

  После отправки номера, пользователю увидит ваше сообщение, которое также можно задать.

  Скачать форму можно по ссылке, либо с этого блога.

  Скачать скрипт формы обратной связи (заказа обратного звонка) — .zip, 16.4Кб

  Это проверенное решение, которым я вполне доволен. Я нашел в этом скрипте для себя несколько преимуществ:

  1. Он присылает URL страницы, с которой была отправлена заявка через форму.

  2. На одной странице может быть несколько таких форм обратной связи и они никак не будут конфликтовать друг с другом.

  3. Форма подгружается не PHP-кодом, а div-блоком — это упрощает ее вставку в любое место сайта на порядок. Можно даже в тексте вставлять, если умеете.

  И он тоже позволяет загружать файл, то есть ничем не уступает.

  Ну а про онлайн конструкторы и навороченные генераторы скриптов обратной связи — как-нибудь в другой раз. Может заодно еще и формы для WordPress обсудим. Посмотрим.

  📹 Видео

  WPForms - WordPress плагин для контактной формы. Инструкция по созданию формы обратной связи.Скачать

  

  Форма обратной связи на PHP | Как сделать форму обратной связи для сайтаСкачать

  

  Форма обратной связи для сайтов и Landing Pages (Универсальный PHP скрипт)Скачать

  

  Форма обратной связи для сайта на HTML и CSS.Скачать

  

  Как создать форму обратной связи на сайте. Обратная связь - это просто. Кодим и объясняем что к чемуСкачать

  

  Google Формы. Урок 2. Как сделать форму для обратной связи с сайта. Делаем свою первую формуСкачать

  

  14. HTML формы обратной связи. Основы HTML верстки.Скачать

  

  Создание формы обратной связи | #10 - Пример создания сайта на DjangoСкачать

  

  Ajax формы обратной связи на сайтеСкачать

  

  Яндекс формы. Урок 2. Делаем форму обратной связи и размещаем ее на своем сайтеСкачать

  

  Форма обратной связи PHP, JS | Рабочая схема.Скачать

  

  Как создать форму (форма обратной связи) | Тильда Конструктор для Создания СайтовСкачать

  

  Как сделать всплывающую форму обратной связи на WordPressСкачать

  

  #51 Уроки PHP - Учим язык PHP, Форма обратной связи на языке PHP и отправка письма на почтуСкачать

  

  PHP для начинающих. Урок #12 - Создание формы обратной связи на PHPСкачать