Профессиональное обучение
блоггингу от А до Я

Легкая и красивая форма обратной связи для WordPress без использования плагинов!

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

ААААААААААА! Вот так вот я кричал ребята, когда искал в интернете различные статьи, в которых хотел найти информацию по теме создания формы обратной связи для wordpress блога и НИЧЕГО подходящего не нашел. Вроде статей очень при очень много, но вот именно такой формы, которая бы меня устраивала я не нашел.

Всем привет! С вами Александр Борисов! В общем мне нужна была форма обратной связи для wordpress блога! Мне не нужна красота, супер пупер функции, мне просто нужна была форма обратной связи, совсем простая, без наворотов, прибамбасов и прочей хрени.

Да, кстати и чтобы создавалась она без всяких замудренных скриптов, а тем более плагинов. Знаю, что многие блоггеры для создания формы обратной связи используют плагин contact form 7. А он, я вам скажу, не слабо грузит ваш блог. Но это еще пол дела. Кто-то ставит еще и доп.плагин для этой формы, чтобы в ней была капча. Два плагина для создания формы связи на блоге это пипец конечно!

Кстати ребята, у меня на блоге осталось активных, всего 9 плагинов. Скоро будет вообще 6. В добавок уйду от Ротабана (об этом я писал тут) и вообще блог полетит как ракета.

Вернемся к делу. В общем искал я форму и хотел чтобы там было все по простому и как обычно. Человек заходил на страницу обратной связи на моем блоге и видел поля — введите свое имя, введите свой e-mail, введите тему сообщения, текст сообщения и кнопочка «Отправить»! ВСЕ!

Искал, искал инфу в интернете, что-то пробовал, но так и не нашел.

Пришлось обратиться за помощью к моему брату (он мне уже как брат реально) Артему (gurusite.ru) верстаку, про него я писал тут, чтобы он сделал нормальную, легкую и самое главное простую форму обратной связи. Вот что у него получилось:

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

Форма просто сок! Не нравится внешний вид? Ни чего страшного, стили можете настроить на свой вкус и цвет. Главное что она легкая, не грузит блог, делается без плагинов и не пропускает спам. То что доктор прописал, как говорится. Короче щас я вам покажу как такую же форму обратной связи сможете поставить и вы на свой любой блог на движке wordpress.

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

Создание формы обратной связи из 5 шагов:

ШАГ №1: Заходим на свой хостинг в папку wp-content/themes/ваша_тема и скачиваем на свой компьютер файл page.php. Скачали? Ок. Переименовываем его в contact.php например. Сделали? Отлично!

ШАГ №2: Скачайте к себе на компьютер вот этот архивчик, в нем есть файл txt с кодом. Откройте его. Там две части кода, я эти коды даже пометил, первая часть и вторая часть.

ШАГ №3: Открываем файл contact.php, в который мы переименовали page.php и в нем делаем 2 действия.

а) Удаляем код <?php get_header (); ?> и вместо него вставляем первую часть кода из файла, который вы скачали у меня. Если что вот он:

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
<?php
/*
Template Name: Contact
*/
?>
 
<?php get_header();?>
 
<?php
 
 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;
    }
 
} ?>

