В этих уроках я хочу максимально подробно показать, как делать форму обратной связи на движке 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 — содержимое письма. В данном случае мы формируем обычное текстовое сообщение.
После этого мы пытаемся отправить письмо, и проверяем, удалась попытка или нет. Пробовать лучше на хостинге, потому что на локальном сервере может быть не настроена отправка почты.
На этом этот урок заканчиваем. А на следующем уроке мы будем нашу форму и наш код совершенствовать.