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

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

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

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

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

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

Вспомним несколько простых правил, которые нужно учитывать при разработке и размещении ФОС на сайте.

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

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

Традиционно формы можно разместить в хедере сайта или на странице контактов.

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

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

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

Форма должна отображаться и работать одинаково корректно на всех устройствах и во всех браузерах.

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

Форма должна быть краткой и понятной.

Что это значит? Форма не должна состоять из большого количества полей или этапов заполнения. Если, конечно, в этом нет жесткой необходимости. Люди стремятся к простоте, они не хотят тратить много времени на то, чтобы разобраться и заполнить десять тысяч полей.

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

Выглядит более удобно, чем, например:

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

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

Форма должна обладать приятным и практичным дизайном.

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

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

Форма должна содержать призыв к действию.

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

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

Форма должна легко сворачиваться.

Итак, форму легко найти, она обладает приятным дизайном, удобна для заполнения. Что еще?

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

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

Настройка ответного сообщения.

Как-то вот так…

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

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

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

Вот в кое-то веки занялся облегчением своего блога и решил избавиться от лишних плагинов, которые грузят его своим весом и не дают загружаться страницам быстро. И первым делом мой выбор пал на форму обратной связи, вернее на плагин, который ее выводил у меня на сайте «Contact Form 7 «, а ему в нагрузку еще требовался второй плагин выводящий капчу «reCaptcha «. Вот таким образом я решил избавиться сразу от двух, довольно весомых плагинов, используя форму обратной связи, которая не требует ни каких плагинов и легка в установке на сайт. Сейчас я вам о ней расскажу и конечно же дам скачать файлы для того, чтобы и Вы смогли себе создать аналогичную обратную связь для сайта …

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

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

Теперь давайте перейдем к самому главному и создадим свою собственную, не зависящую ни от каких плагинов обратную связь для сайта …

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

Вот вам код HTML самой формы обратной связи для сайта, который Вы сможете вставить на свой сайт или блог в любое место, у меня это страница для контактов:

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

Как вас зовут

Электронная почта

Тема сообщения

Отправить сообщение

Обратите внимание на некоторые важные вещи, которые вам нужно выполнить в этом коде:

Этот файл Вы должны залить на свой хостинг в корневую папку движка сайта! Но сначала проверьте исправили Вы его или нет!

В строке, где написан текст «АДРЕС ВАШЕЙ Е-МАЙЛ ПОЧТЫ НА ХОСТИНГЕ! «, вам нужно обязательно его исправить на свой Е-майл адрес, который у Вас на хостинге. Если у Вас нет почты на хостинге, то обязательно ее заведите. Это не сложно!

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

Вот этот скрипт:

Или можете добавить на WordPress в файл functions.php вот эту функцию:

Function my_jquery() { wp_deregister_script("jquery"); wp_register_script("jquery", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"); wp_enqueue_script("jquery"); }

Она заменяет скрипт и также подключает библиотеку jQuery на сайте WordPress.

Теперь подключаем на своем сайте скрипт, который будет с файлом mail.php совместно, отправляя ваши письма. Для этого нам нужно создать вот такой js файл contact.js и отправить его на ваш сайт в папку со скриптами вашей активной темы оформления, которая так и назвается js . Если ее нет у Вас на сайте, то создайте!

Вот этот скрипт:

JQuery(document).ready(function($) { $("#contact").submit(function() { var str = $(this).serialize(); $.ajax({ type: "POST", url: "ВАШ ДОМЕН/wp-content/themes/ВАША ТЕМА/mail.php", data: str, success: function(msg) { if(msg == "OK") { result = "Сообщение отправлено"; $("#fields").hide(); } else {result = msg;} $("#note").html(result); } }); return false; }); });

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

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

Form#contact { border:1px solid #e5e5e5; padding:10px; background:#e9ffd0; border-radius:5px; } #contact label { font-size: 14px; } #contact input:required:valid { box-shadow: 0 0 3px #BCEF89; border-color: #BCEF89!important; background: #fff url(images/valid.png) no-repeat 98% center; } #contact textarea:required:valid { box-shadow: 0 0 3px #BCEF89; border-color: #BCEF89!important; } #contact input:focus:invalid { box-shadow: 0 0 3px #FFDF97; border-color: #FFDF97!important; background: #fff url(images/invalid.png) no-repeat 98% center; } #contact textarea:focus:invalid { box-shadow: 0 0 3px #FFDF97; border-color: #FFDF97!important; } .err { border: 1px solid #ff8c00; padding: 10px; background: #FFDF97; text-align: left; border-radius: 3px; } .ok { border: 1px #BCEF89 solid; margin-bottom: 15px; padding: 10px; background: #f5f9fd; text-align: center; border-radius: 3px; } #author, #email, #url { width: 30%; padding: 5px; border-radius: 5px; border: 1px solid #e5e5e5; } #comment { padding: 5px; border-radius: 5px; border: 1px solid #e5e5e5; overflow: auto; } #submit { font-weight: 400; background: #393; font-size: 15px; color: #fff; padding: 10px 50px; border: none; cursor: pointer; }

Просто скопируйте их и отправьте в файл style.css вашей активной темы на сайте. Если затем хотите поменяете цвета и форму, но это только для продвинутых пользователей!

Вот теперь наша обратная связь для сайта полностью готова к работе. Тестируйте и наслаждайтесь ее работой!

На этом все!

Если вам понравился этот материал? Тогда кликните по соцкнопкам, подпишитесь на обновления блога и напишите свой комментарий ниже!

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

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

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

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

Имя E-mail: Тема сообщения Ваш текст:

В самом начале кода, в первом строчке, вы должны указать свой путь к php файлу form.php (про него немного попозже). Больше ничего менять не нужно. Если вас не устраивает название формы и ее поля, вы всегда можете добавить новые или изменить старые. Так же можно добавить свои стили прямо суда в таблицу. Если такой вариант вам неудобный, задавайте новые классы и уже потом добавляйте стили через ваш файл style.css

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

Inp{ padding: 10px; border: 1px solid #E5E5E5; width: 200px; color: #999999; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; }

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

С разметкой формы определились, красоту навели, теперь необходимо создать файл с расширением php и добавить в него вот такой код. Файл добавляйте через FTP клиент на ваш сайт. Большинство пользователей используют CMS, скидывайте данный файл в папке с вашей темой. Адрес и название этого файла, вы должны изначально прописать в разметке вашей формы, которую я показывал выше. Я прописал полный путь для примера, чтоб было понятно, что и куда необходимо вставить.

(