Контактная форма на Wordpress без плагинов / Ravesli

Сегодня поговорим о создании контактной формы на WordPress без плагинов. Контактная форма улучшает юзабилити сайта и позволяет вашим читателям связаться с вами или задать вам вопрос.

Оглавление:

Создание контактной формы
Создание отдельной страницы для контактной формы

Создание контактной формы

Весь процесс создания контактной формы делится на:

создание html-формы;

создание и подключение js-скрипта;

создание и подключение файла-обработчика mail.php;

оформление стилей.

Я предлагаю вам уже готовый код, в котором вы сможете легко разобраться, изменить внешний вид или добавить что-нибудь свое по необходимости. Всё просто, если читать внимательно и не торопиться.

Шаг №1: Создание html-формы

Выбираете любое место в файле (в page.php или любом другом файле), где хотите разместить форму (у меня после строки <?php the_content(); ?>) и вставляете следующий код:

<form id="contact" action="<?php bloginfo('template_url'); ?>mail.php" method="post"> // указываем путь к второму файлу

<div id="note"></div> // создаем пустой блок, где будет выводиться уведомление, что сообщение отправлено
<div id="fields"> // блок с полями формы
<p><input type="text" name="name" class="input" placeholder="Имя" required></p>
<p><input type="email" name="email" class="input" placeholder="E-mail" required></p>
<p><input type="text" name="sub" class="input" placeholder="Тема" required></p>
<p><textarea name="message" cols="1" rows="10" class="input" style="width:98%" placeholder="Введите текст сообщения" required></textarea></p>
<p><input id="submitinput" class="submit" value="Отправить" type="submit" /></p>

</div>

</form>

<form id="contact" action="<?php bloginfo('template_url'); ?>mail.php" method="post"> // указываем путь к второму файлу

<div id="note"></div> // создаем пустой блок, где будет выводиться уведомление, что сообщение отправлено

<div id="fields"> // блок с полями формы

</div>

</form>

Здесь мы создали простую форму. Атрибут required означает, что поле является обязательным для заполнения.

Примечание: Читайте внимательно комментарии к коду, всё важное я подписываю.

Шаг №2: Создание и подключение js-скрипта

Чтобы сообщение отправлялось без перезагрузки страницы, используется технология AJAX (сокр. от «Asynchronous Javascript and XML»). Для её применения нужно подключить библиотеку Jquery. В файле header.php перед закрывающим тегом </head> добавляем следующую строку:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

1	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Дальше нужно вставить сам скрипт. Сразу после строки <?php get_header(); ?> или после тега </head> в том файле, в котором создавали форму, вставляем следующий код:

<script>
jQuery(document).ready(function($) {
	$("#contact").submit(function() {
		var str = $(this).serialize();
		$.ajax({
			type: "POST",
			url: "<?php bloginfo('template_url'); ?>/mail.php", // здесь указываем путь к второму файлу
			data: str,
			success: function(msg) {
				if(msg == 'OK') {
					result = '<div class="ok">Сообщение отправлено</div>'; // текст, если сообщение отправлено
					$("#fields").show();
				}
				else {result = msg;}
				$('#note').html(result);
				 $('.input', '#contact') // выполняем очистку полей после отправки сообщения
 .not(':button, :submit, :reset, :hidden')
 .val('')			 
			}
		});
		return false;
	});
});
</script>

jQuery(document).ready(function($) {

$("#contact").submit(function() {

var str = $(this).serialize();

$.ajax({

type: "POST",

url: "<?php bloginfo('template_url'); ?>/mail.php", // здесь указываем путь к второму файлу

data: str,

success: function(msg) {

if(msg == 'OK') {

result = '<div class="ok">Сообщение отправлено</div>'; // текст, если сообщение отправлено

$("#fields").show();

}

else {result = msg;}

$('#note').html(result);

$('.input', '#contact') // выполняем очистку полей после отправки сообщения

.not(':button, :submit, :reset, :hidden')

.val('')

}

});

return false;

});

</script>

Шаг №3: Создание и подключение файла-обработчика mail.php

Теперь нужно создать файл обработчика, чтобы всё заработало, и сообщения приходили к нам на почту. Для этого создаем новый файл, вставляем следующий код:

<?php
$post = (!empty($_POST)) ? true : false;
if($post) {
	$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 = "moiadress@gmail.com"; // ВНИМАНИЕ! Здесь указываем адрес электронной почты, на которую будут приходить письма
		$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 'OK';}
	}
	else {echo '<div class="err">'.$error.'</div>';}
}
?>

