Form error message even when sending is confirmed

Question

Good night!

I developed a form, with help from other users here, to send new records to a client’s CRM system. When we send, the data reaches the CRM, but the browser accuses the error message. I’ve run some tests, but I can’t understand what could be wrong.

My form code is as follows::

<form id="formulario" action="" method="get">
    <input type="hidden" id="unidade" name="unidade" value="XXX">
    <input type="hidden" id="chave" name="chave" value="XXX">
<div width="100%">
    <input type="text" id="nome" name="nome" class="campos" placeholder="Seu nome" required>
</div>
<div width="100%">
    <input type="text" id="email" name="email" class="campos" placeholder="Seu e-mail" required>
<div width="100%">
    <input type="tel" id="telefone" name="telefone" class="campos" placeholder="Seu celular" required>
</div>    
<div width="100%" class="motivo">
    <select id ="observacoes" name="observacoes">
    <option value="Selecionar">----- Selecione uma das opções</option>
    <option value="Concurso e vestibular">Concurso e vestibular</option>
    <option value="Inteligência">Inteligência</option>
    <option value="Memória">Memória</option>
    <option value="Profissional">Profissional</option>
    <option value="Alzheimer">Alzheimer</option>
    <option value="Ansiedade">Ansiedade</option>
    <option value="Atenção">Atenção</option>
    <option value="Estresse">Estresse</option>
    <option value="Estudo">Estudo</option>
    </select>
</div>
<div width="100%" align="center">
    <button onClick="form()" id="enviar" name="enviar" type="submit" class="btn-enviar">Enviar</button>
</div>
</form>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function form () {
        $("#formulario").on('submit', function (event) {

            var nome = $("#nome").val();
            var email = $("#email").val();
            var telefone = $("#telefone").val();
            var observacoes = $("#observacoes").val();  
            var unidade = $("#unidade").val();
            var chave = $("#chave").val();


            $.get( `https://crm4u.azurewebsites.net/api/Android/PutLead/${nome};${email};${telefone};${observacoes}/${unidade}/${chave}/`)
            .done(function( data ) {
                alert("Sucesso");
            })
            .fail(function() {
                alert( "Erro" );
            })

            event.preventDefault();

        });
    });
</script>

The page is as follows: https://superaguaruja.com.br/teste/

Does anyone have any idea what might be going on?

Thank you!

Answer 1

I ran a test on your shipping code, and I found that the error response is as follows::

Access to XMLHttpRequest at 'https://crm4u.azurewebsites.net/api/Android/PutLead/teste;teste;teste;Aten%C3%A7%C3%A3o/281/321498639/' from origin 'https://superaguaruja.com.br' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This indicates that the browser could not access the CRM link due to a CORS lock. This is because the link you’re connecting to doesn’t have the same domain as your website. If you want to learn more about CORS, take a look at: https://developer.mozilla.org/en-US/docs/Web/HTTP/Controle_Acesso_CORS

In this case, you would have to enable certain permissions in the CRM that receives this data, but since this is probably a closed system, the most appropriate would be to assemble a code that receives this data and pass it to the CRM link, within your own site.

Thus, the request would be made to a URL of your own site, avoiding cross-origin problems. If you are using PHP, for example, you can build a code that receives the form data and then run a Curl, sending the form data to that link, but all within PHP!

Also remember that putting an "intermediary" code, as I mentioned above, is much safer, as you do not expose the direct CRM link to the users of the page.

I hope I’ve helped!