Manually embedded form submits two times

[aerendir]

Your software
My Mautic version is: v2.15.3

Your problem
I’ve created a form and included it on the page using the manual copy.

I’m using WordPress, so, in the page, I added the code of the form in the body:

<div id="mauticform_wrapper_comnewsletter" class="mauticform_wrapper">
    <form autocomplete="false" role="form" method="post" action="https://my.domain.com/form/submit?formId=2" id="mauticform_comnewsletter" data-mautic-form="comnewsletter" enctype="multipart/form-data">
        <div class="mauticform-error" id="mauticform_comnewsletter_error"></div>
        <div class="mauticform-message" id="mauticform_comnewsletter_message"></div>
        <div class="mauticform-innerform">

            
          <div class="mauticform-page-wrapper mauticform-page-1" data-mautic-form-page="1">

            <div id="mauticform_comnewsletter_email" data-validate="email" data-validation-type="email" class="mauticform-row mauticform-email mauticform-field-1 mauticform-required">
                <span class="mauticform-helpmessage">La tua migliore email</span>
                <input id="mauticform_input_comnewsletter_email" name="mauticform[email]" value="" placeholder="La tua migliore email" class="mauticform-input" type="email">
                <span class="mauticform-errormsg" style="display: none;">This is required.</span>
            </div>

            <div id="mauticform_comnewsletter_segui_miosito" class="mauticform-row mauticform-button-wrapper mauticform-field-2">
                <button type="submit" name="mauticform[segui_miosito]" id="mauticform_input_comnewsletter_segui_miosito" value="" class="mauticform-button btn btn-default">Segui Mio Sito</button>
            </div>
            </div>
        </div>

        <input type="hidden" name="mauticform[formId]" id="mauticform_comnewsletter_id" value="2">
        <input type="hidden" name="mauticform[return]" id="mauticform_comnewsletter_return" value="">
        <input type="hidden" name="mauticform[formName]" id="mauticform_comnewsletter_name" value="comnewsletter">

        </form>
</div>

Then I added the JavaScript required:

<script type="text/javascript">
    /** This section is only needed once per page if manually copying **/
    if (typeof MauticSDKLoaded == 'undefined') {
        var MauticSDKLoaded = true;
        var head            = document.getElementsByTagName('head')[0];
        var script          = document.createElement('script');
        script.type         = 'text/javascript';
        script.src          = 'https://my.domain.com/media/js/mautic-form.js';
        script.onload       = function() {
            MauticSDK.onLoad();
        };
        head.appendChild(script);
        var MauticDomain = 'https://my.domain.com';
        var MauticLang   = {
            'submittingMessage': "Please wait..."
        }
    }
</script>

I didn’t changed anything.

The form is configured to send an email to the contact and when the form is submitted, the email is sent twice.

I also see in the results of the form that there are two records and they are the same and at the same time, as if the form submission simply creates two records for one submission.

Any ideas about what is the cause of this strange issue?

Any advice that helps to debug the problem is very appreciated!

[ricardomartins]

When you open your Network inspector (in the browser), do you see 2 requests being posted?

[aerendir]

Hi @ricardomartins, thank you for your reply!

I see two submits.

In the source I see the mautic-form.js script included only once.

[aerendir]

Now it has started to give me random results.

I removed the action from the form, tried to submit and the form isn’t (obviousle) submitted.

Then I readded the action part, tried to submit, and only one submit was sent by the form.

Then, hoping the problem solved itself by itself, I tried with another email and again two submissions.

[aerendir]

It also seems that removing the javascript that loads the mautic-form.js script works correctly: the form is submitted only once, but I don’t see the status message in submit button (the one set by 'submittingMessage': "Please wait...").

So I think that the form is submitted twice because of the action in the form and because the script mautic-form.js is loaded on the page.

i don’t know the code Mautic’s code, not I know JavaScript well, so I’m not able to investigate if it is possible a double submission or not.

I discovered the bug becuase to implement a double optin flow I used a form action to send the confirmation email instead of using a campaign (as correctly suggested by the Mautic’s documentation - but I did all by myself, and then discovered Mautic published a post about the double optin).

So, adding the action to the form, it is triggered each time the form is submitted while (I suppose) using a campaign, as Contact can be added only once to the campaign (doesn’t (s)he?), the bug remains hidden until someone goes to see the records present in the form submissions.

[ricardomartins]

I use mautic in the same way you’re doing.
I believe this could be a problem in some other js in your site.
Try to test your script in jsfiddle and see if it really submits twice.
And finally, if you are using some mautic plugin ,consider disabling it and test again (reinserting/regenerating the code).

[aerendir]

No Maurice plugin.

It is very probable that is some other ha that submits the form again.

Any advice about how can I discover which is it?

[aerendir]

Ok, after a bit of research and digging in the dev tools, I found the double submission was caused by the WordPress plugin AntiSpam by CleanTalk.

This is a plugin that monitors every form field on a page, preventing the spam.

Disabling it solved the issue.

Anyway, I wanted the plugin enabled, so I simply set an exclusion in the advanced options.

I used mauticform as string to exclude and then checked the “Use regular expression in field exclusions”: now all fields that contain mauticform are ignored by Antispam by CleanTalk and the double submission problem is solved.

Thank you @ricardomartins to have put me on the right path!

[samtuke]

Confirming that @aerendir identified the right source of the problem I was experiencing also. The field-based regex filtering didnt’ work for me with Clean Talk, but page-based filtering did. Not sure why.

Great catch, thanks!