Интересно

Обязательно стоит почитать популярные статьи блога.
Создаем vkontakte.ru публичную страницу для своего сайта Пейзажи апокалиптической Москвы Shortlinks | Короткие ссылки в wordpress 3 автоматически через сервиc bit.ly Отключаем рекламу vkontakte.ru Иконки в помощь веб-дизайнеру Добавляем произвольные поля в rss ленту
Блог про дизайн > Wordpress > Форма обратной связи на блоге без использования плагинов

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

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

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

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

<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


Полезно почитать: как и где лучше покупать ссылки для продвижения.

Если вам понравилась статья, вы можете помочь блогу - сделайте ретвит записи или поделитесь ссылкой в сети, с помощью кнопок сверху. Спасибо! Если вы хотите регулряно получать обновление блога подпишитесь на обновления блога по RSS, Email или twitter!

Wordpress , ,

  1. Дмитрий
    20 Март 2010 в 02:06 | #1

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

  2. 15 Май 2010 в 00:04 | #2

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

  3. 7 Май 2011 в 05:49 | #3

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