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

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

А что если вы захотите разместить ее в подвале сайта?

Со всеми этими трудностями справится наш плагин.

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

Плагин не имеет никаких настроек, поэтому настраивать его не придется.

Форма обратной связи содержит 3 поля — для имени, емейла и текста сообщения. Выглядит она вот так:

Убого, не правда ли? 🙂 Тем не менее это рабочая форма и вы можете отправить нам сообщение прямо из нее.

А оформить ее можно как угодно, например вот так:

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

Т.е. с помощью таких форм, прямо на одной странице, можно провести несколько опросов.

В правой колонке данного сайта вы так же увидите форму обратной связи «Задайте вопрос». Итого, на этой странице их 3 штуки.

Внешний вид формы задается стилями и оформить ее можно как угодно.

Письмо

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

С помощью id можно определить, из какой именно формы был запрос. Так же указана страница, на которой он был задан.

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

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

<div id="wpps-feedback-post-323" class="wpps-feedback"></div>

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

Для того чтобы разместить форму в сайдбаре, нужно открыть Внешний вид → Виджеты и добавить виджет Текст. В нем можно указать заголовок и вставить аналогичный код:

<div id="wpps-feedback-sidebar" class="wpps-feedback"></div>

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

<div id="footer-form" class="wpps-feedback"></div>

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

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

Примеры оформления

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

Для сайдбара

#wpps-feedback-sidebar > div {overflow: hidden; margin-bottom: 5px;}
#wpps-feedback-sidebar input[type=text], #wpps-feedback-sidebar input[type=email] {float: right; width: 80%;}
#wpps-feedback-sidebar textarea {width:100%;max-width:100%;height:100px;}
#wpps-feedback-sidebar span {padding-top: 6px; display: inline-block;}
#wpps-feedback-sidebar .error {color:red; text-align: center;}
#wpps-feedback-sidebar .ok {color:green; text-align: center;}

Для страницы, с тенью

#wpps-feedback-post-323 {max-width:250px;padding:10px;border:1px solid #ccc;background:#eee;box-shadow: 0 0 6px;}
#wpps-feedback-post-323 > div {overflow: hidden;}
#wpps-feedback-post-323 span {padding-top: 6px; display: block;}
#wpps-feedback-post-323 input[type=text], #wpps-feedback-post-323 input[type=email] {width: 100%;}
#wpps-feedback-post-323 .wpps-feedback-text {margin-top:5px;}
#wpps-feedback-post-323 textarea {height: 70px; width: 100%;}
#wpps-feedback-post-323 .wpps-feedback-send {text-align:right;}
#wpps-feedback-post-323 .error {color:red; text-align: center;}
#wpps-feedback-post-323 .ok {color:green; text-align: center;}

Этот код нужно вставлять в тему вашего сайта, в файл стилей.

Если хотите по-подробнее узнать о файлах стилей, прочтите вот эту статью.

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

<div class="wpps-feedback"></div>
<style>
.wpps-feedback {width:300px;max-width:100%;}
.wpps-feedback > div {overflow: hidden; margin-bottom: 5px;}
.wpps-feedback input[type=text], .wpps-feedback input[type=email] {float: right; width: 80%;}
.wpps-feedback textarea {width:100%;max-width:100%;height:100px;box-sizing: border-box;}
.wpps-feedback span {padding-top: 6px; display: inline-block;}
.wpps-feedback .error {color:red; text-align: center;}
.wpps-feedback .ok {color:green; text-align: center;}
</style>

Получится нечто похожее на то, что вы видите в сайдбаре (в правой колонке этого сайта).

Купить плагин

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

Продажи временно приостановлены, но скоро возобновим!

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: