Modal help for confirmation of email sending and data validation

Asked

Viewed 132 times

-1

I have the following form on my website

<form class="form-horizontal" name="form1" method="post" action="enviaemail.php">
							<div class="form-group">
								<div class="col-sm-4" style="position:relative">
									<input type="text" name="nome" data-new-placeholder="Qual o seu nome?" class="form-control label_better" placeholder="Nome">
								</div>
								<div class="col-sm-4">
									<input type="text" name="email" class="form-control label_better" placeholder="Email">
								</div>
								<div class="col-sm-4">
									<input onkeypress="mascara(this,telefone)" onfocus="this.style.backgroundColor='#FFFFCC'; this.style.border='2px solid #FF9933'" onblur="this.style.backgroundColor='#CCCCCC'; this.style.border='2px solid #000000'"
 type="text" name="Telefone" class="form-control label_better" placeholder="Telefone">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-12">
									<textarea class="form-control label_better" name="msg" placeholder="Sua mensagem.." rows="7"></textarea>
								</div>
							</div>
							<div class="form-group commands">
								<button class="btn btn-primary" type="submit" name="Submit" value="Enviar" >Enviar Menssagem</button>
							</div>
						</form>

and the file sent.php 

<?php 

require_once("class/class.phpmailer.php");
error_reporting(E_ALL);
error_reporting(E_STRICT);
date_default_timezone_set('America/Sao_Paulo');
$ip = getenv("REMOTE_ADDR");
// variáveis que guardam os dados vindo do form
$nomeusuario = utf8_decode($_POST['nome']);
$emailusuario = utf8_decode($_POST['email']);
$Fone = utf8_decode($_POST['Telefone']);
$mensagem = utf8_decode($_POST['msg']);
 
$Email = new PHPMailer();
$Email->SetLanguage("br");
$Email->IsMail();
$Email->IsHTML(true);
 
$Email->From = $emailusuario;
$Email->FromName = $nomeusuario;
$Email->AddAddress("[email protected]");
$Email->Subject = "Fale Conosco";
$Email->AddBcc($emailusuario);  
$body = "<html>
<head>
<meta charset='utf-8'>
</head>
<body>
Este é um email da página de contatos do Site lmservice.com.br
<br>
Cliente:'.$nomeusuario.'
<br>
 E-mail: '.$emailusuario.'
<br>
  Numero de contato: '.$Fone.'
<br>
  Com a seguinte mensagem: </td> '.$mensagem.'
 </body>
 </html>";
 
$Email->MsgHTML($body); 
$Email->AltBody = "para conseguir visualizar esse email utilize um visualizador de e-mail com suporte a HTML";
$Email->WordWrap = 50;
             
if(!$Email->Send()) {
  echo "A mensagem não foi enviada.";
  echo "Mensagem de erro: " . $Email->ErrorInfo;
} else {
  echo "Mensagem enviada!";
} 
?>

My doubts are as follows: How do I validate form fields.

And how do I display the confirmation on the index itself with a modal, without having to open another page.

form validation modal phpmailer

1 answer

0

As for the validation of the data I do not understand anything from php. If you want an easy way to send emails through your page you can use Emailjs

HTML:

<div class="row">
                <div class="col-lg-12 text-center">
                    <form name="sentMessage" id="myform" method="post">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Seu Nome *" name="from_name" id="name"   required="" data-validation-required-message="Por favor insira seu nome.">
                                    <p class="help-block text-danger"></p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="email" class="form-control" placeholder="Seu E-mail *" name="reply_to" id="email" required="" data-validation-required-message="Por favor insira seu endereço de e-mail.">
                                    <p class="help-block text-danger"></p>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <textarea class="form-control" placeholder="Sua Menssagem *" name="message_html" id="message" required="" data-validation-required-message="Por favor insira uma Menssagem."></textarea>
                                    <p class="help-block text-danger"></p>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 text-center">
                                <div id="success"></div>
                                <button type="submit" class="btn">Enviar Menssagem</button>

Javascript:

<script type="text/javascript">
       (function(){
          emailjs.init("-----SEU USER AQUI-----");
       })();
</script>

<script> var myform = $("form#myform");
    myform.submit(function(event){
        event.preventDefault();

        var params = myform.serializeArray().reduce(function(obj, item) {
         obj[item.name] = item.value;
         return obj;
      }, {});

      // Change to your service ID, or keep using the default service
      var service_id = "---TIPO DE SERVIÇO AQUI, PODE SER SMTP---";

      var template_id = "template_uGZ4OQN2";
      myform.find("button").text("Enviando...");
      emailjs.send(service_id,template_id,params)
        .then(function(){ 
           alert("Enviado");
           myform.find("button").text("Enviar");
         }, function(err) {
           alert("Falha !\r\n Response:\n " + JSON.stringify(err));
           myform.find("button").text("Enviar");
        });
      return false;
    }); </script>

To make the modal you can use an iframe with the Fancybox

<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
        <script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>

<body>   
<a href="SUA PAGINA COM O FORM.html" data-fancybox data-options='{"type" : "iframe", "iframe" : {"preload" : false}}'> BOTÃO, IMAGEM, ETC... QUE IRÁ ABRIR O FORM</a>
</body>

At least that’s what I use on my websites :)

Browser other questions tagged form validation modal phpmailer

You are not signed in. Login or sign up in order to post.