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


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

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

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

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

HTML

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

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

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

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

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

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

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 я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты:

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

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

PHP

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

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

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

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Ваше сообщение успешно отправлено</title> </head>   <body>   <?php $back = "<p><a href=\"javascript: history.back()\">Вернуться назад</a></p>";   if(!empty($_POST['name']) and !empty($_POST['phone']) and !empty($_POST['mail']) and !empty($_POST['message'])){ $name = trim(strip_tags($_POST['name'])); $phone = trim(strip_tags($_POST['phone'])); $mail = trim(strip_tags($_POST['mail'])); $message = trim(strip_tags($_POST['message']));   mail('почта_для_получения_сообщений@gmail.com', 'Письмо с адрес_вашего_сайта', 'Вам написал: '.$name.'<br />Его номер: '.$phone.'<br />Его почта: '.$mail.'<br /> Его сообщение: '.$message,"Content-type:text/html;charset=windows-1251");   echo "Ваше сообщение успешно отправлено!<Br> Вы получите ответ в ближайшее время<Br> $back";   exit; } else { echo "Для отправки сообщения заполните все поля! $back"; exit; } ?> </body> </html>

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

$back = "<p><a href=\"javascript: history.back()\">Вернуться назад</a></p>";

Этой строкой мы создаем ссылку для возвращения на предыдущую страницу. Поскольку мы заранее не знаем с какой страницы пользователь попадет на эту, то делается это при помощи маленькой 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.'<br />Его номер: '.$phone.'<br />Его почта: '.$mail.'<br /> Его сообщение: '.$message,"Content-type:text/html;charset=windows-1251");

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

  1. 'почта_для_получения_сообщений@gmail.com' – сюда между кавычек вставляете свою почту
  2. 'Письмо с адрес_вашего_сайта' – это тема сообщения, которое будет приходить на почту. Можно написать сюда что угодно.
  3. 'Вам написал: '.$name.'<br />Его номер: '.$phone.'<br />Его почта: '.$mail.'<br />Его сообщение: '.$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом <br /> делаем перенос строки, чтобы сообщение в целом было читабельно.
  4. 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; } </script>

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

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

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

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

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

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

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

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

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

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

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

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

О защите от спама я напишу в следующих статьях.

Оценок: 46 (средняя 4.8 из 5)

vaden-pro.ru

что это такое, как ее создать и сделать эффективной

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

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

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

Для чего нужна обратная связь

  • Ответы на вопросы посетителей.
  • Анкетирование.
  • Прием заказов посредством сайта.
  • Прием заявок на обратные звонки.

Два вида коммуникации с посетителем

  • Отправка на email. После заполнения предложенных полей форма отправляется на e-mail администратора сайта. Все дальнейшее общение происходит посредством обмена электронными письмами или выходом в офф-лайн (телефон и т.п.).
  • Отправка в систему управления сайтом. После заполнения администратор сайта видит запрос в списке заполненных данных в CMS, и там же может его обработать. К примеру, таким образом может быть реализована гостевая книга или система «Вопрос-ответ». Покупка товаров в интернет-магазине работает подобным образом.

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

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

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

Для разработки необходимы знания php, html и javascript. На CMS существуют разные конструкторы, позволяющие сделать сервис обратной связи, также можно воспользоваться сервисами в интернете. Но все же предпочтительнее первый способ. Вы, как администратор сайта, должны точно знать, какие механизмы применяются для отправки сообщений.

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

Структура

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

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

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

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

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

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

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

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

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

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

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

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

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

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

semantica.in

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

20.03.2015

Вообще-то, данная форма обратной связи подойдёт не только для статических сайтов, но и прекрасно будет работать в связке с любой CMS, — будь то ресурс на движке WordPress или любой другой.

Если с сайтами на CMS всё просто — за отправку сообщений там отвечает функционал движка и настройки хостинга, на котором развёрнут сайт, то для какого-нибудь статического сайта, собранного на голом html уже придётся искать другие варианты.

