Привет всем! В этом посте я расскажу, как создать форму обратной связи wordpress блога без плагина. Наверное, те у кого есть страница обратной связи на сайте, использовали для ее создания плагин Contact Form 7. Долгое время и у меня стоял этот плагин. С недавних пор, я решила заняться ускорением своего блога, заменяю какие возможно плагины кодами. Прошлый мой пост был посвящен созданию карты сайта без плагина. Кто не читал статью, прочтите. Принцип создания новой страницы-шаблона, который описан там, я буду сегодня использовать. Но так детально уже не буду разжевывать.

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

Как и в случае, когда мы создавали шаблон страницы карты сайта, так и сейчас мы будем редактировать файл page.php. Заходите на хостинг и добирайтесь к папке с темой, последовательно открывая следующие папки public_html/wp-content/themes/

Скопированный на компьютер файл page.php переименуйте, оставив расширение файла php. Например, файл можно назвать formacontact.php. В этот файл мы добавим скрипт формы обратной связи.

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

<?php

/*

Template Name: PageContact

*/

?>

 

<?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 nnE-mail: $email nnТема: $theme nnСообщение: $comments";

        $headers = 'From: '.$name.' <'.$email.'>' . "rn" . 'Reply-To: ' . $email;

        wp_mail($emailTo, $subject, $body, $headers);

        $emailSent = true;

    }

 

} ?>

Чтобы на странице отобразилась сама форма, после функции <?php the_content (); ?> добавим еще один код:

	<div id="form_contact">

                           <?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_right_colum">

                                            <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_left_colum">

                                            <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>

На этом создание формы обратной связи в файле formacontact.php завершено. Сохраняйте в нем изменения и копируйте на хостинг в папку с темой.

Чтобы форма обратной связи без плагина в wordpress корректно отображалась, нужно добавить в файл стилей оформление полей данной формы. Откройте файл style.css и в самый конец вставьте следующий код:

/*-------------------------------- контактная форма --------------------------------*/

 

#form_contact {

        position: relative;

        width: 100%;

	margin-top: 20px;

}

 

.contact_right_colum {

        float: right;

        width: 145px;

}

 

.contact_left_colum {

        float: left;

	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: 120px;

        height: 30px;

        line-height: 30px;

	padding: 0 0 0 31px;

        margin: 0 0 20px;

        background: #F7F8FA url(images/name.png) no-repeat 3px 3px;

        border: none;

        border-radius: 5px;

        box-shadow: inset 0.5px 0.5px 3px #B7BDCB;

        font: normal 13px Arial, sans-serif;

        color: #151515;

}

.contact_email input[type="text"] { background: #F7F8FA url(images/email.png) no-repeat 3px 2px; }

.contact_theme input[type="text"] { background: #F7F8FA url(images/tema.png) no-repeat 2px 3px; }

 

.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: #F7F8FA;

        border: none;

        border-radius: 5px;

        box-shadow: inset 0.5px 0.5px 3px #B7BDCB;

	font: normal 13px Arial, sans-serif;

        color: #151515;

}

 

.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 #B7BDCB;

}

 

.contact_submit {

	float: center;

	width: 220px;

	padding-top: 7px;

	padding-bottom: 4px;

	margin: 0 0 15px;

	background: #ADF1AD;

        border: none;

        border-radius: 4px;

	text-align: center;

	font-size: 16px;

	color: #4C4C4C;

	transition: background-color ease-in-out .15s;

	cursor: pointer;

}

.contact_submit:hover { background: #7AF07A; text-transform: uppercase; width: 240px;}

 

.contact_message {

        width: 100%;

        height: 22px;

        padding: 70px 0;

        text-align: center;

        font: normal 22px Arial, sans-serif;

        color: #1F1F1F;

}

 

.errors, .errorss {

	position: absolute;

	bottom: 2px;

	left: 10px;

	font: normal 12px Arial, sans-serif;

        color: red;

	z-index: 999;

}

На свой вкус Вы можете изменить цвет кнопки отправить. Найдите стили contact_submit, строчка background: #ADF1AD; отвечает за цвет фона. Ниже свойство contact_submit:hover задает фон при наведении на кнопку.

Чуть не забыла. Можно добавить иконки к полям имя, имейл и тема. Скачайте вот этот архив. Все три картинки необходимо загрузить в images, которая находится в папке темы.

Последний шаг — создаем страницу контактов или редактируем текущую. В правой колонке найдите виджет «Атрибуты» и выберите в нем название только что созданной страницы контактов.

Как видите, получилась простая форма обратной связи для сайта без использования плагина. Капча тоже не нужна, т.к. в сам скрипт прописан таким образом, что не пропускает спам. Создав такую форму, Вы удалите еще два плагина contact form 7 и плагин, который создавал капчу к нему.

Плагин Contact Form 7

Дальше речь пойдет о том, как создать контактную форму для обратной связи. И в этом Вам поможет плагин Contact Form 7, с которым можно сгенерировать требуемую контактную форму.

Сначала скачайте и установите плагин контактной формы Contact Form 7. Установить его можно и непосредственно из панели администратора, найдя плагин по названию.

После успешной установки и активации, перейдем к настройкам контактной формы Contact Form 7.

Находим в админке WordPress страницу настроек плагина Contact Form 7. Нажмите на кнопку «Добавить новую»:

По умолчанию Вы увидите следующий вариант контактной формы:

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

Здесь можно ничего не менять. Нужно добавить к будущей контактной форме, код капчи.

После добавления кодов капчи, получится следующее:

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

Вот так легко и просто создать форму обратной связи на своем блоге WordPress. В этом Вам поможет плагин для создания контактной формы Contact Form 7.

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