Formulario de contacto con JQuery y PHP

3 de Octubre - en JavaScript

Los formularios de contacto son una parte importante de una página web, permiten que los usuarios realicen consultas rectas con nosotros de una manera fácil y rápida, además de no exponer direcciones de correos electrónicos. En este tutorial crearemos un formulario de contacto utilizando la librería de Jquery y las funciones Ajax para enviar los datos sin recargar la página. Envio de un formulario con Jquery y Ajax

Diseño del formulario HTML y CSS

El diseño del formulario será simple contendrá 3 campos: nombre, correo, mensaje, todos estos con su identificador id y name. Todos los campos contiene el atributo required, el cual especifica que el campo no puede estar vacío.

Codigo HTML:

<form class="form" id="fc" action="contacto.php" method="POST">
   <h2>Formulario de contacto</h2>

   <div id="res"></div>    
               
   <label>
      <span>Nombre:</span>
      <input id="name" name="name" type="text"  value="" required />
   </label>                             
   <label>
      <span>Correo:</span>
       <input id="mail" name="mail" type="text"  value="" required />
   </label>                             
   <label>
      <span>Mensaje:</span>
      <textarea id="msj" name="msj" type="text"  value="" required ></textarea>
   </label>

   <!-- animacion de enviando ocualta inicalemnte -->
   <div id="load" class="loading">Enviando...</div>

   <input id="send" type="submit" value="Enviar mensaje"/>
</form>

Codigo CSS:

.form{
	width: 480px;
	background: #fff;
	margin: 10px auto;
	padding: 25px 20px; 
	border: 1px solid #cacad9;
	overflow: auto;
	font-size: 13px; 
	color: #575748;
}
@media screen and (max-width: 480px) {
	.form{
		width: calc(95% - 40px);
	}	
}
.form h2{
	font-size: 1.4em;
	font-weight: bold;
	border-bottom: 2px solid #ddd;
	margin-bottom: 20px;	
	padding-bottom: 5px;
}
.form label{
	display: block; 
	margin: 10px 0; 
	overflow: auto;
}
.form label >span{
	width: 15%;
	font-weight: bold;
	float: left;
	padding-top: 8px;
	padding-right: 1%;
	font-size: 14px;
}
.form input[type=text], 
.form textarea {
	box-sizing: border-box;
	border: 1px solid #C2C2C2;
	box-shadow: 1px 1px 4px #EBEBEB;
	border-radius: 3px;
	padding: 8px 1.5%;
	outline: none;
	resize: none;
	width: 81%;
	float: right;
	font: 1.1em Arial, Helvetica, sans-serif;
}
.form textarea {
	height: 200px;
	white-space: normal;	
	line-height: 1.7em;
}

.form input[type=text]:focus, 
.form textarea:focus{
	border: 1px solid #00A1D6;
}
.form input[type=submit], 
.form input[type=button]{
	border: none;
	padding: 8px 15px;
	background: #00A1D6;
	color: #fff;
	box-shadow: 1px 1px 4px #DADADA;
	border-radius: 3px;
	float: right;
	display: block;
}
.form input[type=submit]:hover,
.form input[type=button]:hover{
	background: #006cd9;color: #fff;
}
.loading{
	height: 32px;
	display: none;
	background: url('load.gif') no-repeat;
	padding: 7px;
	padding-left: 40px;
	color: #353526; 
	font-weight: bold;
	width: auto; 
	float: right;
}
.fail{
	width: 95%;
	color: #ff4c4d;
	border: 2px solid #ff4c4d;
	border-radius: 4px;
	padding: 4px 10px;
}

Control de envió del formulario con Jquery y Ajax

Se utiliza Javascript para detener el envió del formulario al presionar el botón de “enviar”, se realizara una pre validación de los campos (la validación final se realizara mediante PHP y evitar que los datos sean enviados evadiendo la validación por JavaScript).

Una vez que los datos sean correctos serán enviados mediante Ajax para no recargar la página, además se determinara un tiempo máximo de espera de 10 segundos antes de mostrar un error. Los datos recibidos estarán en formato Json, se decodificaran y verificaran si hay un error o el mensaje fue aceptado.

