В этих уроках я хочу максимально подробно показать, как делать форму обратной связи на движке WordPress без плагина.
Кто-то может подумать, зачем вообще это надо, если есть плагины. А вот надо! 🙂
Во-первых, незачем перегружать сайт плагинами, если есть не сильно сложная возможность обойтись без них.
Во-вторых, многие плагины для создания форм могут хорошенько нагрузить ваш сайт, что особенно обидно, если вам нужна какая-нибудь совсем простая форма.
В-третьих, я считаю, каждый разработчик должен уметь писать такие штуки и безо всяких плагинов. Полезно знать, что там вообще, под капотом, происходит.
Итак, приступим. В этом уроке мы начнем реализовывать самую простую форму, где клиенту будет предложено ввести свои имя, телефон, и какие-нибудь комментарии по желанию. Заявка отправляется, к примеру, на почту в отдел продаж, где менеджер берет эту контактную информацию, и перезванивает клиенту. Соответственно, нам нужно, чтобы телефон и имя были обязательными полями.
Начнем с html-разметки нашей формы. Мы создаем новый шаблон страницы, и где-нибудь, например, после подключения шапки (строки
) вставляем вот этот код.
<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, где
— это трюк для защиты от спама. Мы это поле спрячем. Для этого в файле со стилями css пропишем следующее:
textarea[name="user-comment"] {
display: hidden;
}
Стили также можно прописать прямо в нашем шаблоне, указав после строки
вот это
Теперь пользователь это поле не увидит. А робот скорее всего заполнит его, и попадется в нашу ловушку. Защита простенькая, но рабочая.
Оформление этой формы оставляю в качестве самостоятельного упражнения. Есть, правда, один лайфхак в этом деле. Как правило, темы worpress уже содержат готовые оформления форм, поэтому все, что нужно — это узнать, какие классы определяют оформление формы, и добавить эти классы в нашу форму.
Теперь приступаем к коду для обработки формы.
Как я уже написала, для простоты будем обрабатывать форму в этом же самом шаблоне. Это не самый лучший вариант организации кода, но для первого урока этого будет достаточно.
В самом начале шаблона после открывающего тэга
вставляем следующий код. Это тот минимум, при котором мы уже сможем получить данные из формы, и отправить письмо с заявкой.
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 — содержимое письма. В данном случае мы формируем обычное текстовое сообщение.
После этого мы пытаемся отправить письмо, и проверяем, удалась попытка или нет. Пробовать лучше на хостинге, потому что на локальном сервере может быть не настроена отправка почты.
На этом этот урок заканчиваем. А на следующем уроке мы будем нашу форму и наш код совершенствовать.
