Форма обратной связи без плагинов и спама

Если вы ищите классную форму обратной связи, то вы её нашли!

Я сделал её простой и понятной.

Вам не надо ничего будет прописывать на странице. А достаточно просто закинуть 2 файла в папку со своей темой. И всё!

При желании вы сможете поменять в стилях цвет кнопки, цвет самой формы, шрифт или добавить иконки в поля e-mail и имя.

Нажмите, чтобы скачать файл.

В архиве лежать 2 файла contact.php и mail.php.

Файл contact.php содержит в себе следующий код:

<?php
/*
Template Name: Contact
*/
?>
<?php get_header(); ?>
<style>
form#contact  {
border:1px solid #e5e5e5;
padding:10px;
background:#fbfbfb;
border-radius:5px;
}
#contact label {
font-size: 14px;
}
#contact input:required:valid {
box-shadow: 0 0 3px #BCEF89;
border-color: #BCEF89!important;
background: #fff url(images/valid.png) no-repeat 98% center;
}
#contact textarea:required:valid {
box-shadow: 0 0 3px #BCEF89;
border-color: #BCEF89!important;
}
#contact input:focus:invalid {
box-shadow: 0 0 3px #FFDF97;
border-color: #FFDF97!important;
background: #fff url(images/invalid.png) no-repeat 98% center;
}
#contact textarea:focus:invalid {
box-shadow: 0 0 3px #FFDF97;
border-color: #FFDF97!important;
}
.err {
border: 1px solid #ff8c00;
padding: 10px;
background: #FFDF97;
text-align: left;
border-radius: 3px;
}
.ok {
border: 1px #BCEF89 solid;
margin-bottom: 15px;
padding: 10px;
background: #f5f9fd;
text-align: center;
border-radius: 3px;
}
#author, #email, #url {
width: 30%;
padding: 5px;
border-radius: 5px;
border: 1px solid #e5e5e5;
}
#comment {
padding: 5px;
border-radius: 5px;
border: 1px solid #e5e5e5;
overflow: auto;
}
#submit {
font-weight: 400;
background: #7269a2;
font-size: 15px;
color: #fff;
padding: 10px 50px;
border: none;
cursor: pointer;
}
</style>
<h1><?php the_title(); ?></h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post">
<?php the_content(__('<p class="serif">Read the rest of this page &raquo;</p>')); ?>
<?php wp_link_pages(array('before' => __('<p><strong>Страница:</strong> '), 'after' => '</p>', 'next_or_number' => 'number')); ?>
<form id="contact" action="/wp-content/themes/ВАША ТЕМА/mail.php" method="post">
<div id="fields">
<p><label for="author">Ваше имя (обязательно)</label><input type="text" name="name" id="author" style="width:97%" placeholder="" required></p>
<p><label for="email">Ваш E-mail (обязательно)</label><input type="email" name="email" id="email" style="width:97%" placeholder="" required></p>
<p><label for="url">Тема письма</label><input type="text" name="sub" id="url" style="width:97%" placeholder="" required></p>
<p><textarea name="message" cols="1" rows="10" id="comment" style="width:97%" placeholder="Введите сюда текст сообщения" required></textarea></p>
<p><button type="submit" id="submit" class="go">Отправить сообщение</button></p>
</div>
</form>
<h5><?php edit_post_link(__('Edit'), '<p>', '</p>'); ?></h5>
</div> <!-- /end .post -->
<?php endwhile; endif; ?>
<?php get_footer(); ?>

Вам нужно будет в 84 строчке кода указать название той темы, которую вы используете.

<form id="contact" action="/wp-content/themes/ВАША ТЕМА/mail.php" method="post">

__

Файл mail.php содержит в себе следующий код:

<?php
$post = (!empty($_POST)) ? true : false;
if($post) {
$email = $_POST['email'];
$name = $_POST['name'];
$email = $_POST['email'];
$sub = $_POST["sub"];
$message = $_POST['message'];
$error = '';
if(!$name) {$error .= 'Укажите свое имя. ';}
if(!$email) {$error .= 'Укажите электронную почту. ';}
if(!$sub) {$error .= 'Укажите тему обращения. ';}
if(!$message || strlen($message) < 1) {$error .= 'Введите сообщение. ';}
if(!$error) {
$address = "Ваш E-mail";
$mes = "Имя: ".$name."\n\nТема: " .$sub."\n\nСообщение: ".$message."\n\n";
$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");
if($send) {echo "Ваше сообщение успешно отправлено! <a href='https://ВАШ САЙТ/'> Вернуться на страницу </a>";}
}
else {echo '<div class="err">'.$error.'</div>';}
}
?>

В строчке 15 укажите свой (e-mail), а вот в строчке 18 свой сайт.

Затем просто закиньте эти 2 файла в папку со своей темой.

Создайте новую страницу на своём сайте и выберите шаблон contact.

Вот такая вот форма у нас получилась! Можете зайти на мою страничку контакты.

Внимание! В зависимости от вашей темы форма связи может немного меняться. В стилях вы можете настроить как вам нужно.

Смотреть все статьи »