Учитывая то, что последние несколько лет всё ещё в тренде сайты-одностраничники (Landing Page или продающие страницы), которые чаще всего являются статическими, вопрос о способах создания контактной формы на таких сайтах вполне актуальный.

В сегодняшнем примере, за отправку сообщений с нашего сайта будет отвечать сервис Formspree.io 

Вот код предлагаемой простейшей формы:

<form action="//formspree.io/[email protected]"> <input type="text" name="name"> <input type="email" name="_replyto"> <input type="submit" value="Send"> </form>

 А вот так она выглядит:

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

Обратите внимание на значение поля   form action  — здесь мы видим url сервиса и email на который будут отправляться наши сообщения. Далее идут стандартные поля формы.

Приступим непосредственно к созданию рабочего примера и разберём этот процесс поэтапно.

Для начала подредактируем внешний вид формы: добавим поле для сообщения, а также добавим и русифицируем поля имён, плейсхолдеров и кнопки:

Код получившейся формы:

<form action="//formspree.io/[email protected]"> <p><input type="text" name="Имя" placeholder="Имя" /></p> <p><input type="email" name="_replyto" placeholder="Email" /></p> <p><textarea name="Сообщение" placeholder="Ваше сообщение" rows="7"></textarea></p> <input type="submit" value="Отправить" /> </form>

Теперь давайте сделаем все три поля (Имя, email и Сообщение) обязательными для заполнения. Для этого будем использовать атрибут   required 

Получившийся код:

<form action="//formspree.io/[email protected]"> <p><input type="text" name="Имя" required placeholder="Имя" /></p> <p><input type="email" name="_replyto" required placeholder="Email" /></p> <p><textarea name="Сообщение" required placeholder="Ваше сообщение" rows="7"></textarea></p> <input type="submit" value="Отправить" /> </form>

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

— во-первых, отправителя письма перекидывает на страницу стороннего ресурса;

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

Исправим эти погрешности.

Добавим скрытое поле, и в нём пропишем url страницы нашего сайта, на который произойдёт редирект после успешной отправки сообщения:

<input type="hidden" name="_next" value="/thanks.html" />

В моём примере это страница thanks.htmlПрописать можно как относительный, так и абсолютный адрес страницы.

Саму страницу thanks.html оформляем в соответствии с общим дизайном сайта.

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

<input type="hidden" name="_subject" value="Сообщение с моего сайта" />

 Вот как это будет выглядеть в нашем почтовом ящике:

Далее, можно снабдить нашу форму лёгкой защитой от спама:

<input type="text" name="_gotcha" />

 Суть защиты такова: по атрибуту  display:none  мы видим, что это поле скрытое, но в отличие от живого человека, спам боты его видят и соответственно заполняют. Перед отправкой письма адресату, сервис проверяет, заполнено это поле или нет. Если поле заполнено, то сообщение блокируется. Конечно, некоторые боты уже научились выявлять такие трюки, но от большинства спам мусора, такая защита всё ещё спасает.

Итак, в итоге у нас получился следующий код:

<form method="post" action="//formspree.io/[email protected]"> <input type="hidden" name="_next" value="/thanks.html" /> <input type="hidden" name="_subject" value="Сообщение с моего сайта" /> <input type="text" name="_gotcha" /> <p><input type="text" name="Имя" required placeholder="Имя" /></p> <p><input type="email" name="email" required placeholder="Email" /></p> <p><textarea name="Сообщение" required placeholder="Ваше сообщение" rows="7"></textarea></p> <input type="submit" value="Отправить" /> </form>

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

 Перед этим, в поле form action не забудьте заменить [email protected] на свой email. 

Перед тем как форма начнёт полноценно работать, нам надо активировать email, который мы прописали в коде. Для этого откройте страницу с вашей формой, заполните все поля и нажмите Отправить. Сервис выдаст следующее сообщение:

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

Всё! Адрес электронной почты подтверждён и следующее сообщение, отправленное из нашей формы обратной связи, попадёт уже непосредственно в наш ящик:

