Добавляем страницу контактов

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

Приблизительный макет страницы контактов вы можете увидеть в моем блоге по адресу http://alexanderklimov.ru/contact/.

Шаг первый. Создание шаблона

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

Откройте созданный файл для редактирования и напишите следующий код.


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

В самом начале файла мы добавили комментарий, который позволяет движку WordPress определить, что наш файл является шаблоном и автоматически добавить в список установленных шаблонов (об этом чуть ниже). Фактически мы создали блок для объявления шаблона.

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


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

Шаг второй. Создание формы контактов

Следующий шаг знаком PHP-разработчикам. Нам нужно создать форму для отправки сообщений от посетителей сайта на ваш электронный адрес. Возможно у вас уже есть готовая форма, которую вы использовали на своём сайте. В таком случае вы её можете перенести сюда. В нашем примере мы создадим стандартную форму, где пользователь должен ввести свои данные: имя, электронный адрес, сообщение. Когда посетитель заполнит все поля, он должен щелкнуть на кнопке, чтобы сообщение ушло на вашу почту. Вот простейший код для такой формы.


<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
<ul>
<li>
<label for="contactName">Имя:</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">Сообщение:</label>
<textarea name="comments" id="commentsText" rows="20" cols="30"></textarea>
</li>
<li>
<input type="submit" value="Отправить" />
</li>
</ul>
<input type="hidden" name="submitted" id="submitted" value="true" />
</form>

Шаг третий. Обработка данных и ошибок

Теперь, когда у нас есть форма для заполнения, нужно написать код для обработки введённых данных и для обработки ошибок. Обработка данных заключается в присвоении переменным текстовых значений, который ввёл посетитель в предложенные поля. Обработка ошибок позволит избежать неприятных проблем. Например, пользователь может забыть ввести своё имя или ввести несуществующий адрес электронной почты и т.д. Опять же мы не будет подробно останавливаться на этой теме, так как это выходит за рамки нашей статьи. Вот как может выглядеть код для обработки данных и ошибок, который нужно вставить между объявлением шаблона и функцией 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;
        }
    }
?>

Шаг четвёртый. Добавление шаблона и создание страницы контактов

В принципе все готово к работе. Скопируйте созданный файл contact.php в папку www/wp-content/themes/ИмяВашейТемы. Теперь откройте административную панель управления WordPress и в блоке Страницы выберите пункт Добавить новую. Выберите удобное имя для добавляемой страницы, например, contact. Далее в правой части панели в блоке Шаблоны раскройте выпадающий список и выберите шаблон Contact, созданный нами для этой цели. Осталось только нажать на кнопку Опубликовать и в вашем блоге появится новая страница контактов.

Шаг пятый. Валидация данных и обработка почтовых сообщений

Мы можем улучшить юзабилити страницы, если добавим валидацию заполняемых форм. Проще говоря, если пользователь ввел слишком короткое имя из одной буквы, то мы можем ненавязчиво попросить его ввести более информативное имя. Аналогично можно поступить при неправильном электронном адресе и т.д. При жеелании, вы можете добавить форму для пароля или капчи. Для этой цели можно воспользоваться удобным плагином jQuery Validation. Очень мощный плагин имеет множество настроек и удобен в работе. Более подробно об установке плагина на форму можно почитать здесь.

PHP-разработчики не раз сталкиваются с проблемой обработки писем, отправляемых через функцию mail(). Речь идет о кракозябрах, которые появляются в заголовках и в теле письма. Универсального рецепта для решения проблемы не существует. Здесь многое зависит от используемого почтового клиента и поступаемых данных. Например, на одном моих сайтов использовалась кодировка Windows-1251, а в блоге под управлением WordPress я использую кодировку UTF-8. В обоих случаях мне пришлось использовать разные решения, чтобы в моем почтовом клиенте я мог без проблем читать приходящую почту от страницы контактов. Об этом как-нибудь в следующий раз.