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

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

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

Все же решение данной задачи было найдено и вот оно:

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

Как Вам? Думаю то, что нужно!  И сейчас я расскажу как вы можете установить такую форму на свой блог WordPress.

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

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

     1. Зайдите на свой хостинг в папку wp-content/themes/ваша_тема и скачайте к себе на компьютер файл page.php. Сделали? Теперь переименуйте его, например в contacts.php. Далее откройте его в редакторе, например Notepad++ или любом другом, и мы будем его редактировать.

     2.  Для начала удалите код  <?php get_header (); ?> и на его место вставьте первую часть кода, приведенную ниже:

<?php

/*

Template Name: Contacts

*/

?>

<?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 (); ?> и прямо под ней вставляем вторую часть кода:

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

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

     3. Придадим нашей форме стили. Добавьте в файл style.css темы вашего блога (wp-content/themes/ваша_тема/style.css) следующий код:

/*——Contacts ——*/

#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: # ff9933; /*цвет кнопки*/

    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: #33cc33; /*цвет кнопки при наведении*/}

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

}

Для отображения картинок в полях ввода (имя, адрес e-mail, тема) выберите или создайте свои с размерами 32x32px и загрузите их в папку «images» вашей темы (wp-content/themes/ваша_тема/images). Назовите картинки соответственно nameid.png, mailid.png, urlid.png или измените в коде стилей (приведенном выше) на свои.

     4. Осталось добавить форму на свой сайт. Для этого создайте новую страницу с названием «Контакты» или «Обратная связь» (может как-то еще) и для этой странице в виджете «Атрибуты страницы» выбираем шаблон «Сontacts». Сохраняем страницу и все изменения.

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

Форма проверена и отлично работает на одном из моих сайтов. Да, если Вас не устроит внешний вид, то вы можете настроить свои стили CSS и придать форме вид по своему вкусу. Или только поменять цвет кнопки-в коде добавлены комментарии.

На этом у меня все. Теперь вы знаете как установить на свой блог легкую и красивую форму обратной связи. А если возникнут вопросы, то пишите в комментариях к данной статье, да и просто оставьте свой отзыв или свое мнение.

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

С уважением, Андрей Юрченко.