Создаём встроенную контактную форму для темы WordPress

Можно найти много плагинов для WordPress, которые могут добавить контактную форму к вашему блогу. Но использовать плагин совсем не обязательно. В данном уроке демонстрируется, как можно создать встроенную контактную форму для темы WordPress.

Контактная форма WordPress

Шаг 1: Создаём шаблон страницы

Нужно создать шаблон страницы. Для этого скопируйте код page.php в новый файл с именем contact.php.

Нужно добавить комментарий в начало файла contact.php, чтобы WordPress обрабатывал данный файл как шаблон страницы. Код:

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

Ваш файл contact.php должен выглядеть так:

<?php
/*
Template Name: Contact
*/
?>
<?php get_header() ?>
<div id="container">
<div id="content">
<?php the_post() ?>
<div id="post-<?php the_ID() ?>" class="post">
<div class="entry-content">
</div><!-- .entry-content ->
</div><!-- .post-->
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar() ?>
<?php get_footer() ?>

Шаг 2: Строим форму

Теперь нужно создать простую контактную форму. Просто скопируйте следующий код в div entry-content.

<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
<ul>
<li>
<label for="contactName">Имя:</label>
<input type="text" name="contactName" id="contactName" value="" />
</li>
<li>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" />
</li>
<li>
<label for="commentsText">Сообщение:</label>
<textarea name="comments" id="commentsText" rows="20" cols="30"></textarea>
</li>
<li>
<button type="submit">Отправить email</button>
</li>
</ul>
<input type="hidden" name="submitted" id="submitted" value="true" />
</form>

В HTML коде формы ничего сложного нет. В строке 19 добавлен код input type=”hidden”. Он будет использоваться позже при проверке отправки информации из формы.

Шаг 3: Обработка данных и ошибок

Наша форма выглядит очень хорошо, но она все ещё является ущербной, потому что ничего не может отправить по email. Нужно добавить проверку формы перед отправкой информации, а также организовать проверку правильности заполнения полей ввода.

Если поля ввода заполнены правильно, мы получаем адрес администратора и отправляем ему email. В противном случае email не будет отправлен, а пользователю будет показано сообщение об ошибке.

Скопируйте и вставьте следующий код между объявлением Page Template и функцией get_header():

<?php
if(isset($_POST['submitted'])) {
	if(trim($_POST['contactName']) === '') {
		$nameError = 'Пожалуйста, введите ваше имя.';
		$hasError = true;
	} else {
		$name = trim($_POST['contactName']);
	}

	if(trim($_POST['email']) === '')  {
		$emailError = 'Пожалуйста, введите ваш email адрес.';
		$hasError = true;
	} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
		$emailError = 'Вы ввели неправильный email адрес.';
		$hasError = true;
	} else {
		$email = trim($_POST['email']);
	}

	if(trim($_POST['comments']) === '') {
		$commentError = 'пожалуйста, введите текст сообщения.';
		$hasError = true;
	} else {
		if(function_exists('stripslashes')) {
			$comments = stripslashes(trim($_POST['comments']));
		} else {
			$comments = trim($_POST['comments']);
		}
	}

	if(!isset($hasError)) {
		$emailTo = get_option('tz_email');
		if (!isset($emailTo) || ($emailTo == '') ){
			$emailTo = get_option('admin_email');
		}
		$subject = '[PHP Snippets] From '.$name;
		$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
		$headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

		mail($emailTo, $subject, $body, $headers);
		$emailSent = true;
	}

} ?>

Здесь просто проверяется правильность заполнения полей ввода и отправка формы. Если есть ошибки, например, пустое поле ввода или неправильный адрес email, то возвращается сообщение об ошибке и форма никуда не отправляется.

Теперь нужно вывести сообщение об ошибке ниже соответствующего поля ввода, например, “Пожалуйста, введите ваше имя”. Ниже находится полноценный шаблон страницы формы, который вы можете использовать.