<?php

$post = (!empty($_POST)) ? true : false;

if($post) {

$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 = "moiadress@gmail.com"; // ВНИМАНИЕ! Здесь указываем адрес электронной почты, на которую будут приходить письма

$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 'OK';}

}

else {echo '<div class="err">'.$error.'</div>';}

}

Примечание: Обратите внимание на строку №14 — там нужно указать свой электронный адрес.

Сохраняем как mail.php и закидываем в корневую папку шаблона (в WordPress это: wp-content > themes > название_вашего_шаблона) к файлу с формой.

Шаг №4: Оформление стилей

Последний штрих! Сделаем нашу форму красивой и лаконичной, добавив немного стилей в style.css:

#contact label {
 display:block;
 padding:5px 0;
}

#contact input, #contact textarea {
 display: block;
 font-family: inherit;
 font-size: 15px;
 color: inherit;
 padding: 14px;
 border: 1px solid #E6E6E6;
 margin-bottom: 30px;
}

#contact textarea {
 width: 70% !important;
 height: 100px !important;
 min-width: 230px;
}

.input {
 min-width: 230px;
}

#contact input.submit {
 background: #00B5B5;
 color: #FFFFFF !important;
 cursor: pointer;
 font: inherit;
 font-size: 16px;
 font-weight: 600;
 display: inline-block;
 padding: 10px 12px;
 text-decoration: none;
 border: none;
 margin: 10px 0 50px;
 -webkit-transition: background 0.2s ease;
 -moz-transition: background 0.2s ease;
 -o-transition: background 0.2s ease;
 transition: background 0.2s ease;
}

.ok {
 background: #00B5B5;
 margin-bottom: 15px;
 padding: 10px;
 color: white;
 text-align: center;
}

#contact label {

display:block;

padding:5px 0;

}

#contact input, #contact textarea {

display: block;

font-family: inherit;

font-size: 15px;

color: inherit;

padding: 14px;

border: 1px solid #E6E6E6;

margin-bottom: 30px;

}

#contact textarea {

width: 70% !important;

height: 100px !important;

min-width: 230px;

}

.input {

min-width: 230px;

}

#contact input.submit {

background: #00B5B5;

color: #FFFFFF !important;

cursor: pointer;

font: inherit;

font-size: 16px;

font-weight: 600;

display: inline-block;

padding: 10px 12px;

text-decoration: none;

border: none;

margin: 10px 0 50px;

-webkit-transition: background 0.2s ease;

-moz-transition: background 0.2s ease;

-o-transition: background 0.2s ease;

transition: background 0.2s ease;

}

.ok {

background: #00B5B5;

margin-bottom: 15px;

padding: 10px;

color: white;

text-align: center;

}

Класс .ok отвечает за оформление блока с текстом "Сообщение отправлено".

Теперь наша форма полностью готова к использованию. Оформление можете изменить под себя.

Создание отдельной страницы для контактной формы

Этот пункт для тех, кто хочет создать форму на отдельной странице! Чтобы создать отдельную страницу для контактной формы вам нужно зайти в админку WordPress > Внешний вид > Редактор. Справа ищите «Шаблон страницы» (page.php). Открываете этот файл, копируете содержимое. Создаете на своем компьютере новый текстовый файл и вставляете всё скопированное туда. В самом верху добавляете следующие строки:

<?php
/*
Template Name: Contact
*/
?>

<?php

Template Name: Contact

Сохраняете этот файл под именем contact.php, а дальше всё, как было указано выше в этой статье (вставляете html-форму, подключаете js-скрипт, создаете файл mail.php, задаете стили).

Эти два файла (contact.php и mail.php) нужно будет закинуть в корневую папку вашего шаблона (wp-content > themes > название_вашего_шаблона). После этого заходите в админку WordPress > Страницы > Добавить новую. И в атрибутах страницы выбираете шаблон «Contact», дальше «Опубликовать», и всё!

Оценить статью: