Содержание

Создаем форму обратной связи на 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)">

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

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

  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. Происходит выход из скрипта проверки.

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

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

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

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

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

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

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

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

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

vaden-pro.ru

Генератор форм обратной связи | QForm

При установке формы обратной связи вебмастеру мало настроить нужные поля и привязку к почте. Необходимо гармонично встроить ее в дизайн сайта, настроить фильтрацию спама, часто — наладить интеграцию с CRM и много всего другого. Способов решения задач много: некоторые используют бесплатные сервисы, вроде Google Forms и Яндекс.Формы, другие — платные/условно-бесплатные инструменты, третьи — различные плагины для CMS или же делают формы под все свои цели с нуля с помощью программистов.

Мы предлагаем решение проще — гибкий и многофункциональный конструктор QForm, который генерирует формы любой сложности, синхронизируемые с CRM-системами, SMS-сервисами и облачными АТС.

За счет простоты настроек и понятного интерфейса его освоит любой пользователь без навыков программирования. Формы подстраиваются под любые CMS-системы, в том числе самописные. Встроенная система аналитики мониторит источник заявок.

 

Инструкция по созданию формы на QForm

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

 

Создаём форму

Добавляем новую форму и даем название для собственного удобства. Щёлкаем Редактировать и переходим к настройкам.

 

Настраиваем параметры формы

Работаем с вкладкой Основные параметры формы. Ставим галочку активности, и если требуется дополнительная защита от спама, добавляем галочку в пункте ИСПОЛЬЗОВАТЬ Google ReCAPTCHA. В этом случае на странице «Общие настройки» сайта (в разделе Google ReCAPTCHA) задаем необходимые для взаимодействия параметры — ключ сайта и секретный ключ, получаемые на сайте сервиса ReCaptcha.

Возвращаемся в ОСНОВНЫЕ ПАРАМЕТРЫ ФОРМЫ. Справа система выдаст 2 кода: 1-й размещается в разделе сайта Head, 2-й в месте, где форма должна показываться (в контенте, в конце или начале страницы, в футере и т.д.). Но продолжим работу с настройками.

 

Задаём поля формы

Переходим в раздел Поля формы. Добавляем новое поле и задаем имя — Name, выбираем тип поля text, в placeholder прописываем подсказку для пользователя внутри поля. В нашем случает это — «Ваше имя». Ставим галочку «Обязательно для заполнения».

Затем добавляем поле для телефона. В placeholder прописываем «Ваш телефон», в имени поля – Phone и выбираем тип поля Phone. Если требуется настройка интеграции с телефонией, то переходим в соответствующий раздел и настраиваем.

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

Чтобы пользователь мог сопровождать свои заявки комментариями, нужно создать текстовое поле с типом textarea, в имени прописать message, а в плейсхолдере — Сообщение.

Последнее поле (обязательное для любой формы) — кнопка ОТПРАВИТЬ: прописываем имя поля, например send, выбираем тип submit, в placeholder добавляем название кнопки. Перед кнопкой встраивается ссылка на соглашение об обработке персональных данных, которое мы создаем в разделе Соглашения. По умолчанию уже прописано типовое соглашение, которое можно отредактировать. Сохраняем изменения и переходим в следующую вкладку.

 

Определяемся с дизайном

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

Пользователи, владеющие начальными навыками веб-разработки, могут применять собственные стили и подстроить форму под дизайн своего сайта. Для этого нужно убрать галочку рядом с «Использовать оформление сервиса QForm» и вернуться в раздел Поля формы.

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

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

 

Соглашение о персональных данных

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

 

Java-Script события

Если есть потребность отслеживать статистику по обращениям (а она почти всегда есть), мы можем настроить отправку целей в систему аналитики Яндекса или Google во вкладке JavaScript-события. Шаблоны кода для отправки указаны на этой же странице, останется только подставить в код номер счётчика и имя событий. Эту же вкладку можно использовать для выполнения любого другого Java-script кода, например JS-редирект на другую страницу вашего сайта.

Завершив настройку формы, устанавливаем коды из первой вкладки в раздел Head и на нужной странице сайта. Вот что в итоге у нас получилось! Создание формы обратной связи заняло примерно 5 минут, а в первый раз займёт не более 10. 

