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

imageПродолжаем тему улучшения юзабилити блога. Если вы создаете живой проект а не г-носайт для продажи ссылок или мелкой рекламы, то у вас должно быть настроена система общения с посетителями блога. Каждый читатель должен знать, что если он задаст вопрос, то получит 100% ответ.

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

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

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

Давайте торопится медленно и сегодня поговорим о простейшем методе –форме обратной связи для Вашего блога.

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

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

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

— контактный адрес электронной почты и телефон;

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

— Данные об организации клиента;

— Структурное подразделение и должность клиента;

— Иногда бывает и возраст клиента;

— Тематика сообщения.

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

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

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

image

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

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

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

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

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

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

К сожалению, на WordPress в основном дистрибутиве этого нет.

Решается вопрос довольно просто, я предложу вам два способа.

Первый способ настроить форму обратной связи, это использовать инструмент от Гугла

Для этого идем в свой аккаунт Google и выбираем вкладку “»Диск”.

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

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

Чем эти формы от Гугла хороши:

1.Создать сможет даже начинающий все очень просто и по шагам

2. Работают быстро и довольно надежно

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

4. Формы абсолютно бесплатные

Из минусов можно назвать только один – обратная ссылка на Гугл-документы.

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

Для WordPress разработаны много плагинов, но я использую на всех своих проектах Contact Form 7

Плагин устанавливаем через форму поиска где вбиваем Contact Form 7

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

После установки идем в левой колонке у нас появилась новая кнопка.

Жмем на нее и в новом окне у нас отрывается мастер создания формы обратной связи.

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

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

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

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

Да, Я Хочу Быть В Курсе Новых Событий На Сайте!

Подпишитесь прямо сейчас, и получайте обновления на свой E-Mail:

Ваш E-Mail в безопасности

Введение

В этой статье я хочу показать, как быстро и просто реализовывается форма обратной связи на php. Задача эта не новая, но практически при создании каждого сайта всплывает необходимость в такой форме. Чтобы постоянно не изобретать велосипед, я решил набросать эту статью. Для создания формы обратной связи нам потребуется php, поскольку отправки писем на одном html невозможна. Все что нам потребуется — это один файл, например расположим его в папке /feedback/ и назовем index.php. Логика формы следующая: при загрузке страницы, делаем проверку — были отправлены данные или нет. Если ни чего не отправлялось, то просто отображаем форму с полями — имя, e-mail и текст сообщения. Если же данные были отправлены, то проверим что нам пришло. В случае, когда все данные корректные, отправляем их на свой почтовый ящик. А когда данные не корректные, например, не все поля были заполнены, мы будем выводить сообщение о ошибке. С логикой разобрались, теперь нужно написать код.

Простая форма обратной связи на php. Код

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

     $msg_box = ""; // в этой переменной будем хранить сообщения формы    if($_POST['btn_submit']){  $errors = array(); // контейнер для ошибок  // проверяем корректность полей  if($_POST['user_name'] == "")  $errors[] = "Поле 'Ваше имя' не заполнено!";  if($_POST['user_email'] == "")  $errors[] = "Поле 'Ваш e-mail' не заполнено!";  if($_POST['text_comment'] == "") $errors[] = "Поле 'Текст сообщения' не заполнено!";    // если форма без ошибок  if(empty($errors)){  // собираем данные из формы  $message  = "Имя пользователя: " . $_POST['user_name'] . " ";  $message .= "E-mail пользователя: " . $_POST['user_email'] . " ";  $message .= "Текст письма: " . $_POST['text_comment'];  send_mail($message); // отправим письмо  // выведем сообщение об успехе  $msg_box = "Сообщение успешно отправлено!";  }else{  // если были ошибки, то выводим их  $msg_box = "";  foreach($errors as $one_error){  $msg_box .= "$one_error ";  }  }  }    // функция отправки письма  function send_mail($message){  // почта, на которую придет письмо  $mail_to = "my@mail.ru";   // тема письма  $subject = "Письмо с обратной связи";    // заголовок письма  $headers= "MIME-Version: 1.0rn";  $headers .= "Content-type: text/html; charset=utf-8rn"; // кодировка письма  $headers .= "From: Тестовое письмо rn"; // от кого письмо    // отправляем письмо   mail($mail_to, $subject, $message, $headers);  }         Обратная связь      <?= $msg_box; // вывод сообщений        </body>  

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

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

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

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

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

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

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

