Очередной блог фрилансера

коротко и полезно о веб-разработке

Menu
  • О чем это все
Menu

WordPress. Создаем встроенную форму обратной связи

30.06.201023.11.2011

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

Пример такой формы можно найти на сайте PHP Snippets, там она выглядит следующим образом:

Шаг 1: Создание шаблона

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

Для того, чтобы WordPress определил наш файл как шаблон, нам нужно добавить комментарий, следующего вида:

<?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: Обработка данных и ошибок

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

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

Вставьте следующий код между комментарием с названием шаблона и функцией get_header().

<?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

25 комментариев

  1. tanatos:
    02.07.2010 в 22:44

    Видно что переводная статья, потому что очень скучно читать.

    Думаю что если хочет человек написать , то и на мыло напишет .

    Ответить
    1. Дмитрий:
      22.07.2010 в 14:14

      Не вижу разницы между написанной и переведённой статьей в плане интереса для чтения. Расскажите?

      Понятно что напишет, но формы обратной связи созданы для того чтобы упростить этот процесс.

      Ответить
  2. Патрик:
    05.07.2010 в 03:46

    извините, не совсем понятно как этот файл подключить в блог. имеется ввиду, где именно в движке идет его подключение.

    Ответить
    1. dreamhelg:
      05.07.2010 в 07:17

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

      Ответить
      1. Патрик:
        12.07.2010 в 07:20

        спасибо большое, заработало =)

        Ответить
  3. cliverd:
    07.07.2010 в 17:03

    Спасибо, все получилось но только с 3 раза.
    Обязательно подпишусь на ваш блог.

    Ответить
  4. Анечка:
    08.07.2010 в 08:02

    А для меня информация оказалась как нельзя кстати….как раз над формой обратной связи голову ломаю)) спасиб, помогли немного))

    Ответить
  5. n.p.:
    09.07.2010 в 12:22

    У меня тоже получилось. Использовал до этого подобную форму связи, но у меня она криво отображалась на страничке.

    Ответить
  6. Андрей:
    11.07.2010 в 12:29

    Спасибо большое, иду пробовать. Судя по отзывам — должно получиться)

    Ответить
  7. Marga:
    17.07.2010 в 02:12

    Информация действительно стоящая . А по поводу того что статья скучно читается , так по мне вся техническая литература пишется не для развлечения .
    Огромное Вам спасибо много интересного подчерпнул из вашего блога.

    Ответить
  8. dumor:
    24.07.2010 в 17:27

    Спасибо! Еще бы порекомендовали нормальный плагин для гостевой книги, был бы Вам благодарен.

    Ответить
  9. Алексей:
    27.07.2010 в 07:27

    Да ладно вам. Нормальная инфа и достаточно нормально описано. Как смог автор так и перевел. Он же для людей старается, а вы еще и накатываете…
    Для вордпреса и так полным полно плагинов, но не на каждый можно найти такое подробное описание.

    Ответить
  10. Вячеслав:
    02.03.2011 в 17:36

    Спасибо, помогло )

    Ответить
  11. carerakjan:
    17.04.2011 в 17:51

    форма отличная и легкая в понимании, единственное но — защита от спам ботов… у себя я прикрутил, сделайте это в примере и тогда все будет супер..)

    Ответить
  12. axel:
    20.05.2011 в 11:13

    не все таки, wordpress не самая удобная система для разработки))) я б даже сказал худшая…
    долго и слишком много кода нужна писать для создания простых вещей

    Ответить
    1. Юрий:
      05.06.2011 в 19:39

      Можно и проще я, например, создал страницу КОНТАКТЫ и там просто в html создал простую форму и в папку сайта добавил коротенький PHP-скрипт send, причём это работает на любых сайтах.
      У меня сайты и на вордпрессе и в html.

      Ответить
  13. Мария Новицкая:
    02.06.2011 в 15:31

    Здравствуйте! Подскажите, пожалуйста, почему сообщения из этой формы приходят в неверной кодировке? Кириллические символы отображаются абракадаброй, английские нормально. Кодировка сайта utf8.

    Ответить
  14. Артем:
    14.06.2011 в 14:27

    И спасибо за пост.. Поставил себе на сайте такую ;)

    Ответить
  15. Иннер Дизайн:
    19.08.2011 в 10:42

    Its work! Я обескуражен!

    Ответить
    1. Ирина:
      13.11.2011 в 14:28

      Где найти новый файл, чтобы вставить скопированный page.php?

      Ответить
  16. anadikt:
    21.08.2011 в 23:27

    Смотрю народу не нравится то что статья переведена!!! А мне как бы пофиг… самое главное суть статьи уловить!! Автору спасибо за труд в переводе!!!!

    Ответить
  17. вера:
    28.01.2012 в 14:55

    А для меня это очень нужная информация и своевременная! и понятная! Поняла разницу между проверкой на стороне клиента и сервера — как пелена упала. Я благодарю автора этого блога, по-моему был еще такой красивенький синенький у dreamhelg, туда я часто захожу — отличный блог

    Ответить
  18. Artem:
    09.09.2012 в 21:06

    Теперь можно обойтись и без Contact Form 7!!!

    Ответить
  19. ivan90:
    09.06.2013 в 20:01

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

    Ответить
  20. Владимир:
    31.10.2015 в 12:59

    Очень интересная форма. Ещёб добавить отправку файла…..

    Ответить

Добавить комментарий Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Об авторе

avatar

Ольга Фомина

Senior Frontend Developer
Почтовые технологии
telegram youtube instagram vkontakte

Рубрики

  • angular
  • JavaScript
  • nodejs
  • svg
  • wordpress
  • верстка
  • изучаем Jquery
  • общая
  • переводы
  • плагины Jquery
  • юнит-тесты
© 2023 Очередной блог фрилансера | Powered by Superbs Personal Blog theme