Nazyrov.ru » » Как добавить форму обратной связи на сайт

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

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

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

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

Содержание статьи:

Форма обратной связи при помощи HTML.
Форма обратной связи на PHP.
Красивая форма обратной связи для WordPress.
Выезжающая форма обратной связи.
Плагин формы обратной связи для WordPress.

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

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

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

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

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

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

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

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

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

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

Принцип тот же, в визуальном редакторе генерируете форму связи, сохраняете, копируете код и вставляете на свой сайт. После этого нужно ввести свой e-mail, куда будут приходить письма и страницу, где находится html код формы.

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

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

Форма обратной связи на PHP будет работать, только если ваш сайт работает с этим языком программирования. Как известно сайты WordPress работают на PHP,а для сайтов uCoz, PHP доступен только в платном аккауне.

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

Вариант 1. (по материалам сайта ruseller.com)

Создаем страницу с названием contact.php (обязательное условие, чтобы формат был PHP). Я бы советовал использовать редактор кода notepad ++.

В файл contact.php вставим разметку формы и подключим фреймворк jQuery при помощи этого кода:

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
  

  PHP Contact Form with JQuery Validation
  
  
 
 
      
 

 
      
 

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

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
body {
        font-family:Arial, Tahoma, sans-serif;
}
#contact-wrapper {
        width:430px;
        border:1px solid #e2e2e2;
        background:#f1f1f1;
        padding:20px;
}
#contact-wrapper div {
        clear:both;
        margin:1em 0;
}
#contact-wrapper label {
        display:block;
        float:none;
        font-size:16px;
        width:auto;
}
form#contactform input {
        border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
        border-style:solid;
        border-width:1px;
        padding:5px;
        font-size:16px;
        color:#333;
}
form#contactform textarea {
        font-family:Arial, Tahoma, Helvetica, sans-serif;
        font-size:100%;
        padding:0.6em 0.5em 0.7em;
        border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
        border-style:solid;
        border-width:1px;
}

Чтобы форма обратной связи корректно обрабатывалась, нужно вставить PHP код в самый верх документа, перед 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
' . "\r\n" . 'Reply-To: ' . $email;
 mail($emailTo, $subject, $body, $headers);
  $emailSent = true;
  }
  }
  ?>
Не забудьте поменять значение [email protected] на ваш e-mail.

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

Форма работает нормально, но у нее есть минус с переводом на русский язык, а именно с переводом сообщений. Дело в том, что эти сообщения находятся в зашифрованном виде в файле jquery.validate.pack.js.

Поэтому этот вариант формы обратной связи на PHP мне не особо понравился.

Вариант 2.

Самый лучший вариант, что я нашел. Разработан специально для WordPress Артемом (http://gurusite.ru/). Об этом способе возможно вы уже слышали. Как–то Борисов рассказывал о нем.

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

1. Создайте в редакторе кода новый файл c названием contact.php, затем в теме своего блога найдите файл page.php и скопировав с него все содержимое, вставьте в только что созданный файл contact.php.

2. Найдите в содержимом файла код . Удалите этот код и вместо него вставьте вот этот:

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

/*
Template Name: Contact
*/
?>
 
 get_header();?>
 

 
 if(isset($_POST['submitted'])) {
    if(trim($_POST['contact_name']) === '') {
        $nameError = 'Введите ваше имя';
        $hasError = true;
    } else {
        $name = trim($_POST['contact_name']);
    }
 
    if(trim($_POST['contact_email']) === '')  {
        $emailError = 'Введите e-mail';
        $hasError = true;
    } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['contact_email']))) {
        $emailError = 'Не верный адрес.';
        $hasError = true;
    } else {
        $email = trim($_POST['contact_email']);
    }
 
    if(trim($_POST['contact_theme']) === '') {
        $themeError = 'Введите тему ';
        $hasError = true;
    } else {
        $theme = trim($_POST['contact_theme']);
    }
 
    if(trim($_POST['contact_comments']) === '') {
        $commentError = 'Введите сообщение';
        $hasError = true;
    } else {
        if(function_exists('stripslashes')) {
            $comments = stripslashes(trim($_POST['contact_comments']));
        } else {
            $comments = trim($_POST['contact_comments']);
        }
    }
 
    if(!isset($hasError)) {
        $emailTo = get_option('tz_email');
        if (!isset($emailTo) || ($emailTo == '') ){
            $emailTo = get_option('admin_email');
        }
        $subject = 'Сообщение с сайта от '.$name;
        $body = "Имя: $name \n\nE-mail: $email \n\nТема: $theme \n\nСообщение: $comments";
        $headers = 'From: '.$name.' .$email.'>' . "\r\n" . 'Reply-To: ' . $email;
        wp_mail($emailTo, $subject, $body, $headers);
        $emailSent = true;
    }
 
} ?>