а) повышение лояльности к вашей компании;

б) возможность быстро отреагировать на запрос, снизить негатив и сохранить клиента;

в) возможность улучшить продукт или сервис;

г) способ увеличить продажи.

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

Правило №1. Максимально упрощайте форму

Какую из этих форм вы заполните охотнее?

Или такую

Оставляйте только самые важные поля. Посетители большинства сайтов не любят заполнять большое количество полей

Если правило упрощения формы выполнили, то стоит ожидать увеличение конверсии на 30–60 %.

Совет. Уберите всё лишнее, оставьте 2–3 поля или даже 1. Обычно это «Имя», «номер телефона или e-mail». Если у вас интернет-магазин и вы делаете форму для заказа, то полей будет немного больше: «Имя», «№ телефона или E-mail», «Вариант доставки», «Количество товара», «Адрес». Смотрите, для каких целей вы делаете форму обратной связи, и максимально упрощайте её.

Правило №2. Форма должна быть заметна

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

Одно обязательное поле — телефон

Часто на сайтах компаний можно наблюдать не только перегруженную лишними полями форму, но и обязательность заполнения этих полей. Формулировка «обязательное поле» присутствует на 99 % сайтов. Хотите увеличить конверсию? Уберите обязательное заполнение всех полей, кроме телефона. Если человек захочет, он сам заполнит те поля, которые считает нужными, но основное поле — номер телефона, которое позволит перезвонить клиенту и уточнить всю остальную информацию. Главное не забудьте составить правильные скрипты для менеджеров.

В каких случаях конверсия с форм падает:

  • Падение конверсии на 3 %, если вы просите заполнить поле с указанием возраста
  • Падение конверсии на 10 %, если необходимо ввести ФИО
  • Падение конверсии на 2 %, если вас интересует, в каком населенном пункте живет посетитель
  • Падение конверсии на 4 %, если необходимо заполнить адрес проживания

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

Правило №4. Ссылки в форме (условия обращения)

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

Пример такой формы:

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

Правило №5. Согласие на обработку данных

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

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

Правило №7. Уберите каптчу с формы

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

В студии artcell мы как раз используем такую технологию. Как можете заметить каптчи в наших формах нет и СПАМ мы не получаем.

Правило №8. Автоуведомление о том, что форма отправлена

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

Правило №9. Уведомление по sms

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

Так какая она — идеальная форма обратной связи?

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

Минимум полей для заполнения

Одно или два обязательных поля

Отсутствие полей с выпадающими списками

Наличие чекбокса для согласия на обработку получаемых данных

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

Отсутствие каптчи

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

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

18.05.2017 11:11 53918

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

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

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

  1. PHP вынесен в отдельный файл
  2. при нажатии клавиши F5 форма не будет отправлена снова
  3. после отправки формы страница не будет перезагружена
  4. проверка на правильность заполнения полей осуществляется не на стороне сервера
  5. не поддерживается IE8 и ниже (нужно дополнить код аналогами addEventListener(), preventDefault() и XMLHttpRequest или использовать вариант 2)

Файл contacts.html

<!DOCTYPE html>     

Файл contacts.php

<? if (array_key_exists('messageFF', $_POST)) {    $to = '<b>свой@yandex.ru';    $subject = 'Заполнена контактная форма с '.$_SERVER['HTTP_REFERER'];    $subject = "=?utf-8?b?". base64_encode($subject) ."?=";    $message = "Имя: ".$_POST['nameFF']."nEmail: ".$_POST['contactFF']."nIP: ".$_SERVER['REMOTE_ADDR']."nСообщение: ".$_POST['messageFF'];    $headers = 'Content-type: text/plain; charset="utf-8"';    $headers .= "MIME-Version: 1.0rn";    $headers .= "Date: ". date('D, d M Y h:i:s O') ."rn";    mail($to, $subject, $message, $headers);    echo $_POST['nameFF']; }  