б) В этом же файле contact.php, находим строчку <?php the_content (); ?> и под ней вставляем вторую часть кода. Вот она:

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
<div id="contact_form">
                           <?php if(isset($emailSent) && $emailSent == true) { ?>
                                 <div class="contact_message">Ваше сообщение успешно отправлено!</div>
                           <?php } else { ?>
                                 <?php if(isset($hasError) || isset($captchaError)) { ?>
 
                                 <?php } ?>
 
                                 <form action="<?php the_permalink(); ?>" id="contactForm" method="post">
 
                                       <div class="contact_left">
                                            <div class="contact_name">
                                                 <input type="text" placeholder="Ваше имя" name="contact_name" id="contact_name" value="<?php if(isset($_POST['contact_name'])) echo $_POST['contact_name'];?>" class="required requiredField" />
                                                 <?php if($nameError != '') { ?>
                                                       <div class="errors"><?=$nameError;?></div>
                                                 <?php } ?>
                                            </div>
                                            <div class="contact_email">
                                                 <input type="text" placeholder="Ваш email" name="contact_email" id="contact_email" value="<?php if(isset($_POST['contact_email']))  echo $_POST['contact_email'];?>" class="required requiredField email" />
                                                 <?php if($emailError != '') { ?>
                                                       <div class="errors"><?=$emailError;?></div>
                                                 <?php } ?>
                                            </div>
                                            <div class="contact_theme">
                                                 <input type="text" placeholder="Тема" name="contact_theme" id="contact_theme" value="<?php if(isset($_POST['contact_theme'])) echo $_POST['contact_theme'];?>" class="required requiredField" />
                                                 <?php if($themeError != '') { ?>
                                                       <div class="errors"><?=$themeError;?></div>
                                                 <?php } ?>
                                            </div>
                                       </div>
 
                                       <div class="contact_right">
                                            <div class="contact_textarea">
                                                 <textarea placeholder="Сообщение" name="contact_comments" id="commentsText" rows="12" cols="56" class="required requiredField"><?php if(isset($_POST['contact_comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['contact_comments']); } else { echo $_POST['contact_comments']; } } ?></textarea>
                                                 <?php if($commentError != '') { ?>
                                                       <div class="errors"><?=$commentError;?></div>
                                                 <?php } ?>
                                            </div>
 
                                            <button type="contsubmit" class="contact_submit">Отправить</button>
                                            <input type="hidden" name="submitted" id="submitted" value="true" />
                                       </div>
                                 </form>
                           <?php } ?>
                      </div>

Окей. Файл contact.php готов. Сохраняем его и закидываем на наш сервер в папку с темой в ту же wp-content/themes/ваша_тема.

ШАГ №4: Для того, чтобы придать нашей форме обратной связи стили, ну чтобы она не отображалась криво, то берем вот этот код:

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: 100%;
	margin-top: 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: #6ea077;
        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: #7FAC87; }
 
.contact_message {
        width: 100%;
        height: 22px;
        padding: 70px 0;
        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;
}

и вставляем его в файл style.css темы вашего блога (wp-content/themes/ваша_тема/style.css) в самый конец например. А чтобы в трех полях (имя, мыло, тема) выводились специальные маленькие красивые картинки, то возьмите их все в том же архиве что вы скачали сейчас у меня и поместите в папку «images» вашей темы (wp-content/themes/ваша_тема/images).

ШАГ №5: Ну теперь собственно добавляем форму на сам блог. Для этого добавляем новую страницу в админке, называем ее как обычно, «Контакты», «Обратная связь» или как у меня например «НаписАть мне»... Что-то в этом духе в общем... И на этой странице справа в виджете «Атрибуты странцы» выбираем шаблон «Contact»:

contact

Все! Жмем «опубликовать»! А ну можете еще в теле страницы что-то написать, типа: Связаться со мной вы можете через форму, которую видите ниже. Кстати вы можете не создавать новую страницу, а добавить форму на уже существующую, где у вас уже что-то написано в теле страницы.

Форма связи для wordpress

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

обратный e-mail адрес

Форма мною проверена, работает отлично! Всем рекомендую. А брату Артему большое спасибо за помощь мне в ее создании. Молодца! Верстак от бога! Кстати эта форма использовалась и в курсе Как создать блог за ЧАС. Жалобы пока ни одной не получил!

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

Скажу только что делается это все через файл style.css в коде, который мы как раз туда вставили для оформления формы. Я, давайте, лучше сейчас все таки подскажу новичкам, как поменять цвет кнопки. Ну понятно, что сейчас она зеленая, а кто-то хочет синюю или красную.

Короче цвет кнопки в форме меняется опять же через style.css, в том коде, что вы вставили. Сейчас цвет, повторю, зеленый и выводится он в коде вот тут - background: #6ea077; То есть код цвета: 6ea077 — это и есть цвет кнопки. А при наведении цвет немного светлеет и выводится он вот тут  - background: #7FAC87; То есть код цвета: 7FAC87.

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

Код нужного цвета для формы

Действуйте! На этом у меня все на сегодня, я с вами прощаюсь, ну а турнир, в котором вы можете выиграть планшет google nexus 7 продолжается. Кроссворд №9:

Начать разгадывать | Отправить ответ

P.S. Чтобы быстрее получать уведомления о выходе новых статей блога и первым разгадать кроссворд, воспользуйтесь программой RSS FAST.

Всем пока!

С уважением, Александр Борисов


Как заработать продавая баннеры

5 000 000 за 2 года в интернете...

150 000 рублей в месяц с БЛОГа
Этот блог читают уже более 6000 человек
- читай и ТЫ!
комментариев 149
  1. Артём Черкасов

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

    в 04:11 | Ответить
    • Александр Борисов

      Может и нельзя... :)

      в 10:59 | Ответить
  2. Павел

    Форма настроена. Кроссворд класс — наши Молодцы!!! :)

    в 06:15 | Ответить
    • Александр Борисов

      Вижу. Клево!

      в 11:02 | Ответить
  3. Сережа

    Спасибо большое за столь полезную информацию

    в 07:25 | Ответить
  4. Артём Ельников

    Здравствуйте, Александр.

    Очень интересный подход. По сути вы создали новый шаблон страницы с кодом обратной связи.

    Интересно, каким образом данная форма сдерживает спам?

    в 08:12 | Ответить
    • Александр Борисов

      Все верно! Отдельный шаблон страницы.

      Не знаю как спам сдерживает, но он не проходит! :)

      в 11:00 | Ответить
  5. Артем

    Спасибо. Как раз вчера думал, как это реализовать на своем блоге.

    в 08:22 | Ответить
  6. Виталий Калинин

    Спасибо, Александр! Мощно. Люблю статьи про использование кода, где простому обывателю в доступной форме доноситься, как можно упростить работу блога. Супер! ;-)

    в 08:27 | Ответить
  7. Дмитрий

    Где-то читал, что еще удобно делать форму (или опрос) при помощи Гугл-Диск.

    Причем, довольно сложные можно запилить : )

    в 08:32 | Ответить
    • Анатолий

      Кстати, да. Я у многих видел опросы от Гугла :)

      в 10:21 | Ответить
    • Александр Борисов

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

      в 11:01 | Ответить
  8. Даниил Привольнов

    Эта форма, как я понимаю, стоит в теме с бесплатным курсом о создании блога за два часа? Форма отличная: лаконичная и простая.! А уникализировать её и правда можно под свой вкус.

    в 08:39 | Ответить
    • Александр Борисов

      Ага, тока курсе про блог за ЧАС :)

      в 11:01 | Ответить
      • Даниил Привольнов

        Да, конечно же) У меня в голове почему фраза два часа осела [:-))]

        в 12:40 | Ответить
  9. Александр

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

    в 09:12 | Ответить
    • Александр Борисов

      Статья была размещена ночью пока все спали. Чтобы было тому кто рано встает, тому бог подает [:-))]

      в 11:02 | Ответить
      • Александр

        Точно сказано. Я вот как раз ушел из-за компа за пол часа до выхода статьи. Утром увидел что на блоге новая статья. Очень нравиться принимать участие в конкурсе, интересные вопросы.

        в 12:17 | Ответить
  10. Николай Танкушин

    Хорошая статья. минус плагины, плюс быстродействие.

    Главное решение даётся почти под ключ...

    в 09:14 | Ответить
  11. Евгений

    Красиво и просто

    в 09:45 | Ответить
  12. Анатолий

    Ну вот, скоро у половины читателей этого блога появится такая же статья :)

    в 09:46 | Ответить
    • Александр Борисов

      [:-))]

      в 11:02 | Ответить
    • Артём Черкасов

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

      в 14:27 | Ответить
  13. Екатерина

    Здорово, когда четко объясняется что куда нажимать) Спасибо) Хорошо, что форма уже встроена в твоем Александр курсе) Спасибо еще раз) А кроссворд сегодня про хоккей( тяжеловато для девушки)

    в 09:51 | Ответить
    • Александр Борисов

      Зато многие читательницы блога будут знать половину сборной России по хоккею. [:-))]

      в 11:03 | Ответить
      • Екатерина

        а надо ли?

        в 12:22 | Ответить
        • Александр Борисов

          Естественно. Удивите мужчину. Он еще больше любить вас будет.

          в 12:41 | Ответить
  14. Никита Волков

    Спасибо за статью!) Стоит именно такая форма обратной связи, именно с вашего курса: "Блог за час". Очень удобная!

    в 10:08 | Ответить
  15. Юрий

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

    Выглядит симпатично. Обязательно применю у себя на бложике.

    в 10:16 | Ответить
  16. Наталья Мельникова

    Использую данную форма у себя на блоге-очень довольна! Все качественно и шустро работает! И досталась можно сказать в подарок — в новом курса о создании блога за час! Спасибо! :)

    в 11:18 | Ответить
  17. Юлий

    Интересное решение) Я специально тему купил со встроенной формой связи, чтобы плагины не использовать)

    в 12:01 | Ответить
  18. TatyanaD

    Интересно! использую в блоге!

    в 13:19 | Ответить
  19. Юрий

    Что-то у меня стили через раз применяются. Не мог бы кто-нибудь дать рабочий файл contact.php. А то может я не правильно что-то понял.

    в 13:22 | Ответить
    • Александр Борисов

      Да вроде все норм нет? Картинки закиньте еще в папку с темой.

      в 13:37 | Ответить
  20. Александр Борисов

    Ребята сори! Статью чутка подправил. Там без маленьких картинок в полях форма была. Сейчас поправил. То есть еще раз скачайте архив, что я вам дал и там найдете мини картинки. Их поместите в папку wp-content/themes/ваша_тема/images.

    в 13:35 | Ответить
    • Юрий

      Спасибо! Заработало. Совсем другое дело.

      в 13:49 | Ответить
  21. Мария Ганн

    У меня примерно такая форма уже давно на всех сайтах стоит. Реально удобно!

    в 14:24 | Ответить
  22. Марина

    Спасибо. Как раз просматривала плагины форм. Все не то. Поработаю с Вашей формой.

    в 17:09 | Ответить
  23. Лилия

    Здравствуйте, Александр!

    Тоже понравилась форма. Но встала на моем блоге как-то криво. Текст иназвание страницы выводится после формы. Можно ли что-то сделать?

    в 18:05 | Ответить
    • Александр Борисов

      Можно, обратиться к верстальщику. :)

      в 21:37 | Ответить
  24. Владимир

    Ну Александр!.

    Прямо телепатия!

    Зашел к вам по другому поводу и тут вижу...

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

    Про Contact Form тоже верно сказано — я конечно мазохизмом не увлекаюсь (2 плагина на одну форму) но то что она реально грузит блог — это факт.

    А на днях как раз будет шанс проверить вашу схему

    в 20:33 | Ответить
  25. Андрей

    Здравствуйте.Александр! Всё четко и понятно. Я так понял вы ускоряете загрузку своего блога? А может проще переписать блог на чистый код ведь у вас есть хорошие фрилансеры

    в 20:51 | Ответить
    • Александр Борисов

      Да, ускоряю, перейти на чистый код не проще.

      в 21:38 | Ответить
      • Андрей

        Думаю что переход на чистый код в вашем случае как популярного блогера просто необходим и оправдан.

        в 22:06 | Ответить
        • Александр Борисов

          Необходим? Это самоубийство.

          в 22:35 | Ответить
          • Андрей

            А почему самоубийство. Хороший программист , HTML,PHP и MySQL и вот он скоростной блог и самое главное абсолютно не интересен хакерам так как код индивидуален и заточен только под ваши нужды и всегда можно увеличить функционал.Ну как-то так.

            в 22:57 | Ответить
          • Александр Борисов

            Андрей сделайте себе блог с индивидуальным кодом. Я посмотрю, потом уже может подумаю. :)

            в 22:59 | Ответить
          • Андрей

            Я не программист и сделать блог на коде конечно не смогу здесь вы конечно правы. А программист сделает я просто уверен. Что касается меня то я лучше сделаю блог по вашим рекомендациям .И за это вам большое спасибо!

            в 23:23 | Ответить
          • Александр Борисов

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

            в 23:27 | Ответить
          • Миша

            Бредишь, Андрюха. Над WP работают официально более 1000 опытных разрабов на протяжении многих лет. В чём смысл твоего предложения. я не понимаю? Ты предлагаешь те же PHP, MYSQL, т.е. те же инструменты для создания новой CMS? Полный абсурд. Вложим кучу бабла (речь об очень крупных цифрах, если хотим получить хоть что-то близкое по функционалу к WP) и получим на выходе дырявую CMS + с более высокой нагрузкой. Над WP не нубы работают и задача производительности отнюдь не на последнем месте у них.

            У WP есть милионное коммьюнити. Если возникает проблема — бесплатную помощь найти проще простого. В индивидуальной цмске любые даже самые мелочные проблемы — только за деньги + куча головной боли и временных затрат.

            Плагины заменять кодом и написанием функций — разумно. Брезговать движком WordPress и писать свой — неразумно. Подумай над своей идеей, она ни о чём :)

            в 23:08 | Ответить
          • Марат

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

            в 13:06 | Ответить
  26. Артем

    Отличный вариант! У меня на блоге аналогичная форма установлена, то есть без плагина, но выглядит не так красиво. Надо обкатать этот скриптик...

    в 21:33 | Ответить
  27. Маргарита Сизонова

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

    в 21:36 | Ответить
  28. Николай

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

    Но в чем проблема организовать форму обратной связи через сторонний сервис типа деск ру? Это ведь удобней, через систему тикетов общаешься, история сообщений хранится, все e-mail хранятся, через поиск можно найти всю историю общения с конкретным читателем, на бесплатном тарифе вполне нормально использовать. [:-))]

    Единственный минус, что вся история переписок хранится на стороннем сервисе, для меня это не особо проблематично.

    Спасибо, Александр, что облегчаешь новичкам блоггерскую жизнь и помогаешь советами. [good]

    в 21:44 | Ответить
  29. Сергей

    IP адрес отправителя письма эта форма сообщает ?

    в 22:00 | Ответить
  30. Галина Нагорная

    Очень интересное решение. Правда, для некоторых (это я) — коды, это что-то особенно страшное, непонятное, и даже, если решишься на такой отчаянный шаг — что-то в них менять, в последний момент дрейфишь... Страшно, аж жуть! И мёртвые с косами стоят...

    Буду воспитывать в себе решимость, но после комментария Маргариты (выше), как-то призадумалась... Наверное, лучше обратится к фрилансеру. Тем более, Вы всегда этот шаг рекомендуете!

    За статью — спасибо, Александр! Благодаря Вам я постепенно (очень медленно!), начинаю сама пробовать разобраться в таких вещах, как коды — есть у Вас талант доходчиво объяснять сложное! :)

    в 22:09 | Ответить
  31. Лилия

    Александр! Все таки я поставила эту форму себе на блог. Оказалось, что 2 часть кода не туда вставила. И она оказалась такой маленькой и компактной. Класс!

    в 22:19 | Ответить
    • Александр Борисов

      Отлично Лилия. Советую вам еще цвет кнопки поменять, чтобы была вот такая при обычном состоянии: C9A05F, а при наведении — E2C586

      в 22:35 | Ответить
  32. Сергей

    У меня 31 плагин и хотел еще поставить, но теперь не буду. Все таки надо браться изучать HTML и писать скрипты самому :) . В любом случае разгрузить блог необходимо!

    в 22:36 | Ответить
  33. Елена Контиевская

    Отличная Форма мне от Вас, Саша досталась в подарок на мой новый "Блог Елены Контиевской"! Скачала Ваш бесплатный курс "Как создать блог за час", а в шаблоне сайта уже эта формочка прикручена, как и многое другое...Простенько, но со вкусом!

    Уже привыкла к ней, как к родной. На другом моём сайте вся такая растакая расфуфыреная цветная стоит. А эта обычная, но чем-то привлекает...

    А к Вашей форме для комментариев добавила кучу забавных смайликов-вообще красота получилась. То, что доктор прописал! [good] ;-)

    Я начинаю теперь понимать, что простота и лаконичность тоже иногда играют решающую роль.

    Буду теперь брать с Вас пример-постепенно избавляться от плагинов... переходить на коды. :-D

    в 22:38 | Ответить
    • Александр Борисов

      Прикольно вы смайлы вставили!

      в 11:01 | Ответить
  34. Сергей

    А с моей темой ifeature отобразилась она не совсем корректно... видимо, не судьба, придётся плагины оставить

    в 22:38 | Ответить
    • Denis

      Сергей, нет таких тем которые работают не корректно. Проблема кроется как всегда рядом,у вас тема на Бутстрапе построена — он свои стили подставляет. Могу помочь.

      в 23:55 | Ответить
      • Сергей

        Денис, благодарю. Написал Вам на почтовый ящик

        в 01:02 | Ответить
  35. Лилия

    Александр, спасибо за подсказку. Цвет поменяла. Так, конечно, лучше. :)

    в 23:31 | Ответить
    • Александр Борисов

      [good]

      в 11:02 | Ответить
  36. Алексей

    Спасибо большое Александр! Классная форма обратной связи! [good] Ты мне помог избавиться еще от одного плагина.

    Сейчас установил на свой тестовый блог, подберу подходящие стили и закину на основной. "Брату" тоже передавай спасибо. :)

    в 23:35 | Ответить
  37. SorusN

    Очень толково. Скажите, а на DLE сайте можно реализовать? Может кто-то "натолкнет" вебмастеру-аматору.

    в 02:09 | Ответить
    • Александр Борисов

      Про DLE не знаю! :)

      в 11:03 | Ответить
  38. Илья

    Интересный подход) Александр спасибо. Как поставлю на блог, дам обратную связь) :-D

    в 04:49 | Ответить
  39. Александр

    Классный пост, Саня! [good] Себе обязательно установлю такую форму :)

    в 05:06 | Ответить
  40. Григорий

    Здравствуйте! Хочу сразу попросить прощение, что вопрос задаю не по теме. Скажите пожалуйста, а партнерские ссылки надо заключать в noindex?

    Заранее вам больше спасибо!

    в 09:05 | Ответить
    • Александр Борисов

      Желательно, но сейчас ни на noinex ни на rel="nofollow" роботы не смотрят!

      в 11:06 | Ответить
  41. Владислав

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

    в 17:31 | Ответить
  42. Виолетта Марич

    ОЙ, а й меня столько всего тут вставлено вместо одной сторочки <?php get_header (); ?>! Что делать? Удалять?

    КОД УДАЛЕН!

    в 12:32 | Ответить
    • Александр Борисов

      Ну по ходу все и удалять )

      в 12:36 | Ответить
      • Виолетта Марич

        Спасибо, удалила, но теперь новый фокус — такой сторочки нет: <?php the_content (); ?>.

        Осталось только это:

        КОД УДАЛЕН!

        в 12:54 | Ответить
        • Виолетта Марич

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

          в 12:57 | Ответить
    • Александр Борисов

      Оууу... Виолетта не пишите тут код плиз ок? :)

      Вам лучше к верстаку. Я не особо тут силен.

      в 13:01 | Ответить
  43. Виолетта Марич

    Саша, спасибо, заработало, почти идеально! :) [good]

    И сорри за коды — просто не сильна в них. :-|

    в 13:07 | Ответить
  44. Denis

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

    в 13:07 | Ответить
  45. 4elovek_futbolist

    Удобная штука :) Надо себе такую сделать [good]

    в 21:03 | Ответить
  46. Бронислав

    Спасибочки, Александр, вот и еще от одного плагина избавился! Все работает, как часы и форма приятная, не то, что была от плагина Contact Form 7. Была правда загвоздка при загрузке файла contact.php на сервер, оказалось, что такой уже есть, так я этот переименовал чуть-чуть contacts.php, вроде бы все получилось :)

    в 23:34 | Ответить
  47. oleq

    Огромное спасибо за код обратной формы, давно хотел избавиться от двух плагинов ... и верно написано в статье "Два плагина для создания формы связи на блоге это пипец конечно!" ;-)

    в 08:30 | Ответить
  48. Denis

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

    в 11:44 | Ответить
  49. Морис

    А в кроссворде то вы чуть чуть вводите в заблуждение с вопросом о нападающем сборной России из Ак Барса. Он не нападающий, а защитник ;-)

    в 22:16 | Ответить
  50. Дмитрий

    Спасибо, Александр, за форму — как раз то что нужно, всё работает как часы. А то до этого на один блог поставил форму обратной связи (немного другую, но тоже без плагина), а на другой её поставить никак не получалось, приходилось использовать плагин. Теперь и его можно отправить в топку! Ещё раз спасибо, жду новых статей! ;-)

    в 22:47 | Ответить
  51. Кай

    Александр,

    а у формы есть вместо простого заполнения поля "Тема" выпадающий список? Я просто привык к Contact Form 7, по этому списку так же фильтрую письма в почтовом ящике.:-)))

    Но после рекомендованного вами тестирования скорости загрузки P3, у меня Contact Form 7 в лидерах по потере времени...:-)))

    в 16:05 | Ответить
    • Александр Борисов

      К сожалению нет. Да Contact Form очень жесткий плагин!

      в 16:06 | Ответить
    • Denis

      Кай, выпадающий список можно сверстать, и прикрутить к этой форме.Все возможно, все решаемо ;-)

      в 23:53 | Ответить
  52. Наталья

    Александр, прочла Вашу статью о форме обратной связи, честно скажу заинтересовало. Захотелось поставить себе такую "легкую" форму. Решила глянуть как это реализовано у Вас, зашла к Вам в "НаписАть мне", а у Вас там совсем другая форма, не такая которая показана в этой статье. А как поставить такую форму как у Вас? она визуально получше :)

    в 10:47 | Ответить
  53. Vachevskiy

    У тебя уже есть статья на тему "Как сделать форму обратной связи?" Я по этой статье и сделал форму, она стоит да блоге по сегодняшней день. Главное что без плагина и работает, а все остальное неважно, я так считаю.

    в 23:31 | Ответить
    • Denis

      Да была такая статья, но она устарела как и все в этом мире.

      в 12:25 | Ответить
  54. Павел

    Классно отработано! Респект! Подойдет, думаю, тем, кто любит ковыряться в тонкостях и сделать свой блог реально неповторимым. :)

    в 15:59 | Ответить
  55. Евгений

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

    в 16:28 | Ответить
    • Denis

      Евгений, это из за кодировки. Кодировка должна быть utf-8.

      в 08:05 | Ответить
      • Евгений

        Нужно на сам этот файл поставить ?? Или на все ?

        в 12:17 | Ответить
        • Denis

          Сам файл в который вставляете код формы. Попробуйте открыть файл в редакторе Sublime Text 2 он автоматом в utf-8 кодирует

          в 13:37 | Ответить
  56. Олег

    Хотел бы внести небольшие правки — в коде формы используется устаревшая функция eregi , которая не будет работать на php5.3. Сейчас на хостингах с php 5.3 используют preg_match

    Если ошибка типа

    код удален автором!

    в 12:51 | Ответить
    • Евгений

      Олег, у меня выскакивает такая ошибка когда стоит eregi !!

      код удален автором

      Я поменял на preg_match теперь такая !

      код удален автором

      Что делать ??

      в 13:11 | Ответить
  57. Валерий

    О! Вот это очень полезно [good]

    в 07:02 | Ответить
  58. Наталья

    А у меня почему-то не получилось. Хотя вроде бы внимательно все делала...

    в 03:54 | Ответить
  59. Наталья

    Форма появилась, а в ней ромбики с вопросиками. Как их убрать?

    в 04:05 | Ответить
    • Евгений

      Нужно кодировку поменять на UTF-8

      в 14:04 | Ответить
    • Игорь

      У меня исчезли иероглифы после преобразования файла contact в UTF-8 без BOM

      в 18:45 | Ответить
  60. илья

    Цитата: Кстати вы можете не создавать новую страницу, а добавить форму на уже существующую, где у вас уже что-то написано в теле страницы.

    ---Каим образом?

    в 13:18 | Ответить
  61. руслан

    если у в page.php нет функций get the content ,как быть?

    в 22:08 | Ответить
  62. Владимир Свищ

    Форма зачет. Перелопатил с пару десятков сайтов, то буковки кривые, то линии косые, или просто безвкусные. Тут же форма что надо, удобно и красиво — спасибо автору :)

    в 00:04 | Ответить
  63. БлогоЗапись

    Привет Александр!! и все читатели этого блога. Вот честно я приходя сюда нашел очень много для себя. Я начинающий блогер. Поставил эту форму и очень доволен. Спасибо! Можете посмотреть мой блог. Подписку сделаю объязательно))

    в 13:28 | Ответить
  64. Игорь Скударнов

    Спасибо за форму. Отлично работает.

    Внешний вид настраивается на раз-два.

    В общем, просто супер!

    в 18:10 | Ответить
  65. Александр

    Спасибо за форму. Сделал на своём сайте, всё супер. Скажу даже лучше плагина Contact Form 7 да и нагрузки меньше. Кстати есть вопросик, а такое чудо в виде формы "Заказать обратный звонок" можно сделать? Естественно без всяких плагинов. У меня их и так 39 шт. ((

    в 21:45 | Ответить
  66. Руслан

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

    в 10:53 | Ответить
    • Denis

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

      в 14:19 | Ответить
  67. игорь

    если нажать кнопку перезагрузит страницу при не правильном вводе то не чего не перезагружает как это исправить?

    в 21:54 | Ответить
  68. Маргарита

    СПАСИБО вам огромное! Установила и очень нравится!

    в 01:44 | Ответить
  69. Алексей

    Здравствуйте, Александр! Я всю голову сломал как в эту форму добавить кнопку прикрепить файл. Хотя кнопку не трудно установить, вот только не работает, не приходят файлы фото на почту. Как это можно сделать?

    в 02:02 | Ответить
  70. Сергей

    Вы написали: "б) В этом же файле contact.php, находим строчку <?php the_content (); ?> и под ней вставляем вторую часть кода." Но у меня в скачанном из темы с моего сайта нет строчки <?php the_content (); ?>. Куда вставлять код в этом случае. Ниже привожу присутствующий на исходной странице код:

    Код удален администрацией!

    в 12:54 | Ответить
    • Жандос Мукатаев

      Обратитесь за помощью к верстальщикам.

      в 15:36 | Ответить
      • Сергей

        Тема стандартная для WordPress. Кстати, я посмотрел файл page.php и для других стандартных тем — нигде подобной строки в коде не нашёл. Судя по Вашему ответу, решить мой вопрос с помощью данной формы не представляется возможным.

        в 16:01 | Ответить
  71. Сергей

    Всё, сам разобрался, куда вставлять код в новых темах WP!

    в 16:22 | Ответить
    • Ольга

      Куда?)

      в 11:39 | Ответить
    • Андрей

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

      в 13:08 | Ответить
  72. Дмитрий

    Отлично! Будем менять свою скудную форму)

    в 13:24 | Ответить
  73. Антон

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

    в 12:08 | Ответить
  74. Ольга

    Добрый вечер! Спасибо большое за подробную инструкцию!

    Всё сделала, кроме 5-го шага. Хотела спросить: можно ли эту форму в сайдбар поместить?..

    в 23:42 | Ответить
  75. Владимир

    Не шлёт на мейл.ру, только на гугл почту, и то в спам

    в 08:41 | Ответить
    • Владимир

      Хотя нет – всё прекрасно работает (не работало только на тестовом сайте). Большое спасибо за классную форму связи [good]

      в 00:02 | Ответить
  76. Сергей

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

    в 17:46 | Ответить
  77. pomosh

    Классная форма, поставил у себя. Все работает.

    Интересно за счет чего спам не проходит?

    в 08:30 | Ответить
  78. никола

    у меня такая проблема если отправить сообщение через форму то он уходит но если перезагрузить страницу то оно отправляется снова в чем причина ?

    в 18:33 | Ответить
  79. Тигран

    Почему сообщение отправляется, но не приходит на почту(((

    в 23:17 | Ответить
  80. Андрей

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

    в 12:45 | Ответить
  81. Вадим

    Все работает, спасибо большое, Александр ты — как всегда на высоте...

    в 11:59 | Ответить
  82. Павел

    За совет спасибо!!! Такая же форма стоит в курсе "как создавать блок за час"

    Надо попробовать его вставить в обыкновенный сайт, тогда будет просто отлично :)

    в 23:45 | Ответить
  83. Сергей

    SOS!!!!!!!!!!!!!

    Не могу установить , пожалуйс та помогите

    в 19:28 | Ответить
  84. Андрей

    Класс РАБОТАЕТ)))

    в 13:01 | Ответить
  85. Parfumer

    Установил эту форму на wordpress Версия 4.1.10. Сделал пошагово и все стало красиво, а вот при тестовой отсылке сообщения писем нет. Ни в ящике ни в спаме.

    Менял в "Общих настройках блога" почту gmail и yandex/

    Получается предложенный вариант уже не актуален сегодня? Или есть доработанный вариант под сегодняшние реалии?

    в 00:11 | Ответить
    • артем

      у меня то же самое, форма встает на страницу, но письма не отправляет. может версия php не подходит? у меня установлена php-7

      в 03:38 | Ответить
    • артем

      да, так и есть, только что проверил. эта форма работает только на старых версиях PHP. На PHP-5.3 без проблем отправляет письма. я ушел на php-7 при этом скорость загрузки сайта возросла в разы, но форма обратной связи перестала работать. может кто-то знает, как адаптировать эту ФОС под PHP-7?

      в 03:47 | Ответить
  86. Василий

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

    в 17:56 | Ответить
  87. Николаев Николай

    Добрый день!

    форму вставил в виде кода — все работает но есть одно но

    еси отправлять с mail самому себе — то письмо приходят с задержкой и тоже пишет — с других ящиков приходят но mail пишет

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

    Надо вставить в код проверку

    Политика DMARC включает в себя проверку трех параметров:

    DKIM-подписи — это цифровая подпись, подтверждающая, что письмо отправлено именно с домена отправителя;

    SPF-записи — это запись, содержащая список почтовых серверов, которые могут отправлять почту от имени конкретного домена;

    Домены из SPF-записей и DKIM-подписи — они должны соответствовать домену из поля «От кого:».

    Как решить эту задачу?!

    в 21:44 | Ответить
  88. Евгений

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

    в 16:45 | Ответить
    • Николай

      С майла приходит с опозданием и с предупреждением:

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

      Надо вставить в код проверку

      Политика DMARC включает в себя проверку трех параметров:

      DKIM-подписи — это цифровая подпись, подтверждающая, что письмо отправлено именно с домена отправителя;

      SPF-записи — это запись, содержащая список почтовых серверов, которые могут отправлять почту от имени конкретного домена;

      Домены из SPF-записей и DKIM-подписи — они должны соответствовать домену из поля «От кого:».

      C гугла и яндекса приходит без проблем.

      Как решить эту задачу?!

      в 06:52 | Ответить
      • Евгений

        Вот здесь нашел инфу по прикрутке к домену SPF и DKIM o-zarabotkeonline.ru/nast...omennoy-pochtyi/ сделал все как написано, но проблемы не решило... [:-|] Возможно в самой форме косяк именно, в коде не шарю к сожалению на уровне, чтобы решить проблему такую. И у меня именно не доходят письма с майл.ру, а не с задержкой идут, их прям совсем нет.

        в 10:27 | Ответить
      • Евгений

        В общем SPF и DKIM записи настроил на домен и проверил на нескольких сервисах, активные и рабочие, проблема формы явно не в них.

        в 10:57 | Ответить
  89. Николаев Николай

    Короче я разобрался — это чистой воды спамерская форма и там есть подмена адреса:

    В 54 строчке первого кода (самого вернего) $headers выражение '.$email.' надо заменить на свой емайл от домена. И все будет приходить.

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

    А так если добавить как я написал — все проходит чисто — имя только надо свое сменить еще впереди строчки.

    в 23:25 | Ответить
  90. Андрей

    Алексанр спасибо огромное за форму вы как всегда даете все лутчшее для своих подписчиков отдельное спасибо за курс блог за час единственное хотел спрасить по поводу плагина сео какой лучше использовать говорят йоло хороший интересно ваше мнение как Гуру! [good]

    в 08:29 | Ответить
  91. Роман

    Спасибо. НЕ РАБОТАЕТ!!! Все делал четко по инструкции. АВТОРУ НУЖНО ДОБАВИТЬ, ЧТО ЭТА ИНСТРУКЦИЯ ПОДХОДИТ НЕ ДЛЯ ВСЕХ ШАБЛОНОВ WORDPRESS.

    в 11:14 | Ответить
    • Николаев Николай

      Сделайте как у меня написано- все работает — у меня регулярно письма приходят.

      в 13:57 | Ответить
Оставить комментарий: (ПРОЧТИ ЭТО!!!)
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]