How to submit a form without refreshing the page? A modal for example

Question

Hello, I made a form that is sending information to my email, but I wish it did not leave the page, without refresh, and appears a simple modal with the phrase "Sent successfully!" for example, how could I do that? Thank you very much!

<?php

if(isset($_POST['email']) && !empty($_POST['email'])) {

    $nome = addslashes($_POST['name']);
    $email = addslashes($_POST['email']);
    $mensagem = addslashes($_POST['message']);

    $to = "[email protected]";
    $subject = "Contato";
    $body = "Nome: ".$nome. "\r\n".
            "Email: ".$email. "\r\n".
            "Mensagem: ".$mensagem;

    $header = "From: [email protected]"."\r\n".
                "Reply-To:".$email."\r\n".
                "X=Mailer:PHP/".phpversion();

    if(mail($to, $subject, $body, $header)) {   

        echo "Email enviado com sucesso";
        
    }else {
        echo "Aconteceu algum erro ao enviar";
       
    }
}
?>

.contato {
    display: none;
    position: relative;
    justify-content: center;
    max-width: 800px;
    width: 100%;
    margin: 80px 10px;
    height: auto;
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s;
}

form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 16px;
    background-color: #E3E4E5;
    padding: 20px;
    width: 700px;
    border-radius: 4px;
}

form h2 {
    padding-left: 5px;
}

input {
    display: flex;
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border-radius: 4px;
    border: 1px solid #C8CACC;
}

textarea {
    display: flex;
    border-radius: 4px;
    border: 1px solid #C8CACC;
    height: 150px;
    width: 100%;
    padding: 10px;
    margin: 5px 0;  
}

.enviar input {
    display: flex;
    justify-content: center;
    background-color: #E1E3E6;
    border: 1px solid #C8CACC;
    border-radius: 4px;
    font-size: 16px;
}

<form id="formulario" action="./email.php" method="post">
    <h2>Contato</h2>

    <p class="nome">
      <input type="text" name="name" id="name" placeholder="Nome" required="required">
    </p>
    <p class="email">
      <input type="email" name="email" id="email" placeholder="E-mail" required="required">
    </p>

    <p class="mensagem">
      <textarea name="message" id="message" placeholder="Deixe sua mensagem"></textarea>
    </p>
    <p class="enviar">
      <input type="submit" name="enviar" id="enviar" for="modal_enviar" value="Enviar">
    </p>
            
</form>

Answer 1

Good night, my friend. Try adding onclick to Submit like this:

<input type="submit" onClick="history.go(-1)" name="enviar" id="enviar" for="modal_enviar" value="Enviar">

In the file of the Insert you will need to redirect to the page, so uses

if(mail($to, $subject, $body, $header)) {   

        header("Location: ".$_SERVER['HTTP_REFERER']."");;

    }else {
        echo "Aconteceu algum erro ao enviar";

    }
}
?>

This way you will send the form, it will run and return to the previous page, you can pass a variable through the url and display the message as you want, hope to have helped.