//Muestra un error en la pantalla y vuleve a mostrar el boton de enviar
function ShowError(tx){
	$('#res').addClass('fail');
	$('#res').html(tx);
	$('#load').hide();
	$('#send').show();
}

//Validar email
function ValEmail(mail) {
	var reglas = /^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,4})?$/;
	return reglas.test(mail);
}
	
$('#fc').submit(function(e){
	//Ocultamos el boton de enviar y mostramos el icono animado
	$('#send').hide();
	$('#load').show();
		
	//Prevenir evento por defecto
	e.preventDefault();
	
	//Validando datos
	//Esto solo es una prevalidacion ya que los datos seran validados correctamente en el servidor		
	if($('#name').val().length < 5){//Nombre
		ShowError('El nombre debe tener al menos 20 caracteres.'); 
		return;
	}
	if(!ValEmail($('#mail').val())){//Correo
		ShowError('El correo electronico no es valido.'); 
		return;
	}
	if($('#msj').val().length < 20){//Correo
		ShowError('El mensaje debe tener al menos 20 caracteres.'); 
		return;
	}
	
	$.ajax({
		type: 'POST',
		url: $(this).attr('action'),
		data: $(this).serialize(),
		timeout: 10000,//tiempo maximo de espera 10s
		
		//Funcion al recibir respuesta
		success: function(data){	
			console.info(data);
			//Decodificamos el mensaje en formto json
			var r = JSON.parse(data);
			
			if(r.status=="1")
				//Mensaje enviado y proceaado con exito
				$('#fc').html('<center>El mensaje ha sido enviado</center>');
			else 
				//Mostrando el mensaje de error devuelto por el servidor
				ShowError(r.msj);
		},
		
		//funcion que maneja errores al enviar
		error: function (xhr, ajaxOptions, thrownError){
			console.info(xhr.status);
			if(thrownError=='timeout') 
				ShowError('Tiempo de espera superado'); 
			else 
				ShowError('Se ha producido un error');
		}
	})
});

Procesamiento de datos del lado del servidor con PHP

Los datos se recibirán por el método POST, estos serán revisados y validados en caso de no ser aprobados se enviara un mensaje al cliente en formato Json, con el código de error y el mensaje. Una vez que los datos sean correctos esto podrán ser guardados en una base de datos o enviarse directamente a una correo electrónico.

//Evitar el acceso directo
if($_POST==null) exit();

//Funcion que formatea el mensaje de error en formato json y sale del script
function Error($msj){
	echo '{"status": "0", "msj": "'.$msj.'"}';
	exit;
}
	
//Funcion para validar los datos
function ValDato($dato){
	$dato = trim($dato);//Eliminar espacion a los lados
	$dato = strip_tags($dato);//Eliminar etiquetas HTML
	$dato = addslashes($dato); // **** usar "stripcslashes" para restaurar valores *** 
	return $dato;
}
	
//Recolectando valores de POST
//Verificar que los valores existan y validarlos
if(isset($_POST['name']))
	$name = ValDato($_POST['name']);
else
	Error('Error');
	
if(isset($_POST['mail']))
	$mail = ValDato($_POST['mail']);
else
	Error('Error');
	
if(isset($_POST['msj']))
	$msj = ValDato($_POST['msj']);
else
	Error('Error');


// Validando los datos	
//Verificando el numero minimo de caracteres
if(strlen($name)<5) 
	Error('El nombre debe de tener al menos 5 caracteres ');
	
//Se utiliza la funcion filter_var para validar el correo
if(!filter_var($mail, FILTER_VALIDATE_EMAIL)) 
	Error('El correo no es valido.');

if(strlen($msj)<20) 
	Error('Se necesitan mas detalles para el mensaje.');	
	
//Los datos son validos
//Guardar en la base de datos o enviar por email
	
	
//Mensaje de respuesta en formato json
echo '{"status": "1", "msj": "ok"}';

Ejemplo

DemoDescargar
Compartir