Code Snippets: Gestionando formularios con php y ajax

Imagen de Code Snippets: Gestionando formularios con php y ajax

Code Snippets: Gestionando formularios con php y ajax

  • Autor: fjavimartin

  • Fecha de Creación: 25/09/2016

  • Categorías:

    • Code snippets,
    • Html,
    • Php,
    • Ajax,
    • Formularios,
    • PHPMailer,
    • Javascripts

El objetivo de este artículo será la creación de un formulario que será procesado mediante un fichero .php al que enviaremos el contenido del formulario mediante una llamada ajax y este a su vez enviará el contenido del formulario a un correo electrónico.

Las tecnologías que utilizaremos serán las siguientes:

  • Bootstrap: Utilizaremos esta librería para el estilo de nuestro formulario.
  • Jquery: Utilizaremos esta librería para seleccionar el formulario, emular el botón de envío del formulario y realizar la llamada ajax.
  • PHP: Lenguaje de programación utilizado para gestionar los datos del formulario.
  • PHPMailer: Librería php que nos permitirá enviar el correo electrónico con el contenido del formulario.

1. Creación del formulario

Una vez marcado el objetivo el primer paso será crear el código de nuestro formulario:

<form role="form" id="formulario-contacto">
	<div class="form-group">
      	<label for="con-nombre">Nombre</label>
      	<input type="text"  required="required" class="form-control" id="con-nombre" placeholder="Introduce tu nombre y apellidos" name="nombre">
      </div>
      <div class="form-group">
      	<label for="con-asunto">Asunto</label>
      	<input type="text"  required="required" class="form-control" id="con-asunto" placeholder="Introduce el asunto del mensaje" name="asunto">
      </div>
      <div class="form-group">
      	<label for="con-mensaje">Mensaje</label>
      	<textarea rows="5"  required="required" class="form-control" id="con-mensaje" placeholder="Introduce el mensaje" name="mensaje"></textarea>
      </div>
      <input class="btn btn-default" placeholder="Enviar" id="enviar-contacto"></input>
      <div id="respuesta-contacto"></div>
</form>

Todo parece normal, pero echareis de menos que nuestro formulario tenga definidas las propiedades method, action y que además no tenga ningún botón enviar. Todo tiene su explicación, no necesitamos ninguna de las anteriores propiedades definidas porque será en la llamada ajax donde tendremos que definir esas mismas propiedades y tampoco necesitamos un botón o enlace type=”submit” porque cada vez que pulsamos en este botón la página se recarga y este comportamiento es justo el que queremos eliminar.

Además de todo lo anterior hemos creado el div id=”respuesta-contacto” que será donde se muestre el resultado que nos devuelva el php.

Será muy importante que nos fijemos el valor de la propiedad “name” en cada uno de los campos puesto que será este el nombre del índice en el array _POST que utilizaremos después en el fichero php encargado de procesar el formulario.

2. Código javascript

El siguiente paso será definir el código javascript que nos permita realizar la llamada ajax que envíe el contenido del formulario a nuestro php. Esta llamada se desencadenará cuando el usuario pulse en el botón id=”enviar-contacto” por lo que tendremos que definir un evento “click” tal y como podemos ver en el siguiente código:

$('#enviar-contacto').click(function() {
	var url ='php/contacto.php';
      $.ajax({
        type: "POST",
        url: url,
        data: $('#formulario-contacto').serialize(),
        success: function(data)
        	{
        		$('#respuesta-contacto').html(data);
          	}
        });
});

Utilizaremos la variable ‘url’ para definir la ruta al php encargado de gestionar los campos introducidos en el formulario, haremos una llamada “POST” y serializaremos el contenido a enviar. Por último recuperamos lo que nos devuelva el php y lo mostramos en el espacio destinado al efecto.

3. Código PHP

Por último nos queda el fichero “contacto.php” encargado de recoger el formulario, procesar sus campos y enviar un correo electrónico a la dirección deseada:

  require("../vendor/PHPMailer/PHPMailerAutoload.php");
  $mail = new PHPMailer();
  
  $nombre = addslashes($_POST['nombre']);
  $asunto = addslashes($_POST['asunto']);
  $mensaje = addslashes($_POST['mensaje']);
  
  $contenido = "<p>Ha recibido la siguiente solicitud:</p>".
      "<p>".
      "Nombre: ".$nombre."<br />".
      "Asunto: ".$asunto."<br />".
      "Mensaje: ".$mensaje."<br />".
      "</p>";
  
  $mail->IsSMTP();
  $mail->SMTPAuth = true;
  $mail->Host = "test.probando.com"; // SMTP a utilizar. Por ej. smtp.elserver.com
  $mail->Username = "usuario"; // Correo completo a utilizar
  $mail->Password = "Contraseña"; // Contraseña
  $mail->Port = 25; // Puerto a utilizar
  
  $mail->From = "origen@probando.com"; // Desde donde enviamos (Para mostrar)
  $mail->FromName = "Nuestro nombre";
  
  $mail→AddAddress("destino@probando.com"); // Esta es la dirección a donde enviamos
  $mail->IsHTML(true); // El correo se envía como HTML
  $mail->Subject = "Asunto Correo"; // Este es el titulo del email.
  $mail->Body = $contenido; // Mensaje a enviar
  $exito = $mail->Send(); // Envía el correo.
  
  if($exito) echo "<p>El correo fue enviado correctamente.</p>";
  else echo "<p>Hubo un problema con el formulario.</p>";

El código de nuestro fichero no tiene demasiada dificultad, simplemente recogemos en distintas variables el contenido de los campos del formulario, configuramos la clase mail con los valores comunes de un servidor de correo smtp y enviamos el correo. Mediante un simple ‘if’ controlaremos si el envío del correo a tenido éxito o no y devolvermos un mensaje.

Nos ha quedado genial, pero nada es perfecto. Al no utilizar un botón type=”submit” no podremos validar los campos del formulario y tendremos que hacerlo mediante javascript. Si alguien tiene una opción mejor que no dude en manifestarse.

Disfrutar!!!!!!

Referencias

Todos los Derechos Reservados © 2016

Funciona con Drupal