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

Support Forms & Blueprints
1

Hi,
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?

2

@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?

3

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

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

@Pavlo

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/01.contact/form.md

  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
5

Thank you pamtbaau,

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

6

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: