Профессиональное
обучение блоггингу

Легкая и красивая форма обратной связи для 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.

Всем пока!

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


Мощный SEO плагин WordPress

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

150 000 рублей в месяц с БЛОГа
Этот блог читают уже более 6000 человек
- читай и ТЫ!
Комментариев к статье: 138
  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 | Ответить
  86. Василий

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

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