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

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

Кто-то может подумать, зачем вообще это надо, если есть плагины. А вот надо! 🙂

Во-первых, незачем перегружать сайт плагинами, если есть не сильно сложная возможность обойтись без них.

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

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

Итак, приступим. В этом уроке мы начнем реализовывать самую простую форму, где клиенту будет предложено ввести свои имя, телефон, и какие-нибудь комментарии по желанию. Заявка отправляется, к примеру, на почту в отдел продаж, где менеджер берет эту контактную информацию, и перезванивает клиенту. Соответственно, нам нужно, чтобы телефон и имя были обязательными полями.

Начнем с html-разметки нашей формы. Мы создаем новый шаблон страницы, и где-нибудь, например, после подключения шапки (строки

get_header(); ?>

) вставляем вот этот код.

<form action="<?php the_permalink(); ?>" method="POST">

    <p><label for="user-name">Ваше имя (обязательно):</label>
    <input type="text" name="user-name" required maxlength="30"></p>

    <p><label for="user-tel">Ваш номер телефона (обязательно):</label>
    <input type="text" name="user-tel" required maxlength="30"></p>

    <p><label for="user-message">Напишите здесь ваши пожелания:</label>
    <textarea name="user-message"></textarea></p>

    <textarea name="user-comment"></textarea>

    <p><input type="submit" name="submit" value="Отправить"/></p>

</form>

В первой строке мы указываем, что у нас здесь будет форма, что данные этой формы будут передаваться на сервер методом POST, и что функция обработки будет находиться прямо здесь, на этой самой странице.

Дальше у нас два поля для ввода данных: одно для имени пользователя, другое для телефона. Оба они обязательные (для этого используем атрибут required). Также для этих полей можно указать атрибут maxlength, который ограничивает количество введенных в поле символов. Третье поле — textarea, для ввода нескольких строк текста. В него пользователь будет вводить свое сообщение.

Все эти поля снабжены пояснениями (label) для пользователя.

А вот следующее поле textarea, где

name="user-comment"

— это трюк для защиты от спама. Мы это поле спрячем. Для этого в файле со стилями css пропишем следующее:

textarea[name="user-comment"] {
    display: hidden;
}

Стили также можно прописать прямо в нашем шаблоне, указав после строки

get_header();

вот это

&lt;?php echo '&lt;style&gt;textarea[name="user-comment"]{display:none;}&lt;/style&gt;'; ?&gt;

Теперь пользователь это поле не увидит. А робот скорее всего заполнит его, и попадется в нашу ловушку. Защита простенькая, но рабочая.

Оформление этой формы оставляю в качестве самостоятельного упражнения. Есть, правда, один лайфхак в этом деле. Как правило, темы worpress уже содержат готовые оформления форм, поэтому все, что нужно — это узнать, какие классы определяют оформление формы, и добавить эти классы в нашу форму.

Теперь приступаем к коду для обработки формы.

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

В самом начале шаблона после открывающего тэга

&lt;?php

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

if ( isset($_POST['submit']) ) {

    if ( !empty($_POST['user-comment']) ) {
        echo "Спам здесь не пройдет!";
        exit;
    }

    if ( isset($_POST['user-name'] ) && isset( $_POST['user-tel']) ) {

        $to = get_option('admin_email');
        $subject = 'Новый заказ';
        $message = sprintf(
           'Поступил заказ от %s. Его телефон %s, а хочет он заказать %s',
           trim($_POST['user-name']),
           trim($_POST['user-tel']),
           trim($_POST['user-message'])
        );

        if ( wp_mail( $to, $subject, $message ) ) {
           echo "Письмо отправлено!";
        } else {
           echo "К сожалению, письмо не отправляется!";
        }
    }
}

Вначале мы проверяем, была ли отправлена форма. Это мы узнаем проверкой глобального массива $_POST. Если там появляется значение по ключу submit, значит форма была отправлена.

Дальше, мы проверяем наше спрятанное поле. Если оно заполнено, значит тут прошелся бот. Мы прерываем работу скрипта, и выводим боту грозное сообщение.

Потом делаем еще одну проверку на заполнение полей user-name и user-tel, которые у нас являются обязательными. Да-да, пользователь нам и так уже не сможет отправить форму без заполнения этих полей благодаря атрибуту required. Но в любом случае, проверки нужны не только на стороне клиента, но и на стороне сервера обязательно.

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

$subject — тема письма, $message — содержимое письма. В данном случае мы формируем обычное текстовое сообщение.

После этого мы пытаемся отправить письмо, и проверяем, удалась попытка или нет. Пробовать лучше на хостинге, потому что на локальном сервере может быть не настроена отправка почты.

На этом этот урок заканчиваем. А на следующем уроке мы будем нашу форму и наш код совершенствовать.


Добавить комментарий