jueves, 8 de agosto de 2019

Procesar un formulario de contacto sin recargar la página

Hola Arcanitos, despues de mucho tiempo vuelvo a escribir en mi blog.

En esta ocasión les voy a mostrar como procesar un formulario de contacto sin recargar la página Lo primero es crear un formulario de contacto, recuerden que en su HTML deben importar el código fuente de jquery (línea 3).
Yo hago los HTML super simples para no confundirlos con diseño, ustedes pueden hacerlo tan bello como quieran

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
  <body>
    <h2>Contáctanos</h2>
    <div id="mensaje"></div>
    <form method="post" action=""  id="formulario" name="contact">
        Nombre <br>
 <input type="text" id="nombre" name="nombre" placeholder="Tu nombre" /><br><br>
 Email<br>
 <input type="text" id="email"  name="email"  placeholder="Tu Email" /><br><br>
 Mensaje<br>
        <textarea id="texto_mail" name="texto_mail"  placeholder="Mensaje" rows="4" cols="40"></textarea><br><br>
        <div style="width: 150px; height: 40px; background-color:#3498db;" onclick="enviar_contacto()">Enviar</div>
    </form>  
  </body>
</html>

El siguiente paso es crear el javascript para tomar los datos del formulario y enviarlos a ser procesados. Serán procesados por un archivo PHP llamado "procesar_contacto.php", Como ya les he contado, para tomar el contenido de un input con jquery debemos hacerlo asi

nombre: $('#nombre').val()

Dentro de la funcion "$.post" ponemos todas la información que enviaremos al "procesar_contacto.php". Y por último las acciones a tomar cuando el PHP de procesamiento responda.
En este caso mostraremos un mensaje de "OK" y esconderemos el formulario.

<script>
  function enviar_contacto()
  {
    $.post(
        "procesar_contacto.php",
 {
           action:"enviar_mensaje",
    nombre: $('#nombre').val(),
    email: $('#email').val(),
    mensaje: $('#texto_mail').val(),
 },
 function(data, status)
 {
   if(status=='success')
   {
     var serverresponse = JSON.parse(data);
     console.log(serverresponse);
     if(serverresponse.data=='ok')
     {
  $('#mensaje').slideDown();
  $("#mensaje").text('Su mensaje será respondido a la brevedad');
  $("#formulario").slideUp();
     }
     else
     {
  $('#mensaje').slideDown();
  $("#mensaje").text('Intente nuevamente');
     }
   }
   else
   {
     $('#mensaje').slideDown();
     $("#mensaje").text("Tenemos un problema temporal, inténtalo más tarde...");
          }
 }
    );
  }
</script>
En el archivo "procesar_contacto.php", tomaremos las variables que enviamos desde la función anterior y conformaremos un mail (los $headers son para evitar que el email se vaya a spam o cosas asi). Luego, si el mail se envió correctamente devolveremos en modo de JSON un "ok" solamente como señal que funcionó bien.
<?php
$action = $_POST['action']; 
if($action=="enviar_mensaje") 
{ 
    $nombre  = $_POST['nombre']; 
    $email   = $_POST['email']; 
    $mensaje = $_POST['mensaje'];  
 
    $headers = "MIME-Version: 1.0\r\n";
    $headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
    $headers = "From: easyparty@easyparty.cl\r\n";
    $headers .= "Reply-To: $email\r\n";
    $headers .= "Return-path: $email\r\n"; 
    $mensajenuevo='
 Nombre: '.$nombre.'
 Correo: '.$email.'

 ====== Mensaje ========
 '.$mensaje.'
 =======================
 ';

    if(mail("tumail@mail.com","Contacto desde tu web", $mensajenuevo,$headers))
    {
       $data = 'ok';
    } 
    else 
    {
 $data = 'no';
    }  
    $json = array('data' => $data);
    echo json_encode($json);
}
 

Si quieren probar que esto funciona pueden hacerlo haciendo click aquí LINK
Espero les sirva!!
saludos! :)

No hay comentarios:

Publicar un comentario