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

Опубликовано: 23.10.2014 | 1339

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

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

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

Содержание:
1. Для чего нужен такой функционал?
2. Установка формы.

Зачем блогу обратная связь с автором?

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

Можно конечно же указать адрес электронной почты и другие контакты в социальных сетях и на прочих сайтах, но это немного не то. Читателю нужно дать готовое решение, чтобы он заполнил поля и отослал своё письмо. К тому же, Ваш адрес электронной почты не засвечивается и не отображается нигде на блоге, что исключает его попадание в спам-списки различных спам-роботов.

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

1. Предложение о сотрудничестве.
2. Различные вопросы.
3. Сообщение об ошибках.
4. Подача заявки на участие в конкурсе.
5. Покупка рекламы на блоге.
6. Сообщение о нарушении авторских прав.
и многое многое другое…

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

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

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

Внедряем код формы в блог

Итак, давайте перейдём к главному. Сделаем форму и забудем про неё. Для начала давайте сделаем копию файла page.php, который находится в корне Вашей темы и переименуем его, например в support.php (должен лежать в этой же папке). Затем открываем его в текстовом редакторе и удаляем содержание по схеме.

<?php
//Тут, как правило, комментарии Вашей темы!
?>
 
<?php get_header();?>
 
!!!Всё что между этих строк смело удаляем!!!

<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

<?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;
    }
 
} ?>

	<div id="primary" class="site-content">
		<div id="content" role="main">

			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', 'page' ); ?>
				
				<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">
                                            <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>
				
				<?php comments_template( '', true ); ?>
			<?php endwhile; // end of the loop. ?>

		</div><!-- #content -->
	</div><!-- #primary -->

Сохраняем файл и переходим к следующему шагу. Теперь нам нужно вставить стиль формы в файл style.css, который также находится в корне Вашей темы. Возможно у некоторых он называется по другому, но, как правило, файл стилей всегда имеет одно название.

/*-------------------------------- 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: 300px;
        height: 30px;
        line-height: 30px;
	padding: 0 0 0 31px;
        margin: 0 0 20px;
        background: #ededb7 url(http://site.ru/img/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: #ededb7 url(http://site.ru/img/mailid.png) no-repeat 0 0; }
.contact_theme input[type="text"] { background: #ededb7 url(http://site.ru/img/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: #ededb7;
        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: #ededb7; }
 
.contact_message {
        width: 100%;
        height: 22px;
        padding: 70px 0;
        text-align: center;
        font: normal 22px Arial, sans-serif;
        color: #434343;
}

Если Вы сильны в CSS, можете по своему вкусу настроить стиль данной формы. Я дал Вам дизайн, заточенный под свою тему, но здесь только цвета. Если Вам понравится, значит можете оставить как есть. Обратите внимание на выделенный жирным шрифтом и красным цветом текст. Данные пути замените на свои.

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

Итак, пол пути уже сделано. Даже больше чем пол пути. Теперь нам нужно создать страничку, дать ей название, например, «Контакты» и присвоить шаблон. Всё это делается стандартными функциями WordPress. При создании странички выберите шаблон support, как показано на рисунке. У меня этот шаблон называется contact.

Выбор шаблона формы обратной связиВот и всё. Теперь на Вашем блоге будет красоваться форма обратной связи. В шапку страницы можете добавить другую информацию, либо какое-нибудь обращение. Ещё раз повторюсь, что вещь — супер! Работает мгновенно и постоянно. Рекомендую незамедлительно сделать такую форму на своём блоге и оперативно получать письма от Ваших читателей.

На этом у меня всё. Спасибо за Ваше драгоценное внимание. С уважением, Александр Васильев!

БредТак себеНеплохоХорошоОтлично
Загрузка...
Подписка на новые статьи блога


Не будь жадиной! Поделись с друзьями :)



Комментарии к этой записи (Правила):

  1. Юрий Йосифович (20.11.2014)



    Хотел бы узнать, каким плагином (или кодом) реализована подсветка синтаксиса кода скриптов, подскажешь, Александр?

    1. Александр Васильев (20.11.2014)



      Я использую два плагина «wm-syntax» и «wp syntax integrated». один без одного они работать у меня не хотят. Да и отображать код, где присутствуют sql-запросы тоже не хочет. Статью даже сохранить невозможно, не то что опубликовать.

      1. Александр Васильев (28.11.2014)



        Лаги пошли. Ошибок много вылезло… Подсветка есть, но пока только одним плагином.

      2. Юрий Йосифович (28.11.2014)



        Да уж… Печально… А так смотрелось красиво! Я кстати себе также пока не могу подобрать подходящий вариант для отображения подсветки синтаксиса…

      3. Александр Васильев (28.11.2014)



        Да верну ещё такое же отображение. Но после оптимизации темы. Не пошло с моей темой…

  2. Диана (28.11.2014)



    Вот я вообще боюсь лазить в стилях.) Один раз скопировала код, а он такой получился невкусный, прозрачный, линии еле еле видно. И то я очкарик.)) Глаза напрягались. Плюнула удалила, поставила другой код и все норма, заработало.))

  3. Оксана Адменко (08.12.2014)



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

    1. Александр Васильев (08.12.2014)



      Извините, но плагинами никогда не пользовался для такого функционала. Здесь помочь ничем не могу. Может другие читатели что знают?

      1. Оксана Адменко (08.12.2014)



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

      2. Александр Васильев (09.12.2014)



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

      3. Юрий Йосифович (09.12.2014)



        Не думаю, что кто-то знает, как создать форму обратной связи плагином — так как способ один — установить код в определенное место. Думаю, что другими методами никто не пользуется.

    2. Юрий Йосифович (09.12.2014)



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

      1. Оксана Адменко (09.12.2014)



        Ну что же, придется засучивать рукава и браться за страшное для меня дело. Хотя я и знакома с html, но страшно испортить что то и не вернуть на прежнее место как было. Ой, лучше я пока так побуду, у меня не так уж много читателей, чтоб прям сейчас делать форму… (хотя не приятно оставлять на потом… это равносильно -не сделаю никогда)

  4. fktrctq (13.04.2015)



    не работает форма! письма отправляет а они не приходят!

    1. Александр Васильев (15.04.2015)



      Форма работает безотказно :cool:

      Возможно Вы что-то сделали не так. Попробуйте внимательно проделать все шаги заново. Если и тогда уж не будет работать, значит помочь на словах нечем. Нужно смотреть структуру Вашей темы!

  5. Mir-On (28.02.2016)



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

    Ребят, попробуйте сервис от pozvonim.com
    Простая установка на любую cms, хорошая поддержка. Не сочтите за рекламу, ссылка не реферальная, просто можно взять и попробовать на тестовый период. А потом уже решить подходит или нет. Цены как у всех, можно пакеты брать, а можно количество клиентов или минут. Лидогенерация очень высокая, а окупаемость быстрая. Может кому пригодиться мой комментарий

    1. Александр Васильев (28.02.2016)



      Для блога это вряд ли подойдёт, я считаю…

Добавить комментарий

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

:arrow: 
:biggrin: 
:confused: 
:cool: 
:cry: 
:eek: 
:evil: 
:exclaim: 
:idea: 
:lol: 
:mad: 
:mrgreen: 
:neutral: 
:question: 
:razz: 
:redface: 
:rolleyes: 
:sad: 
:) 
:surprised: 
:twisted: