Множество существующих плагинов wordpress позволяют встраивать форму обратной связи на ваш блог, но использование плагинов – не обязательное условие. В сегодняшней статье, вы узнаете как создать встроенную контактную форму, с помощью собственной WordPress-темы.
Пример такой формы можно найти на сайте PHP Snippets, там она выглядит следующим образом:
Шаг 1: Создание шаблона
Сначала, нам понадобится создать шаблон страницы. Для этого, скопируйте содержимое файла page.php в новый файл, и сохраните его под именем page-contact.php.
<?php /* Template Name: Contact */ ?>
В результате наш файл page-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: Создание формы
Теперь, создадим простую форму обратной связи. Просто вставьте приведенный код внутри блока entry-content.
<form action="<?php the_permalink(); ?>" id="contactForm" method="post"> <ul> <li> <label for="contactName">Name:</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">Message:</label> <textarea name="comments" id="commentsText" rows="20" cols="30"></textarea> </li> <li> <button type="submit">Send email</button> </li> </ul> <input type="hidden" name="submitted" id="submitted" value="true" /> </form>
Код формы очень простой, и не нуждается в разъяснениях. Обратите внимания на тэг input type=”hidden”, добавленный в строке 19 – позже, он будет использоваться для проверки была ли отправлена форма.
Шаг 3: Обработка данных и ошибок
Наша форма выглядит прекрасно, но пока что является бесполезной, поскольку не отправляет сообщения. Прежде всего, перед отправкой сообщения, нам нужно проверить была ли отправлена форма, и правильно ли заполнены все поля.
Если поля заполнены правильно, мы получаем почтовый адрес администратора блога и отправляем ему сообщение. Если поля заполнены частично или с ошибками, сообщение не отправляется, и пользователю выводится список ошибок.
<?php if(isset($_POST['submitted'])) { if(trim($_POST['contactName']) === '') { $nameError = 'Please enter your name.'; $hasError = true; } else { $name = trim($_POST['contactName']); }
if(trim($_POST['email']) === '') { $emailError = 'Please enter your email address.'; $hasError = true; } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) { $emailError = 'You entered an invalid email address.'; $hasError = true; } else { $email = trim($_POST['email']); }
if(trim($_POST['comments']) === '') { $commentError = 'Please enter a message.'; $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 /* Template Name: Contact */ ?>
<?php if(isset($_POST['submitted'])) { if(trim($_POST['contactName']) === '') { $nameError = 'Please enter your name.'; $hasError = true; } else { $name = trim($_POST['contactName']); }
if(trim($_POST['email']) === '') { $emailError = 'Please enter your email address.'; $hasError = true; } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) { $emailError = 'You entered an invalid email address.'; $hasError = true; } else { $email = trim($_POST['email']); }
if(trim($_POST['comments']) === '') { $commentError = 'Please enter a message.'; $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>Thanks, your email was sent successfully.</p> </div> <?php } else { ?> <?php the_content(); ?> <?php if(isset($hasError) || isset($captchaError)) { ?> <p class="error">Sorry, an error occured.<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 Validation. Это отличный плагин, позволяющий легко и быстро проверить правильное заполнение полей.
Cкачайте плагин и поместите его в папку с вашей темой, внутри папки /js. После этого, вставьте следующие строки в новый файл:
$(document).ready(function(){ $("#contactForm").validate(); });
Сохраните файл под именем verif.js в папке /js.
Теперь, нам нужно подключить ява-скрипт файлы в нашу тему. Откройте файл 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 }?>
После этого, ваша форма будет проверяться плагином на клиентской стороне. Плагин работает довольно просто – выбирает элементы формы, имеющий css-класс required и проверяет их на корректное заполнение. В случае ошибки, отображается сообщение. Надеюсь, вам понравится ваша новая WordPress-форма.
Перевод статьи “How to create a built-in contact form for your WordPress theme”, автор Jean-Baptiste Jung