3. Найдите в содержимом файла строчку и под ней вставьте вот этот код:

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
if(isset($emailSent) && $emailSent == true) { ?>
Ваше сообщение успешно отправлено!
} else { ?> if(isset($hasError) || isset($captchaError)) { ?>   } ?>  
the_permalink(); ?>" id="contactForm" method="post">  
if(isset($_POST['contact_name'])) echo $_POST['contact_name'];?>" class="required requiredField" /> if($nameError != '') { ?>
=$nameError;?>
} ?>
if(isset($_POST['contact_email'])) echo $_POST['contact_email'];?>" class="required requiredField email" /> if($emailError != '') { ?>
=$emailError;?>
} ?>
if(isset($_POST['contact_theme'])) echo $_POST['contact_theme'];?>" class="required requiredField" /> if($themeError != '') { ?>
=$themeError;?>
} ?>
 
if($commentError != '') { ?>
=$commentError;?>
} ?>
 
} ?>

4. Откройте файл style.css в редакторе вашего блога и в самый низ вставьте вот этот код стилей:

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
/*-------------------------------- Contact --------------------------------*/
 
#contact_form {
        position: relative;
        width: 90%;
        margin: 20px 20px; 20px; 20px;;
}
 
.contact_left {
        float: left;
        width: 131px;
}
 
.contact_right {
        float: right;
        width: -moz-calc(100% - 155px);
        width: -webkit-calc(100% - 155px);
        width: calc(100% - 155px);
}
 
.contact_name, .contact_email, .contact_theme, .contact_textarea { position: relative; }
 
