Send data to external URL via form, uploaded to the same page

Question

Hello!

I am a beginner in PHP and am putting together a form to receive data through POST, and print them into a custom URL. The purpose of the form is to register leads on a third CRM platform, which only accepts the inclusion of data in this way.

The structure of the URL is as follows: https://crm4u.azurewebsites.net/api/Android/PutLead/< NAME >;< E-MAIL >;< TELEPHONE >;< REMARKS >/281/739164197

Apparently I’m able to execute the script and manipulate the address, but I was only able to do this with the header function("Location").

Form:

<form id="formulario" action="mail_lead_santos.php" method="post">
    Nome: <input type="text" id="nome" name="nome"><br>
    E-mail: <input type="text" id="email" name="email"><br>
    Telefone: <input type="tel" id="telefone" name="telefone"><br>
    Motivo: <select id ="observacoes" name="observacoes">
    <option value="Opção 1">Opção 1</option>
    <option value="Opção 2">Opção 2</option>
    <option value="Opção 3">Opção 3</option>
 </select><br>
    <input id="enviar" name="enviar" type="submit" value="Enviar!">
</form>

mail_lead_santos.php

<?php

 $nome = $_POST['nome'];
 $email = $_POST['email'];
 $telefone = $_POST['telefone'];
 $observacoes = $_POST['observacoes'];


$final = 'Location: https://crm4u.azurewebsites.net/api/Android/PutLead/'.$nome.';'.$email.';'.$telefone.';'.$observacoes.';'.'/281/739164197';

header($final);

?>

With this, after completing the form, naturally the user falls into this final URL. How could I perform this function through the form, but keep it on the fill-in page? I understand that the best way is perhaps through jquery/ajax, but how to work together with the header function?

Thank you!

Answer 1

As pointed out by @Matheus in the comments, I’m running a test with jquery and GET - another topic I’m a beginner on. I did some research and arrived at the following result:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#enviar").click(function () {
            var nome = $("#nome").val();
            var email = $("#email").val();
            var telefone = $("#telefone").val();
            var observacoes = $("#observacoes").val();
            var url = "https://crm4u.azurewebsites.net/api/Android/PutLead/" + encodeURIComponent(nome) + ";" + encodeURIComponent(email) + ";" + encodeURIComponent(telefone) + ";" + encodeURIComponent(observacoes) + "/281/739164197";
            window.location.href = url;
        });
    });
</script>

<form id="formulario" action="" method="get">
    Nome: <input type="text" id="nome" name="nome"><br>
    E-mail: <input type="text" id="email" name="email"><br>
    Telefone: <input type="tel" id="telefone" name="telefone"><br>
    Motivo: <select id ="observacoes" name="observacoes">
    <option value="Opção 1">Opção 1</option>
    <option value="Opção 2">Opção 2</option>
    <option value="Opção 3">Opção 3</option>
 </select><br>
    <input id="enviar" name="enviar" type="submit" value="Enviar!">
</form>

When I fill in the form, it returns the following URL: https://urldomeusite.com.br/? name=Teste&email=test%40teste.com.br&telefone=11999999999&observacoes=Op%C3%A7%C3%A3o+1&enviar=Send%21

In addition to not sending to the desired URL and in the right format, the form is also sending the text of the commit button. Another important point, as pointed out by @Matheus, is that the external platform validates the data.

Can someone give me a light, in any of the ways? :/

Thank you!

Answer 2

Try something like that:

<form id="formulario" action="" method="get">
    Nome: <input type="text" id="nome" name="nome"><br>
    E-mail: <input type="text" id="email" name="email"><br>
    Telefone: <input type="tel" id="telefone" name="telefone"><br>
    Motivo: <select id ="observacoes" name="observacoes">
    <option value="Opção 1">Opção 1</option>
    <option value="Opção 2">Opção 2</option>
    <option value="Opção 3">Opção 3</option>
 </select><br>
    <input id="enviar" name="enviar" type="submit" value="Enviar!">
</form>

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

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


            $.get( `sua_url_externa_aqui/${nome};param2;...`)
            .done(function( data ) {
                alert("Sucesso");
            })
            .fail(function() {
                alert( "Erro" );
            })

            event.preventDefault();

        });
    });
</script> 

This way you will "stop" the form’s Submit event, take the values and create a GET request for the external URL you want by passing the parameters in it.

Where are the successful and error Alerts you can respectively give feedback to the user by displaying a message of success or error according to their need.

I hope I’ve helped.

Answer 3

@Matheus,

Thanks for the help! I edited the code and includes two Hidden fields to send other information I need through the URL, and the end was like this:

<form id="formulario" action="" method="get">
    <input type="hidden" id="unidade" name="unidade" value="281">
    <input type="hidden" id="chave" name="chave" value="739164197">
    Nome: <input type="text" id="nome" name="nome"><br>
    E-mail: <input type="text" id="email" name="email"><br>
    Telefone: <input type="tel" id="telefone" name="telefone"><br>
    Motivo: <select id ="observacoes" name="observacoes">
    <option value="Opção 1">Opção 1</option>
    <option value="Opção 2">Opção 2</option>
    <option value="Opção 3">Opção 3</option>
 </select><br>
    <input id="enviar" name="enviar" type="submit" value="Enviar!">
</form>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#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>

After filling in the form, it returns an error message. I did something wrong in including this data by Hidden?