Wordpress
Опубликовано в Zaandr

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


Почти на каждом блоге есть страница под названием контакты. На этой странице обычно размещены координаты электропочты, icq, скайпа. Гораздо приятнее увидеть на этой странице форму контактов, написал и забыл без надобности копировать адрес, который частенько изображён на картинке. Для создания форм есть масса плагинов, но использовать плагин, чтобы создать одну форму не всегда оптимально. Сегодня мы поговорим о том, как сделать форму контактов без использования плагинов в wordpress.

Для этого нам придется провести некоторые изыскания с файлами темы. Итак поехали.
Наша форма контактов будет использовать аякс для отправки данных и сообщениях об ошибке. Для простоты работы мы будем использовать библиотеку query.
Сначала копируем в вашу тему содержимое архива.
Далее открываем файл sendmail.php и вписываем свой email в 3 строчку.
Открываем файл header.php вашей темы и вставляем между тегами следующий код (нужно проверить не содержит ли тема подключаемые файлы, если содержит — повторно подключать не нужно)

<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.form.js"></script>
<!-- ajax форма обратной связи -->
<script type="text/javascript">
 $(document).ready(function(){
	  $('#contact').ajaxForm(function(data) {
		 if (data==1){
			 $('#success').fadeIn("slow");
			 $('#bademail').fadeOut("slow");
			 $('#badserver').fadeOut("slow");
			 $('#contact').resetForm();
			 }
		 else if (data==2){
				 $('#badserver').fadeIn("slow");
			  }
		 else if (data==3)
			{
			 $('#bademail').fadeIn("slow");
			}
	});
});
</script>

Теперь нам нужно создать новый php файл, например, под названием contact.php.
Сначала мы копируем в него все содержимое файла page.php. Теперь нам нужно вырезать из кода часть начинающуюся с

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

и заканчивающуюся

<?php endif; ?>

Теперь на место удалённого кода копируем код представленный ниже.

<p id="success" class="successmsg" style="display:none;">Ваше сообщение отправлено! Спасибо!</p>
<p id="bademail" class="errormsg" style="display:none;">Пожалуйста, введите ваше имя, сообщение и адрес электронной почты.</p>
<p id="badserver" class="errormsg" style="display:none;">Сообщение не отправлено. Попробуйте еще раз позже.</p>
 
<form id="contact" action="<?php bloginfo('template_url'); ?>/sendmail.php" method="post">
<label for="name">Имя: *</label>
<input type="text" id="nameinput" name="name" value=""/>
<label for="email">Электропочта: *</label>
<input type="text" id="emailinput" name="email" value=""/>
<label for="comment">Сообщение: *</label>
<textarea cols="20" rows="7" id="commentinput" name="comment"></textarea><br />
<input type="submit" id="submitinput" name="submit" class="submit" value=""/>

После, мы в самый верх файла добавляем строчки

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

Сохраняем изменения. Нам осталось в панели администратора создать новую страницу и указать в настройках шаблона пункт Contact. Теперь у нас на сайте есть прекрасная форма обратной связи. Для проверки её работоспособности, попробуйте отправить письмо себе.

Статья написана по мотивам кода от темы Designpile, авторы темы site5.com


Показать комментарии
  • Дмитрий

    В данном коде, что привлекает, так это то, что можно было написать любой вид обратной связи, так как их разнообразное множество, но что я предпочитаю и что здесь описано — это использование jquery.form, а значит сделано так, что нет перезагрузки страницы, а это очень важно, по крайней мере для меня, так как на некоторых ресурсах траффик не будет переполнять допустимые нормы.

  • Почему не доходят сообщения?

  • Павел

    Спасибо! Буду пробовать! Стандартный плагин формы обратной связи почему-то через раз присылает сообщения — надеюсь такая форма будет стабильней))

  • Bobby