Форма обратной связи (видео)

Есть проблемы с ранжированием, проект не растет, хотите проверить работу своих специалистов по продвижению? Закажите профессиональный аудит в Семантике

Форма обратной связи на сайте – это механизм для общения между посетителем ресурса и его администраторами.

Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

Сервер для PHP

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

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

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

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

Почему используется HTML и PHP?

Для CRM, таких как WordPress, Joomla и других можно найти различные плагины для установки формы обратной связи для сайта. Однако, что мне не нравится в таких плагинах, так это часто их низкая производительность и замедление сайта из-за загрузки лишнего «мусора» — ненужных стилей и скриптов. Так как эти плагины все равно выдают в результате тот же код HTML, то предлагаю использовать простую, но полноценно функциональную форму, которую можно изменить под свои нужны, например, под обратный звонок с сайта.

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

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

Структура

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

Как правило, обязательными к заполнению являются поля: ФИО, телефон, e-mail, ваш вопрос. Самая простая страница коммуникации должна содержать эти поля.

Помимо текстовых полей, страница может содержать элементы выбора.

Пример сервиса обратного звонка

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

Пример усложненной формы обратной связи для заказа

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

Где размещать

Обычно применяют два вида размещения формы:

• На отдельной странице в случае, если форма содержит много полей.
• На странице «Контакты» под заголовком «Напишите нам».

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

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

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

Ско­пи­ро­вать код

Код ско­пи­ро­ван

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

     
language: CSS
          

Ско­пи­ро­вать код

Код ско­пи­ро­ван

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

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

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

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

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

Ско­пи­ро­вать код

Код ско­пи­ро­ван

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

Структура кода реализации обратной связи для сайта

Далее приведен алгоритм работы обратной связи:

1. Код HTML формы, вставленный на страницу + CSS стили для его оформления.
2. PHP файл, который и выполняет отправку письма или иное действие для регистрации запроса.

HTML&PHP форма (и скрипт) обратной связи для блога, сайта

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

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

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

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

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

Вставка на сайт производится просто:

— можете дать ссылку на /sendmail/index.php

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

Пример кода:

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

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

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

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

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

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

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

Мы спе­ци­аль­но дела­ем так, что­бы фор­ма отсы­ла­ла пись­ма на тот же адрес, кото­рый одно­вре­мен­но и адрес отпра­ви­те­ля. Это сде­ла­но для того, что­бы вы полу­ча­ли эти пись­ма, когда буде­те тести­ро­вать сер­вис. В рабо­чем про­ек­те заме­ни­те пере­мен­ную $email в функ­ции send() на свой насто­я­щий адрес, что­бы самим полу­чать пись­ма из фор­мы.

     
language: PHP
          

Ско­пи­ро­вать код

Код ско­пи­ро­ван

Правила хорошего тона

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

Связь через формы – самый быстрый метод коммуникации с клиентами, дающий возможность подготовить детальные ответы и собрать уникальную базу e-mail адресов и телефонных номеров. Помните: вы не имеете право пользоваться этой базой для массовой рассылки и передавать ее сторонней организации. По статистике ваше предложение будет работать, если человек в данный момент ищет именно вашу услугу или товар. Если потенциальный клиент к вам уже обратился, в ваших силах предложить ему сейчас именно то, в чем он заинтересован.

Отправляем PHP-скрипт на сервер

Как загру­жать фай­лы, мы рас­ска­зы­ва­ли в ста­тье про пуб­ли­ка­цию сай­та в Сети, поэто­му про­сто сде­ла­ем всё по той инструк­ции:

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

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

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

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

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

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

<div id=»form»>

<p><a style=»text-decoration: none; border-bottom: 1px dotted; cursor: pointer;» id=»forma0″>Заказать звонок</a></p>

<div id=»forma1″ style=»display:none; background-color: #fff;»>

<script src=»sendmailforms/jquery.maskedinput-1.2.2.min.js» type=»text/javascript»></script>

<link rel=»stylesheet» type=»text/css» href=»sendmailforms/form.css» />

<script src=»sendmailforms/wait_for_call.js» type=»text/javascript»></script>

<script src=»sendmailforms/ajaxupload.js» type=»text/javascript»></script>

<script src=»sendmailforms/upload_file.js» type=»text/javascript»></script>

<div class=»call-me-form» title=»Заказать звонок» button=»Заказать звонок» style=»width: 200px»></div>

</div>

<script>

$(«#forma0»).toggle(function() {

$(«#forma1»).slideDown(«slow»);

}, function() {

$(«#forma1»).slideUp(«slow»);

});

</script>

</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

Что дальше

Даль­ше как обыч­но — улуч­ша­ем.

1. Напри­мер, сей­час, если не запол­нить поле с темой или адре­сом, то будет ошиб­ка и пись­мо не уйдёт. При этом поль­зо­ва­тель не будет знать, что же имен­но он сде­лал не так. Мож­но орга­ни­зо­вать про­вер­ку на запол­не­ние полей и выво­дить нуж­ные сооб­ще­ния, если что-то не запол­не­но.
2. Все­гда мож­но улуч­шить без­опас­ность и защи­тить скрипт от мно­го­крат­ных запро­сов — что­бы никто не абью­зил сер­вис и не делал из нас спа­ме­ров.
3. А ещё при отправ­ке мы пере­хо­дим на стра­ни­цу обра­бот­чи­ка, а потом вооб­ще на дру­гой сайт. Что­бы сде­лать как у всех, что­бы фор­ма отправ­ля­лась без пере­за­груз­ки стра­ни­цы, мож­но исполь­зо­вать Ajax. Когда-нибудь добе­рём­ся и до него. Под­пи­сы­вай­тесь, что­бы не про­пу­стить.

Практику веб‑программирования можно получить в Яндекс.Практикуме

Первый курс — бесплатно.

Попробовать

Простой скрипт обработки данных формы HTML в PHP скрипте

Приведем сначала исходный код:

Разберем подробнее

проверяем или используется метод POST

Далее проверяем или были высланы данные с полей ввода

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

Функция удаляет пробелы в начале и в конце строки. Далее формируем письмо и все что подготовили отправляем функцией .

Оформление формы обратного звонка для сайта CSS

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

Разберем подробнее код.

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

Подпись и поле ввода обернуты в контейнер :

Для этого дива присвоим отступы сверху и снизу:

Кнопке делаем ширину равной ширине родительского блока и присваиваем — расчет ширины по границе, что бы она не выходила за пределы родительского блока:

Аналогично для подписей и полей ввода:

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

Звездочку делаем красной:

Оформляем кнопку :

При наведении на кнопку настраиваем изменение цвета:

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

Поделитесь в соц.сетях:

Оцените статью: (Пока оценок нет) Загрузка...

Читайте также:

31 актер и его роль в Отель «Миллион дол... 31 актер и его роль в Конец августа, нач... Отзывы на фильм Спасибо деду за победу (... 247 градусов по Фаренгейту (фильм 2011)...