WordPress - форма обратной связи

Итак, сегодня я постараюсь наглядно продемонстрировать вам, как собрать простую контактную форму для своего WordPress-блога самостоятельно, без использования каких-либо сторонних плагинов. В качестве тестового образца использовать буду поставляемую по умолчанию тему TwentyTen. Приступим, надеюсь CSS/HTML, JavaScript и чуточка серверных скриптов читателя не напугают. В противном случае покиньте страницу, немедленно!

  1. Скопируйте файл показа одиночной записи - single.php, переименуйте его на своё усмотрение. Обзовите, например, "contact.php".
  2. В начале кода добавьте своё описание в таком нехитром формате.
  3. Вставьте содержимое цикла из соответствующего loop.
  4. Создайте обычным способом через админ-панель пробную страницу с заготовленной на предыдущих этапах маской шаблона.
  5. Отчистите код от излишней разметки в виде информации об авторе, постраничного разбиения, подключения формы комментирования. Должно получиться нечто подобное:
    <?php
    /**
     * Template Name: Контакты
     */
    get_header(); ?>
    		<div id="container">
    			<div id="content" role="main">
    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    				<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    					<h1 class="entry-title">Форма обратной связи</h1>
    
    					<div class="entry-content">
    						<?php the_content(); ?>
    					</div><!-- .entry-content -->
    
    					<div class="entry-utility">
    						<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
    					</div><!-- .entry-utility -->
    				</div><!-- #post-## -->
    <?php endwhile; // end of the loop. ?>
    			</div><!-- #content -->
    		</div><!-- #container -->
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
    
  6. Далее заменяем функцию вывода содержимого страницы the_content, приплюсовываем CSS-идентификатор Respond к соответсвующему классу, чтобы стили не сбить:Форма обратной связи на WordPress

    <div class="entry-content" id="respond">
    
    	<form id="contacts-form" action="<?php the_permalink(); ?>" method="post">
    		<p>
    			Все поля обязательны для заполнения.
    		</p>
    		<p>
    			<label>Имя:</label>
    			<input type="text" name="contactName" value="" size="30"/></p>
    		<p>
    			<label>E-mail:</label>
    			<input type="text" name="email" value="" size="30"/>
    		</p>
    		<p>
    			<label>Сообщение:</label>
    			<textarea name="message" cols="45" rows="8"></textarea>
    		</p>
    		<p class="form-submit">
    			<input name="submit" type="submit" id="submit" value="Отправить">
    			<input type="hidden" name="submitted" id="submitted" value="true" />
    		</p>
    	</form>
    	
    </div><!-- .entry-content -->
    
    
  7. Первый этап завершен относительно успешно - условно выражаясь "красоту мы навели". Переходим к непосредственному программированию. Сразу после вызова шапки сайта добавьте обработчик:

    $hasError = FALSE; //есть ли ошибки при заполнении
    $nosubmitted = TRUE; //удалось/не удалось отослать
    if(isset($_POST['submitted'])) :
        $nosubmitted = FALSE;
        //заполнено ли имя?
        if(trim(empty($_POST['contactName']))) {
            $IsError = '- ваше имя.\n';
            $hasError = TRUE;
        } else {
            $name = trim($_POST['contactName']);
        }
        //правильно ли указан ящик?
        if(trim(empty($_POST['email'])))  {
            $IsError .= '- адрес электронной почты.\n';
            $hasError = TRUE;
        } else if (!is_email($_POST['email'])) { //проверка "мыльника"
            $IsError .= '- правильный адрес электронной почты.\n';
            $hasError = TRUE;
        } else {
            $email = trim($_POST['email']);
        }
        //есть ли само содержимое?
        if(trim(empty($_POST['message']))) {
            $IsError .= '- текст сообщения.\n';
            $hasError = TRUE;
        } else {
            if(function_exists('stripslashes')) {
                $text= stripslashes(trim(strip_tags($_POST['message'])));
            } else {
                $text= trim(strip_tags($_POST['message']));
            }
        }
    //OK, формируем табличку с заполненной информацией
    if($hasError === FALSE) {
    $fullmessage = '
    <style type="text/css">
    table {text-align: left;}
    th, td {padding: 4px 4px;}
    th {background:#666;color:#FFF;}
    td {background:#EEE;color:#000;}
    </style>
    <table border="0">
      <tr>
        <th>Имя</th><td>'.$name.'</td>
      </tr>
      <tr>
        <th>E-mail</th><td>'.$email.'</td>   
      </tr>
      <tr>
        <th>Сообщение</th><td>'.$text.'</td>	
      </tr>
    </table>';
    //ставим фильтр, разрешающий html
    add_filter('wp_mail_content_type',create_function('', 'return "text/html";'));
    //отсылаем письмо на почту администратора ресурса
    $emailSend = wp_mail(get_bloginfo('admin_email'), 
                                      'Посетитель с ['.get_bloginfo('name').']', 
    				   $fullmessage);
    }
    endif;
    
  8. Наконец, подводим финальные аккорды. Где-нибудь перед выводом подвала (get_footer) вставьте следующее уведомление для пользователя:

    if ($nosubmitted === FALSE) {
      if (($hasError === TRUE)or($emailSend === FALSE)) { 
        echo '<script type="text/javascript">alert("Не удалось отправить сообщение, введите:\n'.$IsError.'");</script>';
      }  elseif (($hasError === FALSE)and($emailSend === TRUE)) {
        echo '<script type="text/javascript">alert("Спасибо, письмо отправлено.");</script>';;	
      } 
    }
    //уберем за собой
    unset($hasError,$nosubmitted,$emailSend,$fullmessage,$name,$email,$text);
    

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





© 2012-2014 Druweb.ru. Вы можете спокойно копировать любые материалы сайта только при наличии обратной ссылки.