How to avoid double submit validation for the ajax contact form?

There is a form, and it should be possible to submit it more than one time,
But when a user tries to submit the form more then one time it appears an error message “This form has already been submitted.”

How to avoid double submit validation?

@pavlo, Not knowing the code and its configuration options, it is hard to tell…

I see a nonce is being used in this form which will probably be tested on submission to prevent resubmission of the same form. Which makes sense, but I guess you will have a specific use-case that warrants multiple submits of the same form?

This is the code of the form,
it is quite similar that was mentioned in your message

title: 'Get in touch'
    name: get-in-touch
    template: form-messages
    refresh_prevention: true
            name: first-name
            type: text
            label: 'First name'
            autofocus: true
            classes: custom-controller
                required: true
            name: last-name
            type: text
            label: 'Last name'
            classes: custom-controller
                required: true
            name: phone
            type: text
            label: Phone
            classes: custom-controller
                required: true
            name: email
            type: email
            label: Email
            classes: custom-controller
                required: true
            name: params
            label: params
            type: hidden
            default: 'default value'
            type: submit
            value: 'GET IN TOUCH WITH ME'
            classes: red-btn
                fileprefix: feedback-
                dateformat: Ymd-His-u
                extension: txt
                body: '{% include ''forms/data.txt.twig'' %}'
                from: '{{ }}'
                    - '{{ }}'
                    - '{{ }}'
                subject: '[Greenhouse feedback] {{|e }}'
                body: '{% include ''forms/data.html.twig'' %}'
            message: 'Thank you!'
cache_enable: false


In the following solution, you can submit a form, return to the same page with a “Thank you!” message above a cleared form and submit again.

Steps I’ve taken:

  1. I used your provided code to create a page /pages/

  2. I copied the template user/plugins/form/templates/form.html.twig into the folder /user/themes/quark/templates and included the partial partials/form-messages.html.twig:

    {% extends 'partials/base.html.twig' %}
    {% block content %}
        {{ content|raw }}
        {# inserted the messages partial here #}
        {% include 'partials/form-messages.html.twig' %}
        {% include "forms/form.html.twig" %}
    {% endblock %}
  3. From the definition of the form, I removed template: form-messages.
    This field tells the message action which template to use and now defaults back to form ( which points to form.html.twig) to get the original page layout back.

  4. To clear the form, I added as last action: reset: true.

Now you can save the form and the original page will return with the “Thank you!” message and a new form can be submitted without errors.

Hope this answers your question.

1 Like

Thank you pamtbaau,

I have fixed it, removed the line with
refresh_prevention: true

I’ve tried that simple solution when I tried your form in a test environment. It didn’t work in my tests unfortunately, but glad it does works for you :slight_smile: