Как добавить форму обратной связи на сайт WordPress: плагины и код

Если ты начинаешь свой путь в веб-разработке, рано или поздно тебе понадобится добавить форму обратной связи на сайт. Я сам прошел через это и знаю, как легко запутаться в плагинах, коде и настройках. В этой статье я покажу два рабочих способа, через популярный плагин Contact Form 7 и с помощью кастомного HTML-кода с обработчиком на PHP. Расскажу о подводных камнях, приведу примеры и дам рекомендации, которые сэкономят тебе часы поисков в Яндексе и Google.

Установка формы через Contact Form 7

Contact Form 7 мой фаворит для быстрого решения. Плагин бесплатный, гибкий и поддерживает капчу, файловые загрузки и интеграцию с почтовыми сервисами.

Шаг 1: Установка плагина

1. Зайди в админ-панель WordPress: «Плагины» → «Добавить новый».
2. В поиске введи «Contact Form 7» и нажми «Установить», затем «Активировать».

Шаг 2: Создание первой формы

После активации в меню слева появится пункт «Контактные формы».

1. Перейди в него и нажми «Добавить новую».
2. Перед тобой откроется редактор с готовым шаблоном формы.

Пример кода формы:

<label> Ваше имя (обязательно)
    [text* your-name] </label>

<label> Ваш email (обязательно)
    [email* your-email] </label>

<label> Сообщение
    [textarea your-message] </label>

[submit "Отправить"]

3. Скопируй шорткод формы (он указан над редактором, например, [contact-form-7 id="123"]) и вставь его на нужную страницу через редактор Gutenberg или Elementor.

Шаг 3: Настройка отправки писем

Этот этап часто пропускают новички, из-за чего форма не работает!

1. В редакторе Contact Form 7 перейди во вкладку «Письмо».
2. В поле «Кому» укажи email администратора: [your-email] (используй реальный адрес, например, admin@site.ru).
3. В поле «Тело письма» добавь переменные формы:

От: [your-name] <[your-email]>
Сообщение: [your-message]

4. Сохрани изменения.

Если письма не приходят, проверь настройки SMTP через плагин WP Mail SMTP, часто хостинги блокируют стандартную отправку писем из PHP.

Альтернатива: вставка HTML-формы с обработчиком

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

Шаг 1: Создаем HTML-форму

Добавь следующий код в нужное место страницы (через редактор или шаблон page.php):

<form id="custom-contact-form" method="post">
    <div>
        <label>Имя:</label>
        <input type="text" name="name" required>
    </div>
    <div>
        <label>Email:</label>
        <input type="email" name="email" required>
    </div>
    <div>
        <label>Сообщение:</label>
        <textarea name="message" required></textarea>
    </div>
    <input type="submit" name="submit" value="Отправить">
</form>

Шаг 2: Пишем обработчик на PHP

Добавь этот код в файл functions.php своей темы:

add_action('init', 'handle_custom_form');
function handle_custom_form() {
    if (isset($_POST['submit'])) {
        $name = sanitize_text_field($_POST['name']);
        $email = sanitize_email($_POST['email']);
        $message = sanitize_textarea_field($_POST['message']);
        
        $to = 'admin@site.ru'; // Замени на свой email
        $subject = 'Новое сообщение с сайта';
        $body = "Имя: $name\nEmail: $email\nСообщение: $message";
        $headers = array('Content-Type: text/html; charset=UTF-8');
        
        if (wp_mail($to, $subject, $body, $headers)) {
            echo '<div class="success">Спасибо! Ваше сообщение отправлено.</div>';
        } else {
            echo '<div class="error">Ошибка отправки.</div>';
        }
    }
}

Совет: Всегда используй функции санитизации WordPress (sanitize_text_field, sanitize_email), чтобы избежать XSS-атак.

Настройка уведомлений на email

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

Для Contact Form 7:

1. Убедись, что в поле «Кому» указан доменный email (например, info@ваш-сайт.ru), а не Gmail или Yahoo.
2. В поле «От кого» пропиши: [your-name] <wordpress@ваш-сайт.ru>.

Для кастомной формы:

Используй плагин WP Mail SMTP для настройки отправки через SMTP (например, через Gmail или SendGrid).

1. Установи и активируй плагин.
2. Перейди в «Настройки» → «WP Mail SMTP».
3. Выбери сервис (рекомендую SendGrid для старта), введи данные SMTP и сохрани.

Contact Form 7 или кастомный код

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

Советы для начинающих веб-разработчиков

1. Тестируйте форму. После установки обязательно проверьте, как форма работает на сайте. Отправьте тестовое сообщение и убедитесь, что уведомление приходит на email.
2. Используйте CAPTCHA. Чтобы защитить форму от спама, добавьте CAPTCHA. В Contact Form 7 есть встроенная поддержка reCAPTCHA.
3. Оптимизируйте код. Если вы используете HTML-форму, убедитесь, что код чистый и соответствует стандартам.
4. Резервное копирование. Перед внесением изменений в файлы темы всегда создавайте резервную копию сайта.

Добавление формы обратной связи на сайт WordPress это важный шаг для улучшения взаимодействия с пользователями. Я показал два способа, через плагин Contact Form 7 и с помощью HTML-формы с обработчиком. Оба метода имеют свои преимущества и выбор зависит от ваших навыков и потребностей.

Если у вас остались вопросы, пишите в комментария, с радостью помогу.