<?php
/*
Template Name: Contact
*/
?>
<?php
if(isset($_POST['submitted'])) {
	if(trim($_POST['contactName']) === '') {
		$nameError = 'Пожалуйста, введите ваше имя.';
		$hasError = true;
	} else {
		$name = trim($_POST['contactName']);
	}

	if(trim($_POST['email']) === '')  {
		$emailError = 'Пожалуйста, введите ваш email адрес.';
		$hasError = true;
	} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
		$emailError = 'Вы ввели неправильный email адрес.';
		$hasError = true;
	} else {
		$email = trim($_POST['email']);
	}

	if(trim($_POST['comments']) === '') {
		$commentError = 'Пожалуйста, введите текст сообщения.';
		$hasError = true;
	} else {
		if(function_exists('stripslashes')) {
			$comments = stripslashes(trim($_POST['comments']));
		} else {
			$comments = trim($_POST['comments']);
		}
	}

	if(!isset($hasError)) {
		$emailTo = get_option('tz_email');
		if (!isset($emailTo) || ($emailTo == '') ){
			$emailTo = get_option('admin_email');
		}
		$subject = '[PHP Snippets] From '.$name;
		$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
		$headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

		mail($emailTo, $subject, $body, $headers);
		$emailSent = true;
	}

} ?>
<?php get_header(); ?>
<div id="container">
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="entry-content">
<?php if(isset($emailSent) && $emailSent == true) { ?>
<div class="thanks">
<p>Спасибо, ваш сообщение успешно отправлено.</p>
</div>
<?php } else { ?>
<?php the_content(); ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>
<p class="error">Извините, произошла ошибка.<p>
<?php } ?>
<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
<ul class="contactform">
<li>
<label for="contactName">Name:</label>
<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="required requiredField" />
<?php if($nameError != '') { ?>
<span class="error"><?=$nameError;?></span>
<?php } ?>
</li>
<li>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="required requiredField email" />
<?php if($emailError != '') { ?>
<span class="error"><?=$emailError;?></span>
<?php } ?>
</li>
<li><label for="commentsText">Message:</label>
<textarea name="comments" id="commentsText" rows="20" cols="30" class="required requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
<?php if($commentError != '') { ?>
<span class="error"><?=$commentError;?></span>
<?php } ?>
</li>
<li>
<input type="submit">Send email</input>
</li>
</ul>
<input type="hidden" name="submitted" id="submitted" value="true" />
</form>
<?php } ?>
</div><!-- .entry-content -->
</div><!-- .post -->
<?php endwhile; endif; ?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Шаг 4: Добавляем верификацию jQuery

Наша форма работает отлично. Но мы можем расширить ее функциональность с помощью проверки инфомации на стороне клиента. Для этого будет использоваться jQuery и плагин jQuery для валидации информации. Данный плагин позволяет проверить правильность заполнения формы, использовать его просто , а работает он быстро.

Сначала нужно скачать плагин и загрузить его в используемую тему WordPress (в директорию /js). А затем скопировать в новый файл следующие строки:

$(document).ready(function(){
	$("#contactForm").validate();
});

Сохранить его как verif.js в директории /js.

Теперь нужно присоединить файлы JavaScript к используемой теме. Откройте файл header.php и скопируйте следующий код между тегами <head> и </head>:

<?php if( is_page('contact') ){ ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/verif.js"></script>
<?php }?>

Ваша форма будет проверяться на стороне клиента с помощью плагина jQuery. Как это работает? Элемент формы, который имеет CSS класс required, принимается плагином и проверяется на правильность заполнения. Если есть ошибки — выдаётся сообщение.
Плагин имеет достаточно обширный функционал, однако его описание выходит за рамки урока.

Надеюсь, что вам понравится новая форма WordPress!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.catswhocode.com/blog/how-to-create-a-built-in-contact-form-for-your-wordpress-theme
Перевел: Сергей Фастунов
Урок создан: 29 Июля 2010
Просмотров: 35422
Правила перепечатки


5 последних уроков рубрики "Wordpress"

^ Наверх ^