Formulario de contacto con PHP y AJAX

Los formularios de contacto son una caracteristica fundamental que poseen los sitios, los cuales nos permiten tener un acercamiento más proximo con aquellos quienes visitan nuestro sitio, ya sea para mantenerlo al tanto de las últimas novedades, ofertas, promociones, etc.

AJAX, JavaScript Asíncrono y XML, (Asynchronous JavaScript And XML), es la técnica por defecto para realizar interacciones con los usuarios y el servidor.

JavaScript, es el lenguaje de programación multiparadigma del lado del cliente, que hace vida en el navegador, que nos permite realizar aplicaciones web sumamente intuitivas.

La parte asíncrona de todo éste cuento es lo que nos abre muchisimas puertas en el desarrollo de un sitio web, esa posibilidad de establecer una conexión en segundo plano con el servidor sin que ésta interrumpa la visualización o comportamiento del sitio. (Muy importante a la hora de desarrollar teniendo en mente la experiencia de usuario e interfaces, UI/UX)

En cuanto a XML, no hace referencia al meta-lenguaje, si no, a XMLHttpRequest, un objeto, contenido en el DOM de nuestros navegadores con el cual podemos establecer dicha conexión asíncrona hacía un servidor web, el formato de dicha transferencia de datos puede ser, entre otros: HTML, XML, Json e inclusive texto plano.

PHP siendo el lenguaje interpretado de uso general que implementaré para éste ejemplo sencillo de un formulario utilizando estas tecnologias.

Para que todo lo que desarrollemos funcione en nuestra instancia en producción, debemos verificar que nuestro servidor web nos proporcione la funcionalidad de envíar correos electrónicos, SMTP: Protocolo simple de transferencia de correo (Simple Mail Transfer Protocol)

Aquí les dejo unos links utiles de cómo hacerlo, también es recomendable contactar con el soporte del servicio de hosting que estén utilizando.

• https://www.lifewire.com/what-are-the-gmail-smtp-settings-1170854
• https://www.digitalocean.com/community/tutorials/how-to-use-google-s-smtp-server

Para arrancar con un ejemplo sencillo, partimos de la siguiente estructura HTML:

<form id="contactform" action="enviarcorreo.php"method="POST">
	<div id="campos">
		<input name="correo"type="text"/>
		<input name="asunto"type="text"/>
		<textarea name="mensaje"type="text"></textarea>
		<button type="submit">Enviar mensaje</button>
	</div>
</form>

siendo el action del formulario, el script PHP que se ejecutara una vez el formulario sea envíado, el input que posea el parametro type=“submit” de nuestro formulario.

Dentro de un archivo .js que llamamos, se encuentra lo siguiente:

$(document).ready(function(){
	$('#contactform').submit(function(event){

		event.preventDefault();

		$.ajax({
			type: 'POST',
			url: $(this).attr('action'),
			data: $(this).serialize(),
			success: function(data){
				//Cuando la interacción sea exitosa, se ejecutará esto.
			},
			error: function(data){
				//Cuando la interacción retorne un error, se ejecutará esto.
			}
		}
	})
});

Donde:

$(document).ready(function(){ 

Es la instrucción que le indica al navegador que la siguiente función estará disponible en cuanto el documento esté completamente cargado (document ready), siendo el documento la url actual y todos sus recursos.

$('#contactform').submit(function(event){

Ésto lo que nos dice, es que al elemento HTML con el id #contactform, cuando la acción de enviar (submit) sea llevada acabo, realizará la función que querramos, y le pasamos de parametro a dicha función, el evento que acaba de ocurrir (submit-post)

event.preventDefault(); 

Esta función, cancela la acción por defecto de los navegadores al ser realizado una acción del tipo submit-post, que es, redirigirse a la url del action del formulario, cosa que no queremos. Pues no queremos que el navegador refresque,

  $.ajax({
      type: 'POST',
      url: $(this).attr('action'),
      data: $(this).serialize(),

Aquí, le estamos diciendo al navegador, atraves de javascript (recuerden que esto se encuentra del lado del cliente), que vamos a realizar una interacción con el servidor, utilizando AJAX. ($.ajax() es un metodo de JQuery).
Le especificamos que dicha petición será del tipo POST, le pasamos una URL, en donde se encuentran las instrucciones de dicha petición, en este caso
$(this).attr(‘action’), hace referencia al atributo action que posee nuestro formulario (enviarcorreo.php)
y que los datos, serán los mismos suministrados por dicho formulario pero serializados.

Posteriormente, en orden de ejecución, ahora corresponderia nuestro archivo php, el cual es la acción de nuestro formulario:
El código más simple para esto seria el siguiente:

 mail("[email protected]", $_POST['asunto'], $_POST['mensaje']); ?>

Lo cual, entenderán, si ya vieron el curso de PHP, tenemos estas variables inicializadas, $_POST[‘parametro’], únicamente si el action del post fue llamado.

Un esquema completo del ejemplo sería:

Sé que quedaron muchos conceptos por fuera, pero de lo contrario el post se haría aún más largo. Esperemos en un futuro cercano Platzi nos nutra con tecnicas nuevas e innovadoras para interactuar con servidores de manera asíncrona.

Link demo del formulario: https://ajaxphpform.herokuapp.com/
Link del repositorio en GitHub: https://github.com/Otacon98/PhpAjaxForm