help with form and send confirmation popup

0

Hello, I need help, I'm trying to make a contact form so I can get it in the email and I wanted it to pop up instead of the page to confirm sending.

**mail.php**

<?php
if (isset($_POST['formSubmit1'])) {
  // Process the form
  $message = "Thank you for registering! We will respond to your request shortly";
  $name = $_POST['formName'];
  $email = $_POST['formEmail'];
  $telemovel = $_POST['formTelem'];
  $comments = $_POST['formMessage'];
  $date = gmdate("M d Y");
}else{
	echo " submeter form primeiro!";
		exit;
}

$to = "meu mail";
$subject = "Registration Submission";
$body = " Date: $date \n Registrant Name/Name's: $name \n Registrant E-mail: $email \n \n Contacto: $telemovel \n \n User Comments: \n $comments \n \n";

mail($to,$subject,$body);

}


?> <
!doctype html >
  <
  html >
  <
  head >
  <
  meta charset = "utf-8" >
  <
  title > Admin panel < /title> < /
  head >

  <
  body >
  <
  h1 > ::DADOS RECEBIDOS:: < /h1> <
p > & nbsp; < /p> <
h1 > <?php echo $message; ?> < /h1>

  <
  /body> < /
  html >
<form action="mail.php" method="post">
  <div class="single-form">
    <input class="form-control" type="text" placeholder="Nome" name="formName" id="formName">
  </div>
  <div class="single-form">
    <input class="form-control" type="text" placeholder="Email" name="formEmail" id="formEmail">
  </div>
  <div class="single-form">
    <input class="form-control" type="text" placeholder="Telefone" name="formTelem" id="formTelem">
  </div>
  <div class="single-text-area">
    <textarea class="form-control" name="formMessage" id="formMessage" cols="30" rows="10"></textarea>
  </div>
  <div class="single-submit">
    <input name="formSubmit1" type="button" class="form-control text-center" id="formSubmit1" value="Submit" alt="">
  </div>
    
asked by anonymous 02.11.2018 / 16:02

1 answer

1

You can use the modal of the boostrap to appear and the user confirms. Here is an example using bootstrap 4:

$('#confirmar').on('click', function () {
  $('.modal').modal('show')
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Título do modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Deseja confirmar o envio de email?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Confirmar</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
      </div>
    </div>
  </div>
</div>

<button id="confirmar">Confimar envio</button>
    
02.11.2018 / 20:07