Привет! На просторах интернета можно найти множество различных форм обратной связи для сайта реализованных при помощи плагинов и без них. Пересмотрел множество статей, перепробовал различные плагины, но так и не нашел той формы, которая устраивала бы меня.
Мне нужна была обыкновенная форма без всяких наворотов и прибамбасов, которую можно установить на сайт 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 и придать форме вид по своему вкусу. Или только поменять цвет кнопки-в коде добавлены комментарии.
На этом у меня все. Теперь вы знаете как установить на свой блог легкую и красивую форму обратной связи. А если возникнут вопросы, то пишите в комментариях к данной статье, да и просто оставьте свой отзыв или свое мнение.
Понравилась статья? Не забудьте поделиться с друзьями, понажимайте на кнопки социальных сетей ниже.
С уважением, Андрей Юрченко.
спасибо автору
у меня пока стоит платин но я хочу от него избавиться пока безрезультатно
Всегда пожалуйста.
В посте все описано по шагам. У меня эта форма стоит(немного расширенная-пришлось дописать код под себя)
Делай все по шагам и все получится, а плагин можно будет убрать.
Желаю успехов.