Double records when sending a form and CORS error thrown on the console

Product Support
1

Hey guys. I have this issue when sending a form from my website to mautic.



I basically adapted the HTML markup from the “manual copy” after creating the form.

Problem is:

  1. when I hit the submit button, Mautic gets the same data two times.
  2. The developer tools console from Chrome shows me this message:

    “Failed to load https://mautic.outpay.io/form/submit?formId=4: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://outpay.io’ is therefore not allowed access.”



    I already disabled the CORS on settings but it doesn’t worked. =(



    Can someone help?



    Thank you.



    On the I pasted the code:
Code:

And, on the I pasted and adapted this code:
Code:

Receba nosso informativo e ofertas exclusivas por email!

                       <div id="mauticform_sitehomeinformativo_nome"  data-validate="nome" data-validation-type="text" class="mauticform-row mauticform-text mauticform-field-1 mauticform-required">
                          <input id="mauticform_input_sitehomeinformativo_nome" name="mauticform[nome]" value="" placeholder="Seu Nome" class="mauticform-input Nome" type="text" />
                          <label for="" class="Nome"><span class="fo-p fo-perfil"></span></label>
                          <span class="mauticform-errormsg" style="display: none;">Nome obrigatório</span>
                       </div>

                       <div id="mauticform_sitehomeinformativo_email"  data-validate="email" data-validation-type="email" class="mauticform-row mauticform-email mauticform-field-2 mauticform-required">
                          <input id="mauticform_input_sitehomeinformativo_email" name="mauticform[email]" placeholder="seu@email.com.br" class="mauticform-input Email" type="email" />
                          <label for="" class="Email"><span class="fo-p fo-email"></span></label>
                          <span class="mauticform-errormsg" style="display: none;">Por favor, digite um endereço de email válido</span>
                       </div>

                       <div id="mauticform_sitehomeinformativo_submit"  class="mauticform-row mauticform-button-wrapper mauticform-field-3">
                          <button type="submit" name="mauticform[submit]" id="mauticform_input_sitehomeinformativo_submit" name="mauticform[submit]" class="mauticform-button btn btn-default Btn" value="1">Comece Já</button>
                       </div>

                    </div>
                 </div>
                 <input type="hidden" name="mauticform[formId]" id="mauticform_sitehomeinformativo_id" value="4"/>
                 <input type="hidden" name="mauticform[return]" id="mauticform_sitehomeinformativo_return" value=""/>
                 <input type="hidden" name="mauticform[formName]" id="mauticform_sitehomeinformativo_name" value="sitehomeinformativo"/>
              </form>
           </div></div>

On Jquey AJAX:
Code:
$(document).ready(function(){ //Formulário de contato assíncrono let form = $('#mauticform_sitehomeinformativo'); 
     $(form).submit(function(event){
        //evite a atualização da página
        event.preventDefault();

        //serialização das informações do formulário
        let formData = $(form).serialize();

        //AJAX
        $.ajax({
           type:    'POST',
           url:  $(form).attr('action'),
           data:    formData
        })
        .done(function(response){
           Alert('Você está em nossa lista!', 'sucesso');

           $('#mauticform_input_sitehomeinformativo_f_name').val('');
           $('#mauticform_input_sitehomeinformativo_email').val('');
        })
        .fail(function(data){
           Alert('Oops, houve um problema.', 'erro');
        });
     });
  });</div>
2

Hey guys. I have this issue when sending a form from my website to mautic.

I basically adapted the HTML markup from the “manual copy” after creating the form.
Problem is:

  1. when I hit the submit button, Mautic gets the same data two times.
  2. The developer tools console from Chrome shows me this message:
    “Failed to load https://mautic.outpay.io/form/submit?formId=4: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://outpay.io’ is therefore not allowed access.”

I already disabled the CORS on settings but it doesn’t worked. =(

Can someone help?

Thank you.

On the I pasted the code:

<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://mautic.outpay.io/index.php/media/js/mautic-form.js';
        script.onload       = function() {
            MauticSDK.onLoad();
        };
        head.appendChild(script);
        var MauticDomain = 'https://mautic.outpay.io/index.php';
        var MauticLang   = {
            'submittingMessage': "Please wait..."
        }
    }
</script>

And, on the I pasted and adapted this code:

<div id="mauticform_wrapper_sitehomeinformativo" class="mauticform_wrapper Informativo">
                  <form autocomplete="false" role="form" method="post" action="https://mautic.outpay.io/form/submit?formId=4" id="mauticform_sitehomeinformativo"  data-mautic-form="sitehomeinformativo" enctype="multipart/form-data">
                     <h1 class="--sublinhado --vermelho">Receba nosso informativo e ofertas exclusivas por email!</h1>
                     <div class="mauticform-innerform">
                        <div class="mauticform-page-wrapper mauticform-page-1" data-mautic-form-page="1">

                           <div id="mauticform_sitehomeinformativo_nome"  data-validate="nome" data-validation-type="text" class="mauticform-row mauticform-text mauticform-field-1 mauticform-required">
                              <input id="mauticform_input_sitehomeinformativo_nome" name="mauticform[nome]" value="" placeholder="Seu Nome" class="mauticform-input Nome" type="text" />
                              <label for="" class="Nome"><span class="fo-p fo-perfil"></span></label>
                              <span class="mauticform-errormsg" style="display: none;">Nome obrigatório</span>
                           </div>

                           <div id="mauticform_sitehomeinformativo_email"  data-validate="email" data-validation-type="email" class="mauticform-row mauticform-email mauticform-field-2 mauticform-required">
                              <input id="mauticform_input_sitehomeinformativo_email" name="mauticform[email]" placeholder="seu@email.com.br" class="mauticform-input Email" type="email" />
                              <label for="" class="Email"><span class="fo-p fo-email"></span></label>
                              <span class="mauticform-errormsg" style="display: none;">Por favor, digite um endereço de email válido</span>
                           </div>

                           <div id="mauticform_sitehomeinformativo_submit"  class="mauticform-row mauticform-button-wrapper mauticform-field-3">
                              <button type="submit" name="mauticform[submit]" id="mauticform_input_sitehomeinformativo_submit" name="mauticform[submit]" class="mauticform-button btn btn-default Btn" value="1">Comece Já</button>
                           </div>

                        </div>
                     </div>
                     <input type="hidden" name="mauticform[formId]" id="mauticform_sitehomeinformativo_id" value="4"/>
                     <input type="hidden" name="mauticform[return]" id="mauticform_sitehomeinformativo_return" value=""/>
                     <input type="hidden" name="mauticform[formName]" id="mauticform_sitehomeinformativo_name" value="sitehomeinformativo"/>
                  </form>
               </div>

On Jquey AJAX:

$(document).ready(function(){
         //Formulário de contato assíncrono
         let form = $('#mauticform_sitehomeinformativo');

         $(form).submit(function(event){
            //evite a atualização da página
            event.preventDefault();

            //serialização das informações do formulário
            let formData = $(form).serialize();

            //AJAX
            $.ajax({
               type:    'POST',
               url:  $(form).attr('action'),
               data:    formData
            })
            .done(function(response){
               Alert('Você está em nossa lista!', 'sucesso');

               $('#mauticform_input_sitehomeinformativo_f_name').val('');
               $('#mauticform_input_sitehomeinformativo_email').val('');
            })
            .fail(function(data){
               Alert('Oops, houve um problema.', 'erro');
            });
         });
      });
3

@victormorettir you integrated both code on website , or you intergrate one code twice ? can you share the link

4

@bizcrony I used both code on the same page: the script in the , the html form in the and the ajax script on the bottom of the . All on the same page. Here’s the link: https://outpay.io (it’s on the index page). Thanks!

5

@victormorettir you should use only one code either HTML or Java,

6

The problem remains… do you have any clue on the
“Failed to load https://mautic.outpay.io/form/submit?formId=4: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://outpay.io’ is therefore not allowed access.”
error @bizcrony ?

7

@victormorettir give me form link, where form execute.

8

@bizcrony this form executes on the main home page. There is only one form on this page, which is on the very bottom of it.
https://drive.google.com/file/d/1lSPIb9v3f4TjMBLD9JQbvXLRAJabJaU9/view?usp=sharing

9

@victormorettir form is working , but does not says anything … why don’t you check my profile for better understanding.

10

Hi everyone, a quick update here.

I solved the issue. The problem was my JQuery ajax function competing with the native mautic script to send forms assynchronously.

I had inserted: the mautic script tag + the html markup for the form + a Jquery script to send the form. Because of that, I was getting doubled records on my mautic dashboard everytime someone clicked the submit button.

I solved this by deleting my JQuery ajax POST function and leting the Mautic script do it’s work lol.

The reason why I inserted the Jquery script is because I wanted to make an animated response when the form had been submited with a success response from the server. The native Mautic response inside the apropriate divs for this task is non-animatable (they use either a javascript “element.text” or an “element.innerHTML” property, which just inserts information inside that div).

The CORS problem is actually something from JQuery, they explain very clearly on their documentation, as follows:
“Due to browser security restrictions, most “Ajax” requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.”