Prevent multiple clicks on submit button

The CMS Questions
1

Hello,

I have an email contact form based on the kirby template.
But some emails are received a second time, 5/6 days later, with the same content, same title. It doesn’t happen systematically, but with an email from time to time. it’s very problematic since it’s for a restaurant reservation system.
I suspect this is due to a double-click on the submit button, and the second mail get delayed (that’s what Mailjet told me).
I haven’t managed to reproduce the bug, which makes solving it very complicated.
I’ve tried using Uniform with a captcha, but on Safari, when I double-click on the submit button, the email is still sent several times (however without the delay).
Is there a solution with Uniform or with the kirby basic contact form to avoid this problem?
I spent a lot of times on it but I can’t figure it out.
(I’d like to avoid using ajax if possible.)

Thank you for your time.

2

The easiest would probably be to disable the form button after submissions, and maybe also prevent double-clicking the button.

Other than that, you should redirect after submission to prevent the form from being sent a second time (if it’s not due to double-clicking).

3

Would it also be possible to integrate a CSRF token to prevent multiple sending? Or does it always remain the same as long as the session is active?

4

Thank you for your tips.
I changed my code to submit the form and handle validation via AJAX (based on this uniform example), so I can disable the button with js. But the problem is, if I wait for confirmation that the form has been validated, there’s a latency time (with Safari) that means the button can be clicked several times before it’s deactivated.

window.addEventListener('load', function () {
[…]
  var onload = function (e) {
      if (e.target.status === 200) {
        document.querySelector(".form__btn").disabled = true;
        message.innerHTML = "Sucess!"
      } else {
        handleError(JSON.parse(e.target.response));
      }
  };

  var submit = function (e) {
      e.preventDefault();
      var request = new XMLHttpRequest();
      request.open('POST', e.target.action);
      request.onload = onload;
      request.send(new FormData(e.target));
      for (var key in fields) {
          if (!fields.hasOwnProperty(key)) continue;
          fields[key].classList.remove('error');
      }
  };
  form.addEventListener('submit', submit);
});

And if I deactivate the button too early, I run the risk of there being a missing field and the button being deactivated, preventing the user from validating later.
Do you have any idea how I might handle this?

5

Not really sure about your questions but I think it might remain the same.
There is CSRF token validation with Uniform.