Вид полученной формы 2

Вид полученной формы 2Назад на главную

qform24.com

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

Структура

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

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

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

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

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

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

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

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

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

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

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

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

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

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

semantica.in

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

.cover {
    background:#CCC; 
    width:700px; 
    margin:auto; 
    padding-left:60px;
}
 
h3.contact { 
    padding-left: 125px; 
    font-size: 66px; 
    color: #ff5400; 
    height: 105px; 
    background: url(images/contact.png) no-repeat -10px -10px;  
    font-family: sans-serif;
}
 
p.contact { 
    font-size: 24px; 
    margin-bottom: 15px; 
    line-height: 36px; 
    font-family: sans-serif, Arial; 
    color: #4b4b4b; 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); 
}
 
#contact {
    margin-bottom: 0px; 
}
 
input[type="text"] {
    width: 400px; 
}
 
textarea { 
    width: 600px; 
    height: 275px; 
}
 
label { 
    color: #ff5400; 
}
 
input, textarea { 
    background-color: rgba(255, 255, 255, 0.4); 
    border: 5px solid rgba(122, 192, 0, 0.15); 
    padding: 10px; 
    font-family: Keffeesatz, Arial; 
    color: #4b4b4b; 
    font-size: 24px; 
    -webkit-border-radius: 5px;
    margin-bottom: 15px;
    margin-top: -10px;
}
 
input:focus, textarea:focus { 
    border: 5px solid #ff5400; 
    background-color: rgba(255, 255, 255, 1);
}
 
input[type="submit"] {
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 24px;
    background-color: #7ac000;
    padding: 5px 36px 8px 36px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.23, #619702),
        color-stop(0.62, #7ac000)
    );
    background: -moz-linear-gradient(
        center bottom,
        #619702 23%,
        #7ac000 62%
    );
}
 
input[type="submit"]:hover {
    color: #fff; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.4); 
    background-color: #ff5400;
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.23, #c34000),
        color-stop(0.62, #ff5400)
    );
    background: -moz-linear-gradient(
        center bottom,
        #c34000 23%,
        #ff5400 62%
    );
}
 
input[type="submit"]:active { 
    top: 1px; 
}

sitehere.ru

как её сделать на сайте

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

Форма обратной связи: что это такое

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

Форма обратной связи: что это такое

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

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

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

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

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

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

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

Теперь к вопросу о том, где на сайте можно разместить такую форму. Если она содержит достаточное количество полей для заполнения, то для такой формы выделяется отдельная страница, или же на вкладке «Контакты». А вот размещать такую форму на главной странице сайта не стоит. Но если Ваш сайт представлен в формате Landing Page – это значит, что форма по умолчанию будет размещаться на главной странице. Так как лендинги представляют собой одностраничный веб-ресурс.

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

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

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

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

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

pro-promotion.ru

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

В uKit доступно два вида формы обратной связи: виджет «Обратная связь» и форма во всплывающем окне.

Виджет «Обратная связь»

Перетащите виджет на сайт и кликните по нему. В панели слева будут доступны следующие настройки:

  • Включение/отключение отображение заголовка;
  • Настройка полей формы;
  • Включение CAPTCHA для дополнительной защиты от спама;
  • Редактирование сообщения, которое увидит клиент после отправки формы;
  • Настройка email, на который будут отправляться заявки;
  • Добавление класса виджету;
  • Включение сбора статистики.

Редактирование подписей в полях производится в самой форме.

Форма во всплывающем окне

Привязать такое окно можно к следующим виджетам:

  • Слайдер;
  • Кнопка;
  • Карточка;
  • Прайс-лист.

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

  • Настройка полей формы;
  • Согласие на обработку персональных данных;
  • Редактирование сообщения, которое увидит клиент после отправки формы;
  • Тонкие настройки метки обязательного поля;
  • Настройка email, на который будут отправляться заявки;
  • Включение сбора статистики;
  • Редактирование текста в полях формы.

