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

Опубликовано: 6 Март 2012Автор ratemir

Форма обратной связи WordPress без плагиновСуществует множество плагинов для обратной связи в WordPress, одним из которых я пользовался был Contact Form 7. Вот пришло время и я решил избавиться от очередного плагина. Встаёт вопрос, что это нам даст. Главным преимуществом разумеется станет меньшее количество запросов к серверу и соответственно снижается нагрузка.

План наших действий заключается в следующем:
1. Создаём файл в нашем шаблоне WordPress где прописываем HTML и PHP код.
2. Добавляем немного jQuery для валидации формы.
3. Через админку активируем наш код.

Шаг 1

Создаём файл и называем его, например, contact-form.php и кладём в шаблон сайта. В зависимости от дизайна Вашего ресурса, в contact-form.php можно скопировать данные, из уже существующего в любой теме, файла page.php и добавить дополнительный код, указанный ниже:

1. Это php скрипт обработки формы обратной связи, который нужно прописать в самом начале файла.

<?php
/*
Template Name: Contact Form
*/
?>
<?php 
//Если пришёл запрос
if(isset($_POST['submitted'])) {
	//Проверяем на спам
	if(trim($_POST['checking']) !== '') {
	    $captchaErr='Это поле заполнять не надо!';
		$captchaError = true;
	} else {
		//Заполнено ли поле с именем
		if(trim($_POST['contactName']) == '') {
			$nameError = 'Вы не заполнили поле с именем.';
			$hasError = true;
		} else {
			$name = trim($_POST['contactName']);
		}	
		//Осуществляем валидацию email адреса
		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 {
				$comments = stripslashes(trim($_POST['comments']));
		}		
		//Если всё в порядке, отправляем email
		if(!isset($hasError)) {
			$emailTo = 'me@somedomain.com';
			$subject = 'От '.$name;
			$body = "Имя: $name \nEmail: $email \nТема: $subject \nСообщение: $comments";
			$headers = "From: $email \r\n";
			mail($emailTo, $subject, $body, $headers);
			$emailSent = true;
		}
	}
} ?>

2. Далее идёт, формирование структуры формы, при помощи html и php.

<?php get_header(); ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/contact-form.js"></script>
<?php if(isset($emailSent) && $emailSent == true) { ?>
	<div class="thanks">
		<h3>Спасибо, <?=$name;?></h3>
		<p>Ваше сообщение успешно отправлено.</p>
	</div>
<?php } else { ?>
	<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		<?php the_content(); ?>
		<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
			<ul>
				<li><label for="contactName">Ваше имя *</label>
					<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="textinput 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="textinput requiredField email" />
					<?php if($emailError != '') { ?>
						<span class="error"><?=$emailError;?></span>
					<?php } ?>
				</li>
				<li class="textarea"><label for="commentsText">Сообщение *</label>
					<textarea name="comments" id="commentsText" rows="10" cols="30" class="textinput requiredField"><?php if(isset($_POST['comments'])) echo stripslashes($_POST['comments']); ?></textarea>
					<?php if($commentError != '') { ?>
						<span class="error"><?=$commentError;?></span> 
					<?php } ?>
				</li>
				<li><label for="checking">Если Вы хотите отправить мне сообщение, то не заполняйте это поле</label><input type="text" name="checking" id="checking" value="<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>" class="textinput checking" />
				<?php if($captchaErr != '') { ?>
			        <span class="error" style="padding-top:30px;"><?=$captchaErr;?></span>
		        <?php } ?></li>
				<li><input type="hidden" name="submitted" id="submitted" value="true" /><button id="buttons" type="submit">Отправить</button></li>
			</ul>
		</form>
		<p><strong>* Поля обязательны для заполнения</strong></p>
		<?php endwhile; ?>
	<?php endif; ?>
<?php } ?>
<?php get_footer(); ?>

Шаг 2

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

Шаг 3

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

Заключение

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

Метки: Рубрика: Хаки и секреты WordPress


Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

3 комментариев к “Форма обратной связи WordPress без плагинов”

  • slava
    11 Май, 2012, 19:24

    как прикрутить yaCAPTCHA?

  • Роман
    4 Январь, 2013, 23:04

    спасибо за скрип, но непойму стили откуда подставелись?

  • Nadezda Krivohizina
    9 Апрель, 2013, 15:15

    спасибо за статейку

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

Наверх