Почему адаптивные формы важны для сайта на WordPress
В современном вебе адаптивность — это не просто модное слово, а обязательное требование для удобства пользователей и повышения конверсии. Особенно это касается форм обратной связи, подписки или заказа, которые должны корректно отображаться и работать как на десктопах, так и на мобильных устройствах. В этой статье мы разберем, как создавать такие формы на WordPress, учитывая UX, производительность и простоту поддержки.
Формы — это основной канал взаимодействия с посетителями. Если форма неудобна, слишком громоздка или не работает на мобильных устройствах, вы теряете клиентов и заявки. Поэтому стоит уделить особое внимание адаптивности и функциональности.
Рассмотрим как использовать готовые решения на базе популярных плагинов, а также как создать простую адаптивную форму вручную с примером кода.
Популярные плагины для создания адаптивных форм в WordPress
Contact Form 7 — классика с возможностью адаптации
Contact Form 7 — самый популярный бесплатный плагин для создания форм. Он легкий и гибкий, но по умолчанию не имеет адаптивного дизайна. Для адаптации под мобильные устройства можно использовать CSS и небольшие доработки.
Для начала установите и активируйте плагин через админку WordPress, затем создайте новую форму.
Пример CSS для адаптивности формы Contact Form 7:
.wpcorp-contact-form input[type="text"],
.wpcorp-contact-form input[type="email"],
.wpcorp-contact-form textarea {
width: 100%;
max-width: 400px;
box-sizing: border-box;
padding: 10px;
}
@media (max-width: 480px) {
.wpcorp-contact-form {
padding: 0 10px;
}
}Добавьте этот CSS в файл стилей вашей темы или через кастомизатор. Обязательно оберните шорткод формы в контейнер с классом wpcorp-contact-form чтобы стили применялись только к нужной форме.
Gravity Forms — мощный коммерческий плагин с адаптивными опциями
Gravity Forms — это премиум-плагин, который из коробки имеет адаптивный дизайн и множество настроек для создания сложных форм с логикой и интеграциями. Если вам нужны сложные формы с расчетами, многошаговые или с условным выводом полей, он отлично подойдет.
Для адаптивности достаточно использовать стандартные стили плагина, а при необходимости можно добавить свои CSS или использовать хуки для кастомизации вывода.
Создание адаптивной формы вручную с примером кода
Если задача — легкая форма без излишних плагинов, можно создать собственный шорткод с адаптивной формой, используя PHP и HTML. Ниже пример, который можно добавить в файл functions.php вашей темы или в собственный плагин.
function wpcorp_adaptive_form_shortcode() {
ob_start();
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['wpcorp_form_nonce'])) {
if (!wp_verify_nonce($_POST['wpcorp_form_nonce'], 'wpcorp_submit_form')) {
echo '<p>Ошибка безопасности. Попробуйте еще раз.</p>';
} else {
$name = sanitize_text_field($_POST['wpcorp_name']);
$email = sanitize_email($_POST['wpcorp_email']);
if (empty($name) || empty($email)) {
echo '<p>Пожалуйста, заполните все поля.</p>';
} elseif (!is_email($email)) {
echo '<p>Введите корректный email.</p>';
} else {
// Здесь можно добавить логику обработки, например, отправку письма
wp_mail('admin@wpcorp.ru', 'Новая заявка с формы', "Имя: $name\nEmail: $email");
echo '<p>Спасибо за вашу заявку!</p>';
}
}
}
?>
<form method="post" class="wpcorp-adaptive-form">
<label for="wpcorp_name">Имя:</label><br>
<input type="text" id="wpcorp_name" name="wpcorp_name" required><br>
<label for="wpcorp_email">Email:</label><br>
<input type="email" id="wpcorp_email" name="wpcorp_email" required><br>
<input type="hidden" name="wpcorp_form_nonce" value="<?php echo wp_create_nonce('wpcorp_submit_form'); ?>">
<button type="submit">Отправить</button>
</form>
<style>
.wpcorp-adaptive-form {
max-width: 400px;
margin: 0 auto;
padding: 15px;
box-sizing: border-box;
}
.wpcorp-adaptive-form input[type="text"],
.wpcorp-adaptive-form input[type="email"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
box-sizing: border-box;
}
@media (max-width: 480px) {
.wpcorp-adaptive-form {
padding: 10px;
}
}
</style>
<?php
return ob_get_clean();
}
add_shortcode('wpcorp_adaptive_form', 'wpcorp_adaptive_form_shortcode');Этот код создаст шорткод [wpcorp_adaptive_form], который можно вставить в любую страницу или запись. Форма будет адаптивной, с базовой валидацией и защитой через nonce.
Расширение функционала адаптивных форм с помощью JavaScript и AJAX
Для повышения удобства пользователя стоит добавить AJAX-отправку формы, чтобы страница не перезагружалась при отправке. Это улучшает UX и позволяет сразу выводить сообщения об ошибках или успехе.
Для этого нужно зарегистрировать AJAX-обработчик в WordPress и подключить JavaScript код.
Пример AJAX-обработчика в PHP
function wpcorp_ajax_submit_form() {
check_ajax_referer('wpcorp_submit_form', 'nonce');
$name = sanitize_text_field($_POST['name']);
$email = sanitize_email($_POST['email']);
if (empty($name) || empty($email)) {
wp_send_json_error('Пожалуйста, заполните все поля');
}
if (!is_email($email)) {
wp_send_json_error('Некорректный email');
}
// Отправка письма или сохранение данных
wp_mail('admin@wpcorp.ru', 'Новая заявка с AJAX-формы', "Имя: $name\nEmail: $email");
wp_send_json_success('Спасибо за заявку!');
}
add_action('wp_ajax_wpcorp_submit_form', 'wpcorp_ajax_submit_form');
add_action('wp_ajax_nopriv_wpcorp_submit_form', 'wpcorp_ajax_submit_form');JavaScript код для AJAX-отправки
document.addEventListener('DOMContentLoaded', function () {
const form = document.querySelector('.wpcorp-adaptive-form');
if (!form) return;
form.addEventListener('submit', function (e) {
e.preventDefault();
const data = new FormData(form);
data.append('action', 'wpcorp_submit_form');
data.append('nonce', form.querySelector('[name="wpcorp_form_nonce"]').value);
fetch(ajaxurl, {
method: 'POST',
credentials: 'same-origin',
body: data
})
.then(response => response.json())
.then(result => {
alert(result.success ? result.data : 'Ошибка: ' + result.data);
})
.catch(() => {
alert('Произошла ошибка при отправке формы');
});
});
});Не забудьте локализовать скрипт в WordPress и передать переменную ajaxurl для корректной работы.
Выводы по созданию адаптивных форм в WordPress
Создание адаптивных форм — необходимый шаг для повышения удобства и конверсии на сайте. Можно использовать готовые плагины, такие как Contact Form 7 с адаптивным CSS или Gravity Forms с встроенной адаптивностью. Для сложных или уникальных задач — реализовать собственное решение с использованием шорткодов и AJAX.
Главное — обеспечить удобный интерфейс на всех устройствах, проверить валидацию и безопасность данных, а также дать пользователю понятную обратную связь.
На примере кода из статьи вы можете быстро сделать свою адаптивную форму и при необходимости расширять её функциональность.