Настройка полей

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

  • Товар или услуга. Сюда автоматически подставляется название товара/услуги из виджетов «Карточка» или «Прайс».
  • Маленькое поле. Однострочное текстовое поле.
  • Большое поле. Увеличенный размер поля позволяет вставлять большее количество текста. Например, клиенты могут вписать в это поле дополнительные вопросы или указать полный почтовый адрес. В настройках доступен выбор высоты.
  • E-mail. Используется для получения электронной почты клиента. При заполнении производится проверка на правильность вводимой электронной почты.
  • Телефон. Используется для получения телефонного номера клиента. При заполнении производится проверка на правильность вводимых данных.
  • Файл. Дает клиентам возможность прикреплять и отправлять файлы размером до 25 мегабайт следующих типов: txt, docx, pdf, jpeg, png, gif, bmp, zip, stl, dfx, dwg, cdr, csc, cdw и cdt.​​​​
  • Согласие на сбор данных. Эта опция необходима для соответствия сайтов требованиям Федерального закона «О персональных данных» №152-ФЗ, для всех форм, запрашивающих персональные данные у посетителей.

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

Помогла ли вам статья?

Статья оказалась полезной для 84 человек

ukit.com

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

Простая обратная связьОбратная связь — является неотъемлемой частью практически у большинства сайтов, где с её помощью посетитель может связаться с администрацией данного сайта, а покупатель сделать тот, или иной заказ, оставив при этом свои координаты для обратной связи, либо свои претензии к услугам или пожелания. В первом примере рассмотрим простую Форму обратной связи, но и в тоже время имеющую довольно хорошую защиту.
В этом скрипте стоит защита на корректность ввода абсолютно всех данных, которые вводит пользователь, как и у большинства скриптов — все вводимые данные преобразуются в HTML-сущности ( защищаемся от разных умников ), и наконец это всем известная Капча — защита от спаммеров.
Форма простой обратной связи
Здесь по каждой ошибке выводятся довольно интересные и красивые сообщения, которые так же можно изменить под свой дизайн ( фото ниже ). Об успешной отправки письма, появиться вот такое сообщение:
сообщение об успешной отпраки письма А если в отправляемом письме обработчик обнаружит ошибки, то он их выдаст в сообщение примерного вида с конкретным указанием на данную ошибку.
вывод ошибки в сообщение

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

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

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

Внимание! Форма обратной связи будет работать на локальном компьютере, если только из под Denwer ( или подобных ), либо на хостинге.

Описание файлов в архиве

  • index.html — открываете в браузере и проверяете работоспособность, затем открываете в блокноте и редактируете внешний вид.
  • send.php — обработчик отправки писем. Здесь изменяем ваша@почта.ru на свой адрес почты, и так же редактируете сообщения с ошибкой под свой дизайн.
  • Папка img — картинки для каптчи, и заменив, можете использовать свои.
  • .htaccess — обязательно нужен, если вы устанавливаете обратную связь на html страницы.
  • Все файлы — написаны под кодировку UTF-8.
вывод ошибки в сообщение

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

Дата публикации: 16.07.2018

Похожие статьи

Влад

24 июля 2018 18:15

Влад

Уважаемый.
Подскажите, где я запутался.
Скрипт установился и письма доходят, но прочесть не могу…
Я сразу решил переделать в кодировку Windows-1251 и теперь одни не понятные знаки прописываются.

Admin

24 июля 2018 22:52

Admin Помимо того, что в файле нужно изменить параметр charset=utf-8 для изменения кодировки, так ещё и сам файл необходимо сохранить в этой же кодировке и без BOM.
У меня с самого сначала скрипт прекрасно работал как на Windows-1251, так и потом на UTF-8

Очень советую посмотреть и изучить: как правильно делать кодировку

Александр

25 июля 2018 16:56

Александр

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

Admin

25 июля 2018 18:21

Admin

Добрый день, Александр!
Он поэтому и называется: простой скрипт обратной связи!
Для ваших целей используйте более сложнее скрипт, которые предоставлены на моём сайте, где используется ajax технология ( вывод ошибок без перезагрузки страницы и без повторного ввода данных ).

Добавить комментарий

age-dragon.com

No related posts.