.contact_name input[type="text"],
.contact_email input[type="text"],
.contact_theme input[type="text"] {
        position: relative;
        width: 100px;
        height: 30px;
        line-height: 30px;
        padding: 0 0 0 31px;
        margin: 0 0 20px;
        background: #f7f7f7 url(images/nameid.png) no-repeat 2px 0;
        border: none;
        border-radius: 4px;
        box-shadow: inset 0.5px 0.5px 3px #aaaaad;
        font: normal 13px Arial, sans-serif;
        color: #434343;
}
.contact_email input[type="text"] { background: #f7f7f7 url(images/mailid.png) no-repeat 0 0; }
.contact_theme input[type="text"] { background: #f7f7f7 url(images/url.png) no-repeat 2px 0; }
 
.contact_textarea textarea {
        position: relative;
        width: -moz-calc(100% - 20px);
        width: -webkit-calc(100% - 20px);
        width: calc(100% - 20px);
        height: 116px;
        padding: 7px 10px;
        margin: 0 0 18px;
        background: #f7f7f7;
        border: none;
        border-radius: 4px;
        box-shadow: inset 0.5px 0.5px 3px #aaaaad;
        font: normal 13px Arial, sans-serif;
        color: #434343;
}
 
.contact_name input[type="text"]:focus, .contact_email input[type="text"]:focus, .contact_theme input[type="text"]:focus, .contact_textarea textarea:focus, .contact_submit:focus {
        outline: none;
        box-shadow: 0 0 5px #aaaaad;
}
 
.contact_submit {
        float: right;
        width: 120px;
        padding-top: 7px;
        padding-bottom: 4px;
        margin: 0 0 15px;
        background: #1E5D89;
        border: none;
        border-radius: 4px;
        text-transform: uppercase;
        text-align: center;
        font-size: 16px;
        color: #fff;
        transition: background-color ease-in-out .15s;
        cursor: pointer;
}
.contact_submit:hover { background: #202B3D; }
 
.contact_message {
        width: 100%;
        height: 22px;
        padding: 70px 0px;
        text-align: center;
        font: normal 22px Arial, sans-serif;
        color: #434343;
}
 
.errors, .errorss {
        position: absolute;
        bottom: 2px;
        left: 10px;
        font: normal 12px Arial, sans-serif;
        color: red;
        z-index: 999;
}

При желании можете отредактировать его под тему своего блога. В стандартном варианте он будет выглядеть вот так:

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

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

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

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

Выезжающая и всплывающая форма обратной связи

Для сайтов использующих движок WordPress, идеальным вариантом будет плагин Usernoise. Скачать его можно с официального сайта WordPress. У данного плагина минимум настроек, нужно только включить его, задать расположение кнопки (слева или справа), задать шрифт, цвет текста и кнопки. Благодаря этим простым настройкам, можно идеально вписать кнопку всплывающей формы обратной связи в дизайн сайта. В готовом варианте, такая форма будет выглядеть вот так:

Плагины формы обратной связи для WordPress

Плагинов формы обратной связи для WordPress разработано немало как бесплатных, так и платных. Вот только малая их часть:

Smart Forms – форма вставляется при помощи шорткодов в любое место сайта.
Creative Contact Form – форма имеет массу настроек по созданию полей и их оформлению.

POWr Contact Form — простая удобная форма обратной связи. Выводится при помощи виджета или шорткода.

Perfect Easy & Powerful Contact Form – удобная и многофункциональная форма связи. Вставить ее можно в любое место сайта, в том числе есть возможность сделать всплывающую форму обратной связи.

Contact Form 7 – один из самых популярных плагинов для создания формы обратной связи.

Ну как вам статья? Нашли что-то подходящее для себя?

Как вам статья?
Полная ерундаНичего интересногоТак себеХорошоОтлично (2 голосов, оценка: 5,00 из 5)
Loading...Loading...

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


Комментариев 23 на “Как добавить форму обратной связи на сайт
  1. Ничего себе :) Не думал что существует такое количество способов установки формы обратной связи! Я себе установил изначально плагин Contact form 7 и забыл об этом. Все работает отлично.

    • Contact form 7 многие блогеры устанавливают. Он один из самых популярных плагинов. Я раньше пользовался сторонним сервисом, сейчас добавил свою PHP форму связи.

      • И какие достоинства скрипта на PHP? Меньше нагрузка на блог или что? Чем в принципе хуже плагин?

        Ответить
        • Плагин дает больше нагрузки на блог. А скрипт на PHP, который я описал во втором варианте, это внедрение в саму тему блога.Таким образом можно и карту блога сделать без использования плагина Dagon Design Sitemap Generator.

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

        • Игорь, по сути плагин это тот же PHP код. Я не могу утверждать, что плагин грузит блог больше чем код. Это нужно проверять. Но конкретно в этом случае считаю, что встроенная форма обратной связи создает меньше нагрузки чем плагин contact form 7.

          Если в обоих случаях мы имеем код, чтобы рассчитать время загрузки того и другого кода нужно высчитать время обработки кода.

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

    • Игорь, сноси эту Contact form 7 к чертовой бабушке.))) Этот плагин сильно нагружает блог. Не знаю как сейчас, а раньше от него была немалая нагрузка. Поэтому лучше попробовать другие способы.

      • Ок! Попробую экспериментировать с другими плагинами и кодами. Сравню и решу. Спасибо

      • Этот плагин сильно нагружает блог.

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

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

          Это моё личное мнение.

        • Ну не все такие злостные ))

          На самом деле думаю все гораздо проще. Такие рекомендации дают в основном новички, которые когда-то где-то это услышали и сами не проверили информацию.

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

        • Да, Андрей, тут я с Вами абсолютно согласен!

  2. Андрей, привет. Хорошо, что есть выбор для вебмастера каким образом добавить форму обратной связи на сайт =) Каждый определяется с этим вопросом сам. Я выбрала простой плагин Contact Form 7 и довольна. Спасибо за обзор!

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

    • Привет, Баяс! Ну, эксперт это слишком громко сказано :)

      Фрилансить уже начинаю потихоньку. Пока по мелочи, за большие проекты не берусь.

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

    • А как же читатели в таком случае будут связываться с автором блога?

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

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

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

    Ответить
  6. Я себе Contact Form 7 поставил — достаточно мощный плагин, а вкупе с Really Simple CAPTCHA — штука вообще шикарная. Главное, что не надо заморачиваться — новая форма любой сложности генерится за минуту, потом шорткодом выводится в любое место записи. Ну а в цсс уже можно все подровнять так, как хочется.

    Ответить

Добавить комментарий для Андрей Назыров Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты:

Андрей Назыров