•
    как мы внедрили Яндекс SmartCaptcha
    Оставить заявку
    close
    Email: pavel.ps2014@yandex.ru
    Оставить заявку

    Напишите нам в социальных сетях

    Оставить заявку
    #Создание сайтов

    🎯 Кейс Павлов Студио: как мы внедрили Яндекс SmartCaptcha для защиты всех форм сайта на сайте битрикс

    Заказчик
    Павлов Студио
    Задача
    Исключить спам и автоматические отправки во всех формах сайта клиента, сохранив удобство для пользователей.

    📌 Проблема клиента

    У заказчика — более 10 форм:

    • заявки на услуги;

    • формы обратной связи;

    • подписка на рассылку;

    • попап-формы.

    Спам-боты ежедневно отправляли 20–30 нежелательных сообщений, некоторые — напрямую в обработчики Bitrix, обходя фронтенд.

    🛠 Решение: трёхуровневая защита

    Мы реализовали три подхода, чтобы покрыть все сценарии.

    1. 📍 Видимая капча на всех формах

    Когда применяли: в формах с высокой ценностью заявки (запрос расчёта, заказ звонка).

    Что сделали:

    • Подключили SmartCaptcha глобально.

    • Автоматически добавили виджет во все формы.

    • Перед отправкой проверяем токен.

    Пример кода (JS)

    html
    <script src="https://smartcaptcha.yandexcloud.net/captcha.js" defer></script>
    <script>
    (    function() {
    const siteKey = "ВАШ_SITEKEY";

    function addCaptcha(form) {
    if (!form.querySelector(".smart-captcha")) {
    const div = document.createElement("div");
    div.classList.add("smart-captcha");
    div.setAttribute("data-sitekey", siteKey);
    div.setAttribute("data-hl", "ru");
    form.appendChild(div);
    }
    }

    function initForms() {
    document.querySelectorAll("form").forEach(addCaptcha);
    }

    document.addEventListener("DOMContentLoaded", initForms);
    new MutationObserver(initForms).observe(document.body, { childList: true, subtree: true });

    document.addEventListener("submit", function(e) {
    const form = e.target;
    const widget = form.querySelector(".smart-captcha");
    if (widget) {
    const token = smartCaptcha.getResponse(widget);
    if (!token) {
    e.preventDefault();
    alert("Пожалуйста, пройдите проверку капчи.");
    } else {
    let input = form.querySelector('input[name="smart-token"]');
    if (!input) {
    input = document.createElement("input");
    input.type = "hidden";
    input.name = "smart-token";
    form.appendChild(input);
    }
    input.value = token;
    }
    }
    });
    })();
    </script>

    2. 🕵 Невидимая капча для быстрого UX

    Когда применяли: в формах, где важна мгновенная отправка (подписка, быстрый заказ).

    Отличие: пользователь не видит капчу — токен генерируется автоматически.

    Пример кода (JS)

    html
    <script src="https://smartcaptcha.yandexcloud.net/captcha.js" defer></script>
    <script>
    (    function() {
    const siteKey = "ВАШ_SITEKEY";

    function addInvisible(form) {
    if (!form.querySelector(".smart-captcha")) {
    const div = document.createElement("div");
    div.classList.add("smart-captcha");
    div.setAttribute("data-sitekey", siteKey);
    div.setAttribute("data-hl", "ru");
    div.setAttribute("data-invisible", "true");
    form.appendChild(div);
    }
    }

    function initForms() {
    document.querySelectorAll("form").forEach(addInvisible);
    }

    document.addEventListener("DOMContentLoaded", initForms);
    new MutationObserver(initForms).observe(document.body, { childList: true, subtree: true });

    document.addEventListener("submit", function(e) {
    const form = e.target;
    const widget = form.querySelector(".smart-captcha");
    if (widget) {
    e.preventDefault();
    smartCaptcha.execute(widget).then(function(token) {
    let input = form.querySelector('input[name="smart-token"]');
    if (!input) {
    input = document.createElement("input");
    input.type = "hidden";
    input.name = "smart-token";
    form.appendChild(input);
    }
    input.value = token;
    form.submit();
    }).catch(function() {
    alert("Не удалось пройти проверку капчи.");
    });
    }
    });
    })();
    </script>

    3. ⚡ Глобальная серверная проверка в Bitrix

    Когда применяли: всегда.
    Это защита от ботов, которые отправляют формы напрямую, без фронтенда.

    Пример кода (/bitrix/php_interface/init.php)

    php
    <?php
    AddEventHandler("main", "OnBeforeEventAdd", "PavlovStudioSmartCaptcha");

    function PavlovStudioSmartCaptcha($event, &$lid, &$arFields) {
    $secret = 'ВАШ_SECRET';

    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['smart-token'])) {
    $token = $_POST['smart-token'];
    $ip = $_SERVER['REMOTE_ADDR'];

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, "https://smartcaptcha.yandexcloud.net/validate?secret={$secret}&token={$token}&ip={$ip}");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $response = curl_exec($ch);
    curl_close($ch);

    $result = json_decode($response, true);

    if (!isset($result['status']) || $result['status'] !== 'ok') {
    global $APPLICATION;
    $APPLICATION->ThrowException("Ошибка: капча не пройдена.");
    return false;
    }
    } else {
    global $APPLICATION;
    $APPLICATION->ThrowException("Ошибка: капча обязательна.");
    return false;
    }
    }

    📊 Результаты внедрения

    Метрика До внедрения После внедрения
    Спам-заявок в день 20–30 0–1
    Пропущенных заявок 0 0
    Время внедрения — 2 дня
    Довольные пользователи — ✅ 100%

    💡 Итог

    Павлов Студио внедрила многоуровневую защиту:

    • Видимая капча — для ключевых форм.

    • Невидимая капча — для быстрого UX.

    • Глобальная проверка в Bitrix — для защиты на уровне сервера.

    В результате клиент полностью избавился от спама, сохранил удобство работы с сайтом и получил универсальное решение, которое можно использовать в будущих проектах.

    Попробуйте себя в роли веб-разработчика

    Перетащите блоки, соберите структуру сайта и почувствуйте, как создаётся проект.

    А потом доверьте это профессионалу 😉

    Обсудить разработку
    Header
    Меню
    Кнопка
    Картинка
    Баннер
    Поиск
    Наши товары
    Слайдер
    Фильтр

    Перетащи блоки сюда

    Колонка с текстом
    Footer
    Отзывы

    Часто задаваемые вопросы по созданию и технической поддержке сайтов

    Какой порядок работ по созданию сайта?

    Работа начинается с обсуждения задач и целей проекта. Далее формируется техническое задание, подбирается подходящая CMS (WordPress или WooCommerce), согласовывается структура и функционал. После разработки сайт проходит тестирование и запускается.

    По какой системе налогообложения вы работаете?

    Работа ведётся в статусе самозанятого специалиста. При необходимости заключается договор на оказание услуг по разработке, доработке или технической поддержке сайта.

    Какую CMS лучше выбрать для создания сайта?

    Выбор CMS зависит от задач бизнеса. Для корпоративных сайтов и лендингов чаще всего используется WordPress. Для интернет-магазинов — WooCommerce. В рамках консультации я помогу подобрать оптимальное решение с учётом бюджета и функционала.

    Вы занимаетесь технической поддержкой WordPress и WooCommerce?

    Да, я предоставляю техническую поддержку WordPress и WooCommerce: обновления, исправление ошибок, настройка плагинов, оптимизация скорости и защита сайта.

    Что входит в техническую поддержку сайта?

    Регулярные обновления WordPress, резервное копирование, мониторинг безопасности, исправление ошибок, оптимизация производительности и консультации по развитию сайта.

    Работаете ли вы в выходные и срочные задачи?

    Да, при необходимости возможна срочная техническая поддержка сайта в экстренных ситуациях.