Как создать обратный звонок в WordPress с помощью шорткода

Обратный звонок — удобный инструмент для быстрого взаимодействия с посетителями сайта. В этой статье разберём, как создать простую форму обратного звонка в WordPress с помощью собственного шорткода, а также рассмотрим популярные плагины для расширения функционала.

Почему стоит использовать форму обратного звонка

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

Реализовать такую форму можно несколькими способами: через готовые плагины, через конструкторы форм или с помощью собственного кода и шорткодов, что даёт максимальную гибкость.

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

Создание формы обратного звонка через шорткод

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

Код шорткода и обработчика формы

function wp_pro_callback_form() {
    if (isset($_POST['wp_pro_callback_submit'])) {
        wp_pro_handle_callback_form();
    }

    ob_start();
    ?>
    <form method="post" class="wp-pro-callback-form">
        <label for="wp_pro_name">Ваше имя:</label><br>
        <input type="text" id="wp_pro_name" name="wp_pro_name" required><br>

        <label for="wp_pro_phone">Телефон:</label><br>
        <input type="tel" id="wp_pro_phone" name="wp_pro_phone" required pattern="\+?[0-9 \-]{7,15}" placeholder="+7 900 123-45-67"><br>

        <input type="submit" name="wp_pro_callback_submit" value="Заказать звонок">
    </form>
    <style>
        .wp-pro-callback-form {
            max-width: 300px;
            padding: 10px;
            border: 1px solid #ccc;
            background: #f9f9f9;
        }
        .wp-pro-callback-form input[type=text], .wp-pro-callback-form input[type=tel] {
            width: 100%;
            padding: 6px;
            margin-bottom: 10px;
            box-sizing: border-box;
        }
    </style>
    <?php
    return ob_get_clean();
}
add_shortcode('wp_pro_callback', 'wp_pro_callback_form');

function wp_pro_handle_callback_form() {
    $name = sanitize_text_field($_POST['wp_pro_name']);
    $phone = sanitize_text_field($_POST['wp_pro_phone']);

    // Сохраняем данные в базу или отправляем на email
    $to = get_option('admin_email');
    $subject = 'Запрос обратного звонка с сайта';
    $message = "Поступил запрос обратного звонка:\nИмя: $name\nТелефон: $phone";
    wp_mail($to, $subject, $message);

    // Можно добавить сохранение в пользовательскую таблицу или пост тип
    // Далее выводим сообщение об успешной отправке
    echo '<div style="color:green; margin-bottom:10px;">Спасибо! Ваша заявка принята, мы скоро свяжемся с вами.</div>';
}

Этот код создаёт шорткод [wp_pro_callback], который можно вставить на любую страницу или в запись. Форма валидирует телефон, отправляет письмо администратору и выводит сообщение об успешной отправке.

Расширение функционала: сохранение в базу и защита от спама

Для удобства можно сохранять заявки в базе данных, чтобы отслеживать их в админке. Также важно защитить форму от спама.

Сохранение данных в пользовательской таблице

Для этого при активации плагина или темы создайте таблицу, например, wp_pro_callbacks с полями id, name, phone, date. Затем дополните функцию wp_pro_handle_callback_form следующим кодом:

global $wpdb;
$table = $wpdb->prefix . 'pro_callbacks';
$wpdb->insert($table, [
    'name' => $name,
    'phone' => $phone,
    'date' => current_time('mysql')
]);

Добавление CAPTCHA для защиты от спама

Можно интегрировать Google reCAPTCHA или использовать простую проверку, например, скрытое поле honeypot:

<input type="text" name="wp_pro_hp" style="display:none" value="">

// В обработчике
if (!empty($_POST['wp_pro_hp'])) {
    return; // Спам-бот заполнил поле, игнорируем
}

Популярные плагины для обратного звонка в WordPress

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

• Callback Widget — простой и бесплатный плагин с виджетом и шорткодом.
• Contact Form 7 — можно создать форму обратного звонка и расширить её с помощью дополнительных плагинов.
• WP Call Button — добавляет кнопку звонка на сайт с настройками.

Плагины из wpshop.ru также могут помочь с кастомизацией и интеграцией уведомлений.

Выводы и рекомендации

Создать форму обратного звонка через шорткод — задача, вполне выполнимая для любого разработчика WordPress. Это позволяет гибко управлять отображением и логикой формы. При необходимости можно расширить функционал сохранением данных, защитой от спама и уведомлениями.

Если не хочется писать код, стоит обратить внимание на проверенные плагины. Главное — обеспечить удобство посетителей и оперативную обработку заявок.