И напоследок, ещё несколько важных нюансов:

  •  Если рабочий код формы обратной связи вы перенесли на какую-либо другую страницу вашего сайта, то, несмотря на то, что email остался прежним, процедуру верификации email’а необходимо будет пройти заново. 

 

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

Естественно, с помощью многочисленных шаблонов можно придать ей стильный, модный, молодёжный вид. Например, такой:

Всё. Наша форма обратной связи готова.

sergeyyarmoluk.ru

Обратная связь - создаем форму для сайтов на HTML/PHP в Joomla и Wordpress

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

Поэтому если на вашем ресурсе контактного раздела нет — стоит его установить. Разберемся, как это сделать.

Решения для организации обратной связи

Естественно, что сейчас существует несколько способов организации обратной связи на сайте: от универсальных скриптов на php до плагинов и модулей для CMS. То есть, необходимости писать код вручную, как видите, нет.

Можно воспользоваться следующими универсальными решениями:

  • прибегнуть к услугам бесплатных онлайн-сервисов, которые автоматически генерируют код HTML формы связи. Но при этом файл обработки php нужно будет писать и ставить самостоятельно. Вот один из ресурсов для этих целей
  • Обратиться к помощи бесплатных онлайн-сервисов, генерирующих код HTML и предоставляющих обработчики данных на php, которые зачастую размещаются на серверах этих сервисов. Один из примеров подобных ресурсов здесь.
  • Найти в Интернете бесплатные скрипты для установки формы обратной связи. Этот вариант применим для людей, знающих на определенном уровне HTML и PHP, ведь скрипт в любом случае придется адаптировать конкретно под свой сайт.

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

Простая установка форм обратной связи в HTML

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

Но для начала следует не забыть внести поправки в стандартный файл config.php — нужно изменить кодировку и написать верный электронный адрес получателя.

Папку с исправленными файлами нужно скопировать в корневой каталог сайта, но перед этим ограничив ее индексацию в файле Robots.txt (Disallow: /sendmail-zakaz).

По сути, это все — если действия выполнены правильно, готовая форма будет выглядеть так:

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

После того, как все необходимые параметры внесены, следует ввести проверочную капчу и нажать на кнопку «Генерировать», а после — «Получить код».

Полученный код нужно просто скопировать на выбранную страницу сайта.

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

Для функционирования формы нужен файл-обработчик. Назовем его mail.php и сохраним в такой код:

В итоге получится такая форма связи:

Форма обратной связи в Joomla

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

Итак, для настройки компонента заходим в административную панель и выбираем вкладку «Компоненты/Контакты/Категории контактов».

Откроется страница, на которой не будет ни одной категории. Чтобы создать ее, нажмем на кнопку «Новый».

Система предложит заполнить поля «Заголовок» и «Псевдоним». Сделав это, нужно поставить галочку «Да» в строке «Опубликовано».

Настройки нужно сохранить, нажав одноименную кнопку в правом верхнем углу окна. Категория есть, осталось создать страницу с контактной формой. Для этого нужно зайти во вкладку «Контакты» и нажать на кнопку «Новый» в правом верхнем углу.

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

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

Сохранить настройки можно, нажав соответствующую кнопку в правом верхнем углу.

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

В этом меню создаем новый пункт. Для этого нажимаем кнопку «Создать» и в открывшемся меню выбираем «Контакты/Страница контакта».

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

Переходим на сайт, находим пункт «Контакты» и нажимаем на него. Должна открыться следующая страница:

Обратная связь для WordPress

В этой системе форму обратной связи можно создать, также прибегнув к помощи плагинов. Самый популярный и функциональный — плагин Contact Form 7.

Скачать его можно с официального сайта, либо же добавить и активировать через меню административной панели «Плагины/Добавить новый»

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

После этого нужно проследовать во вкладку «Страницы/Добавить новую», и, включив режим HTML, вставить ранее скопированный код формы обратной связи

Если не нравится название страницы «Контакты», можно переименовать ее как угодно. Также можно ввести все необходимы настройки.

Оформив страницу по своему усмотрению, следует нажать «Опубликовать». Страница готова. Выглядеть она будет примерно так

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

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

