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

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

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

Вам не надо ничего будет прописывать на странице. А достаточно просто закинуть 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.

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

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

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