Як захистити форму Elementor від подвійної відправки

Чому форма відправляється двічі

Кнопка форми не завжди блокується автоматично. Якщо відповідь сервера затримується, користувач може натиснути її кілька разів. Кожне натискання здатне створити окремий запит до обробника форми.

Проблема може проявлятися не лише у вигляді двох листів. Дублікати потрапляють у CRM, створюють повторні замовлення, запускають кілька автоматичних сценаріїв або призводять до повторного списання коштів, якщо форма пов’язана з оплатою.

• повільне завантаження або нестабільне мобільне з’єднання;
• відсутність зміни стану кнопки після натискання;
• подвійне натискання через затримку відповіді;
• повторне надсилання після оновлення сторінки або повернення до неї через кнопку браузера.

Як підготувати кнопку форми в Elementor

Спочатку відкрийте сторінку з потрібною формою в редакторі Elementor Pro. У віджеті Form знайдіть налаштування кнопки надсилання та додайте їй CSS-клас без крапки на початку:

• prevent-double-submit

Де вказати клас

Клас додається в поле CSS Classes у розширених налаштуваннях кнопки. Не вставляйте в це поле JavaScript і не додавайте символ «.» — він використовується лише в CSS-селекторах та коді.

Якщо на сторінці кілька форм, клас можна додати тільки до тих кнопок, для яких потрібен захист. Це дає змогу не змінювати поведінку інших форм.

JavaScript для блокування повторного надсилання

Додайте код у Custom Code або JavaScript-файл дочірньої теми. Якщо використовується Custom Code, розміщуйте скрипт у футері або в іншому місці, де він завантажиться після основного вмісту сторінки.

Скрипт перевіряє саме форму Elementor і кнопку з класом prevent-double-submit. Після першого надсилання він запам’ятовує стан кнопки, вимикає її та змінює напис. Якщо Elementor повідомляє про успішне надсилання або помилку AJAX, кнопка повертається до початкового стану.

document.addEventListener('submit', function (event) {
  const form = event.target.closest('.elementor-form');
  if (!form) return;

  const button = form.querySelector(
    '.prevent-double-submit[type="submit"]'
  );
  if (!button) return;

  if (button.dataset.submitted === 'true') {
    event.preventDefault();
    return;
  }

  button.dataset.submitted = 'true';
  button.dataset.originalLabel = button.tagName === 'INPUT'
    ? button.value
    : button.textContent;

  button.disabled = true;

  if (button.tagName === 'INPUT') {
    button.value = 'Надсилання…';
  } else {
    button.textContent = 'Надсилання…';
  }
}, true);

function resetSubmitButton(form) {
  if (!form || !form.matches('.elementor-form')) return;

  const button = form.querySelector(
    '.prevent-double-submit[type="submit"]'
  );
  if (!button) return;

  button.disabled = false;
  button.dataset.submitted = 'false';

  if (button.dataset.originalLabel) {
    if (button.tagName === 'INPUT') {
      button.value = button.dataset.originalLabel;
    } else {
      button.textContent = button.dataset.originalLabel;
    }
  }
}

if (window.jQuery) {
  jQuery(document).on('submit_success submit_error', function (event) {
    const form = event.target.closest
      ? event.target.closest('.elementor-form')
      : null;

    resetSubmitButton(form);
  });
}

Що робить цей код

Властивість data-submitted працює як внутрішній прапорець. Після першого надсилання вона отримує значення true, тому наступна спроба блокується через event.preventDefault(). Властивість disabled додатково не дозволяє натиснути кнопку мишкою або пальцем.

Оригінальний напис зберігається перед зміною. Це важливо, оскільки після помилки користувач має побачити звичайний текст кнопки, а не залишатися зі статусом «Надсилання…».

Що відбувається при помилці валідації

Якщо поле не заповнене або не відповідає правилам валідації браузера, подія submit зазвичай не запускається. У такому випадку кнопка не встигає заблокуватися, тому користувач може виправити дані та повторити спробу.

Інша ситуація — помилка, яку Elementor або сервер повертає вже після початку AJAX-запиту. Саме тому в коді передбачено обробку подій submit_success і submit_error. Після помилки кнопка знову активується, а її початковий текст відновлюється.

Після встановлення скрипта обов’язково перевірте не лише успішну заявку, а й порожні обов’язкові поля, неправильний email та серверну помилку. Якщо на сайті використовується додатковий плагін валідації, він може мати власну подію для скидання стану кнопки.

• натисніть кнопку на порожній формі;
• введіть некоректну email-адресу;
• виправте помилку та повторіть надсилання;
• перевірте, що після невдалої AJAX-відправки кнопку можна натиснути ще раз.

Як перевірити захист на реальному сайті

Тестуйте форму не лише в редакторі Elementor, а на опублікованій сторінці. Найкраще виконати перевірку в режимі інкогніто та на мобільному пристрої, де затримка між натисканням і відповіддю сервера помітніша.

Після натискання швидко натисніть кнопку ще кілька разів. У поштовій скриньці, CRM або іншій системі приймання заявок має з’явитися лише один запис. Якщо форма має інтеграцію з вебхуком, перевірте також журнал отриманих запитів.

Очистіть кеш після додавання скрипта. Кеш-плагін, CDN або оптимізатор JavaScript можуть віддавати стару версію сторінки або змінити порядок виконання скриптів.

• перевірте сторінку на телефоні та комп’ютері;
• переконайтеся, що текст кнопки змінюється одразу;
• перевірте один запис у пошті, CRM або базі даних;
• подивіться консоль браузера на наявність JavaScript-помилок;
• повторіть тест після очищення кешу.

Поширені помилки та важливі обмеження

Не додавайте клас до самої форми, якщо скрипт очікує його на кнопці. Також не використовуйте селектор для всіх кнопок Elementor на сторінці: це може випадково заблокувати кнопки меню, попапів або інших віджетів.

Захист кнопки зменшує кількість випадкових дублікатів, але не є повною ідемпотентністю операції. Користувач може оновити сторінку, повторити запит після мережевого збою або надіслати однакові дані з іншого пристрою.

Для замовлень, оплат і заявок із фінансовими наслідками варто додатково реалізувати захист на сервері: перевірку унікального ідентифікатора заявки, контроль повторного webhook-запиту або фільтрацію однакових записів у CRM. Клієнтський JavaScript не може замінити серверну перевірку.

• не вставляйте скрипт кілька разів на одну сторінку;
• не видаляйте обробку submit_error, якщо форма працює через AJAX;
• не вважайте disabled-кнопку захистом від повторної оплати;
• перевіряйте сумісність із плагінами кешування та оптимізації JavaScript.