В зависимости от плагина, можно выбрать стиль контактной формы — будь то стандартная:

Либо же с эффектом подсветки:

Или же оригинальная дизайнерская в виде печатной машинки:

Справиться с установкой таких форм сможет даже не профессионал.

wildo.ru

Форма обратной связи для сайта с отправкой на почту

Приветствую вас всех мои друзья! Сегодня я хочу поделиться с вами уроком. На какую тему? Думаю, вы и сами прекрасно догадались!

Форма обратной связи для сайта, которую я вам покажу – основана на использовании технологии Ajax. Но не волнуйтесь, знать этого вам не надо, все уже готово, останется только установить эту форму и настроить под себя!

Демо

Форма обратной связи php с отправкой на почту

Эта форма обратной связи на сайт очень функциональна сама по себе, к ней подключено несколько плагинов, которые создают привлекательный внешний вид и проверяют валидность (читай правильность) введенных вами данных. Эти плагины работают на великом и могучем JavaScript! А называются так:

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

    2. formValidator – а этот плагин проверяет форму контактов на правильность введенной информации и в случае чего выводит всплывающие подсказки!

Для полноценной работы этой формы будет использован класс – PHPMailer. Считается одним из лучших!

Заметка для самых умных:

Форму обратной связи для сайта можно сделать на HTML! Но работать она начнет только при помощи PHP! И никак иначе!

Это я для тех, кто ищет форму обратной связи только на HTML. Сделать сделаете, но работать она не будет!

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

Эту форму обратной связи я откопал на сайте www.tutorialzine.com ссылка ведет непосредственно на страницу оригинала, т.е. сайт автора данной формы!

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

Признаюсь честно, мы с этой «формочкой» провозились два дня, так как начинали всплывать различные косяки, а недоделанную до конца форму обратной связи, тем более такую красивую, выкладывать не хотелось! Так что если вы любитель все сделать сами, и в вашу светлейшую голову влезет мысль – самому русифицировать данную форму, дам пару советов, так как просто переводом фраз не ограничишься:

    1. Эта форма обратной связи заточена под буржуев, от туда же и скачена, поэтому она будет присылать вам вместо нормальных русских символов – кракозяблы. Разберитесь с кодировкой. Да и вообще все «тюлени» будут связаны с этим!

    2. Скрипт валидации изначально не понимает наши букв, поэтому их там надо будет прописать!

    3. Даже после этих действий если указать тему письма на русском, письмо приходит с темой – No subject (надеюсь правильно написал), это лечится если указать кодировку в файле класса PHPMailer.

    4. В оригинальной форме текст в полях ввода прижимался к низу, а не по середине. Это глюк плагина JQTransform.

Ну, вроде все расписал и предупредил. Поехали дальше!

Для тех кто хочет получить уже готовую форму обратной связи:

    1. Скачиваем скрипт формы обратной связи для сайта (под видео).

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

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

И так, смотрите видео по установке формы, там все рассказано. Если возникнут какие либо вопросы – задаем их или на форуме, или здесь в комментах. Если вопрос сугубо технического характера, то лучше на форуме.

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

master-css.com

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

Форма обратной связи на сайт

Этот пост посвящён тому, как очень просто создать форму обратной связи для блога или сайта используя только HTML и CSS.Здравствуйте, уважаемый читатель. На связи Евгений Назаров.

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

Это было нечто, чего я только не попробовал, в итоге выходило так, что-либо ломался Блог и форма не работала либо всё было ок, красивая удобная форма, но не рабочая всё равно. Я не знаю почему так выходит, может тема не позволяет, может какие силы нечистые, может мои прямые руки. 😀

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

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

 

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

Решение нашлось само собой, как раз в тот момент когда я перестал искать.Мой друг делал себе лендинг и попросил меня оценить его работу. В тот момент я заметил у него форму обратной связи и спросил, как он её сделал.

Он ответил что форма не самописная, просто взял код со стороннего сервиса. (Я как вы знаете уже перепробовал кучу всяких сервисов и генераторов форм обратной связи, плагинов и прочих инструментов, всё было безуспешно.)

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

