Привет всем! В этом посте я расскажу, как создать форму обратной связи 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.
Находим в админке WordPress страницу настроек плагина Contact Form 7. Нажмите на кнопку «Добавить новую»:
По умолчанию Вы увидите следующий вариант контактной формы:
Но здесь не хватает поля для капчи, чтобы письма Вам не посылал спам-робот. Добавим ее вручную. Для этого выберите из выпадающего списка — капчу.
Здесь можно ничего не менять. Нужно добавить к будущей контактной форме, код капчи.
После добавления кодов капчи, получится следующее:
Осталось вставить код вызова контактной формы на нужной странице. Скопируйте его в буфер обмена. Создайте новую страницу и назовите ее, например, «Контакты». Добавьте в текстовое поле, скопированный ранее код. Опубликуйте контактную страницу и проверьте, что получилось. Можете сами себе отправить тестовое письмо.
Вот так легко и просто создать форму обратной связи на своем блоге WordPress. В этом Вам поможет плагин для создания контактной формы Contact Form 7.
Если, у Вас что-то не получилось, посмотрите этот видеоролик, в котором рассказывается, как создать контактную форму на блоге.