2. Форма связи без JavaScript

  1. в большинстве случаев расширение файла должно быть .php
  2. при нажатии клавиши F5 форма будет отправлена снова
  3. после отправки формы страница будет перезагружена
  4. проверка на правильность заполнения полей осуществляется не на стороне сервера

Файл contacts.php

<!DOCTYPE html>     <? if (isset ($_POST['messageFF'])) {   mail ("<b>свой@yandex.ru",         "заполнена контактная форма с ".$_SERVER['HTTP_REFERER'],         "Имя: ".$_POST['nameFF']."nEmail: ".$_POST['contactFF']."nСообщение: ".$_POST['messageFF']);   echo ('Ваше сообщение получено, спасибо!'); }     

Рекомендации к скрипту отправки почты

  1. нужно заменить свой@yandex.ru
  2. нужно заменить contacts.php на полный адрес, например, http://сайт.ru/папка/папка/contacts.php
  3. для того, чтобы добавить новое поле, нужно внести изменение в HTML, JavaScript и PHP код. Другими словами, добавить те же участки, что и для contactFF. Пример согласно описанию в комментарии 194 можно увидеть тут.

Почему письма не приходят

  1. письма от хостинга фильтруются и не попадают даже в папку «Спам»
  2. хостинг не имеет поддержки (не верно настроена или отключена) PHP-функции mail()

Что делать:

  1. создать файл «test.php» с содержимым
    <?    mail("<b>свой@yandex.ru", "Тема", "Сообщение");  
  2. чтобы письмо отправилось, перейти (открыть в окне браузера) на страницу «test.php»
  3. если спустя 20-30 минут письмо отсутствует в папках «Входящие» и «Спам», обратиться за разъяснениями в службу поддержки хостинга

Используемые материалы: irbis-team.com

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

image

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

  1. Откройте приложение «Сайт» и перейдите в раздел «Блоки».
  2. Выберите блок с названием «site.send_email_form».
  3. Щелкните по фрагменту кода под надписью «Встроить на страницу или в шаблон».
  4. Скопируйте выделенный фрагмент кода и вставьте его в HTML-код любой страницы или шаблон темы дизайна.
image

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

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

image

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

Если вы не хотите изменять содержимое этого поля, то можно указать адрес получателя сообщений обратной связи в исходном коде блока «site.send_email_form». Для этого добавьте нужный email-адрес внутри кавычек, как показано ниже:

  $wa->sendEmail("admin@mycompany.ru", $errors)  

Можно указать и несколько адресов получателей:

Простой формат (только адреса)

  {$wa->sendEmail(['address1@domain.ru', 'address2@domain.ru'], $errors)}  

Расширенный формат (адреса получателей с их именами)

  {$wa->sendEmail(['address1@domain.ru' => 'Имя1', 'address2@domain.ru' => 'Имя2'], $errors)}

Как убрать поле для ввода защитного кода (капчи)

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

image

Если вы считаете, что необходимость вводить защитный код мешает посетителям вашего сайта отправлять сообщения, то отключите это поле. Для этого перед строкой с вызовом метода {$wa->sendEmail(…)} добавьте следующее:

  {$wa->storage(['captcha', $wa->app()], '')}  

Таким образом вы «говорите» фреймворку Webasyst, что правильной капчей является пустая, т. е. сообщение отправится, если ничего не написать в поле для ввода защитного кода.

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

            {$wa->captcha(!empty($errors.captcha))}          {if !empty($errors.captcha)}{$errors.captcha}{/if}      

Оцените статью
Рейтинг автора
4,8
Материал подготовил
Максим Коновалов
Наш эксперт
Написано статей
127
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий