Блог Евгения Смецкого

Как создать блог и сделать его популярным, что нужно для этого? Интересные статьи на тему: SEO, раскрутка, заработок.

Создание блога

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


Warning: count(): Parameter must be an array or an object that implements Countable in /home/smetskiy/smetskiy.com/www/wp-content/plugins/wp-noref/wp-noref.php on line 142

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

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

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

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

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

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

Вариант 1

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

Вариант 2

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

Ну вот такие две замечательных контактных формы, вы скажите простая форма обратной связи, да все очень просто и красиво, с помощью стилей вы сможете сделать ее под свой сайт. Принцип работы у них один и тот же, Капча от СПАМА здесь встроенная, так что не думаете о том что вам будут приходить спам письма.

Немного скажу почему я буду использовать эту форму а не плагин ? Да есть плагины хорошие которые многие ставят себе на блог, один из таких плагинов это Contact Form 7, но я слышал что к нему еще и нужно капчу установить, представьте, два плагина на одну форму, не много ? Я думаю что даже очень много, ну что ж, решать вам !!

Разберемся теперь как что и куда прописывать.

Первое что нужно сделать, это зайти на свой хостинг в папку с вашей темой примерно по этому адресу wp-content/themes/тема, и скачать один файл, который называется page.php, скачали на свой компьютер и переименуйте его сразу, например в contact.php, теперь открывает данный файл.

Открыть файл contact.php, можно с помощью программ: Notepad++ или Adobe Dreamweaver

После того как открыли этот файл, находит строчку <?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;
    }
 
} ?>

Ниже находим еще одну строчку <?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>

Сохраняем, теперь это файл нужно загрузить на хостинг по адресу wp-content/themes/тема, так где и ваш файл page.php.

Далее нужно прописать стили и вот здесь внимательно !!! Первый стиль это будет, вариант первой формы а второй, соответственно второй формы. Вставить данный стиль нужно в Внешний Вид/Редактор/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 Form --------------------------------*/
 
#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: #B0B2B1;
        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: #93969C; }
 
.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;
}

Сохраняем.

Стиль второй формы:

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
98
99
100
101

/*-------------------------------- Contact Form --------------------------------*/
 
#contact_form {
        position: relative;
        width: 90%;
	margin: -20px 30px
}
 
.contact_left {
        /* float: left; */
        width: 131px;
}
 
.contact_right {
        float: left;
 
 
        width: 90%;
 
}
 
.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: 250px;
        height: 30px;
        line-height: 30px;
 
        padding: 0 0 0 10px;
        margin: 0 0 20px;
        background: #FFFFFF;
        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: #FFFFFF; }