Но это было совсем не важно, самое главное что она, блин, рабочая, отправляет письма.

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

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

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

 

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

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

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

1) Далее вставляем код HTML через редактор WordPress предварительно переключившись на «Текст», прямо на ту страницу, где вы желаете видеть форму.

Это картинка, код вы можете скачать по ссылке выше.

В коде нужно прописать адрес почты, на которую вы хотите получать письма, её нужно вставить во второй строчке вместо [email protected] без пробелов.

2) Сделали?! Хорошо. Теперь добавим ей стилей, вставив его в самый конец файла style.css вашей темы.

Это картинка, код вы можете скачать по ссылке выше.

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

Если кнопка отправить находится не в том месте, где должна быть, то поиграйтесь в идентификаторе #contact_submit со значением margin-left: 470px; увеличивая или уменьшая число.

На этом всё, можете опубликовывать страницу. Если форма отображается не корректно или без стилей, попробуйте зажать сочетание клавиш ctrl+F5 или если у вас стоит плагин HyperCash или что-то подобное, удалите весь кеш через него.

Теперь всё должно работать.

 

Подтвердите вашу почту.

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

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

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

На локальном сервере всё работало прекрасно, выдавались красивые всплывающие поля с ошибками в которых было написано, что-то типа «Вы не ввели имя», но залив код на сайт, форма перестала работать, я плюнул и оставил всё как было. Если найду решение и этой проблемы, обязательно сделаю дополнение к посту.

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

 

Всегда с Вами,Евгений Назаров.

Понравилась статья? Поделись ею в Соц. Сетях.

xn----8sb3bggbm3hya.xn--p1ai

Как сделать обратную связь на сайте через плагин Contact Form7

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

Как сделать обратную связь на сайте wordpress

Форму обратной связи на сайте мы будем делать на примере движка wordpress. Для этого нам понадобится бесплатный плагин под названием Contact Form 7.

Найти его можно через Консоль сайта – Плагины – Добавить новый.

В правом верхнем поле введите название плагина Contact Form 7. Страница обновится, и перед вами откроется список подобных плагинов.

Вам нужен этот:

Нажимаете кнопочку Установить, а затем Активировать плагин. Сложного здесь ничего нет, поэтому справитесь с легкостью.

Как настроить плагин Contact Form 7

После активации плагина в левом меню у вас появится новый раздел под названием Contact Form 7 с конвертиком.

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

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

Обратите внимание, что после того, как вы нажмете кнопочку Изменить, перед вами открывается следующая страница. Здесь есть 4 вкладки:

  • Шаблон формы
  • Письмо
  • Уведомления при отправке формы
  • Дополнительные настройки.

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

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

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

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

С Дополнительными настройками плагина вы можете ознакомиться на сайте разработчика.

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

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

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

В консоли сайта добавляете новую страницу и через вкладочку Текст вставляете скопированный код. Для удобства читателей напишите, для чего здесь эта форма обратной связи. Страницу «обзовите» просто, например, Контакты. Если вы создаете форму для связи с рекламодателями, соответственно, формулировки могут быть другими.

Не забудьте сохранить изменения.

Чтобы проверить, работает ли форма обратной связи, перейдите на сайт. У вас должна появиться страница с название Контакты. Заполните поля формы для теста и нажмите кнопочку Отправить. Если вы все сделали правильно, к вам на почту, которую вы указали в настройках плагина Contact Form 7, должно прийти тестовое сообщение.

Сегодня мы разобрали тему Как сделать обратную связь на сайте. На самом деле эту статью я создала в качестве дополнительного материала к бесплатному видеокурсу “Как сделать личный блог на wordpress за 1 час”, который вы можете скачать по этой ссылке >>>.

Для тех, кто предпочитает текстам видеообучение, предлагаю видеоурок на тему как сделать обратную связь на сайте с помощью плагина Contact Form 7:

Денежные ручейки

denezhnye-ruchejki.ru