.contact_theme input[type="text"] { background: #FFFFFF; }
 
.contact_textarea textarea {
        position: relative;
 
 
 
        width: 100%;
        height: 116px;
        padding: 7px 10px;
	margin: 0 0 18px;
        background: #FFFFFF;
        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: left;
	width: 120px;
	padding-top: 7px;
	padding-bottom: 4px;
	margin: 0 0 15px;
	background: #E2E2E2;
        border: none;
        border-radius: 4px;
	/* text-transform: uppercase; */
	text-align: center;
	font-size: 16px;
	color: #9B9B9B;
	transition: background-color ease-in-out .15s;
	cursor: pointer;
}
.contact_submit:hover { background: #D2D2D2; }
 
.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;
}

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

Для варианта 2, нужно установить маленькие картинки где прописано Имя, Email и Тема, скачать эти изображения можно здесь. Распакуйте и загрузите их к себе на хостинг в папку wp-content/themes/тема/images.

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

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

С правой стороны есть колонка Атрибуты, в ней есть пункт Шаблон, выберите «Contact» и жмите опубликовать. Вот пример:

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

Затем добавьте страницу эту в меню и готово.

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

Новости:

На блоге появился новый раздел, нажав на красную кнопку в шапке блога ЖМИ. Там вы сможете посмотреть все интересные разделы моего блога а также следить за новыми турнирами и конкурсами, которые проводятся у меня.

Полезные статьи:

С уважением Евгений Смецкий

Написано Евгений Смецкий в 2014-12-29 / 10751 Views
АВТОР

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

23 комментария

  • Александр 2014-12-29 в 17:20

    Мне второй вариант нравится, попробую себе сделать так на блоге.

    Ответить
    • Артём 2015-01-10 в 13:17

      У меня 2 вариант.Шаблон бесплатный- Борисова 🙂

      Ответить
      • Александр 2015-01-22 в 00:14

        Я тоже хотел шаблон Борисова поставить, но потом передумал.

        Ответить
  • Владимир 2014-12-29 в 18:27

    Спасибо за статью!

    Правда кода очень много 😐

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

    Ответить
  • Ivanovskij 2014-12-29 в 18:53

    Первый вариант красиво смотрится 😛

    Но, вот в первом коде, не могу понять зачем открывать php и указывать там комментарий, неужели нельзя их написать без <?php ?

    Ответить
  • Женя 2014-12-29 в 19:25

    Спасибо большое Жека все супер!!!! =)

    Ответить
  • Ильдар Тимербаев 2014-12-30 в 17:12

    А не проще пользоваться сторонним сервисом?

    Я себе на блог установил такую форму и вроде все норм.

    Ответить
    • Александр 2015-01-11 в 00:21

      Я тоже пользуюсь сторонним сервисом. Но своя лучше. А вдруг тот сервис накроется. И всё обратной связи нет.

      Ответить
  • Денис Тумилович 2014-12-30 в 22:41

    Написал бы еще как тему обращения самому предоставлять читателю на выбор из списка.

    Ответить
    • Ильдар Тимербаев 2014-12-31 в 11:32

      Да, мне, кстати, нравится, когда не нужно придумывать тему запроса. Выбрал из списка, и вуаля, все готово 🙂

      Ответить
      • Александр 2015-01-16 в 07:36

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

        Ответить
    • Александр 2015-01-16 в 07:34

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

      Ответить
      • Александр 2015-01-30 в 11:36

        Задумка действительно интересна. Но если сам блог ведёшь, то разницы наверное нет. И одной формы хватит.

        Ответить
  • Александр Белый 2015-01-07 в 13:50

    Как вариант, чтоб избавиться от плагинов так, как два плагина для одной формы это слишком

    Ответить
    • Александр 2015-01-16 в 07:32

      Поэтому многие отдают предпочтение как раз формам связи сделанным с помощью кода

      Ответить
  • Александр 2015-01-08 в 00:57

    Хотел себе сделать на новом сайте, не получилось. У меня нет строчки Вторая есть. Пробывал эксперементировь, страница стаёт не доступной. 🙄 🙄

    Ответить
  • Александр 2015-01-08 в 02:14

    Самой первой, там где хедер. Вот начал сайт делать fazanet.ru Хотел на нём сделать форму обратной связи.

    Ответить
  • Александр Приколист 2015-01-16 в 02:16

    В своё время снёс форму связи на всех

    своих сайтах которая была сделана с помощью плагина так как

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

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

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

    Ответить
  • Akira Tsukizawa 2015-02-06 в 10:20

    Спасибо за форму, всё работает, но, css валидатор ругаеться 🙁 хотя может и баг со стороны w3 😆

    .contact_right Ошибка значения : width Ошибка разбора — 155px)

    .contact_right Ошибка значения : width Ошибка разбора — 155px)

    .contact_right Ошибка значения : width Ошибка разбора — 155px)

    .contact_textarea textarea Ошибка значения : width Ошибка разбора — 20px)

    .contact_textarea textarea Ошибка значения : width Ошибка разбора — 20px)

    .contact_textarea textarea Ошибка значения : width Ошибка разбора — 20px)

    Ответить
    • Евгений Смецкий 2015-02-06 в 16:36

      Перед тем как оставляете свой комментарий, пишите пожалуйста свой сайт, где установлена данная форма !!!

      Ответить
  • Диана 2017-05-23 в 17:07

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

    Ответить

    • Добавьте свой Комментарий

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