Introducción

Hoy os traigo un básico que debería estar en cualquier pagina web, el formulario de contacto.

Las características que tiene este formulario de contacto son:

  • Adaptable a dispositivos moviles.
  • Datos validados correctamente.
  • Fácil adaptación para añadir mas campos.

Para ello vamos a utilizar JQuery, PHP, CSS3 y por su puesto HTML.

 

undefined

 

Ejemplo Practico

Código del archivo contacto.html
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Formulario de Contacto - Albertogon.com</title>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <!-- Agregamos la libreria de JQuery -->
  <link rel="stylesheet" type="text/css" href="form_styles.css">
</head>
<body>
<div id="divCarga" style="display:none;"><img src="loading.gif" class="ajax-loader" /></div>
	<h2 id="tituloContacto">Formulario de Contacto</h2>
	<div id="thanksMSG" style="display:none;">
		<p>
			<br>Su mensaje ha sido enviado correctamente.
			<br>Nos pondremos en contacto en la mayor brevedad posible.<br>
			<strong>Muchas gracias por su interes.</strong>
		</p>
	</div>
	<div id="formContacto">
		<form id="contact-form" class="contact-form">
			<fieldset>
				<div class="coll-1">
					<div class="txt-form">Nombre<span>*</span></div>
					<label class="name">
						<input id="nombre" type="text" placeholder="Nombre*:"><br>
					</label>
				</div>
				<div class="coll-2">
					<div class="txt-form">Email<span>:</span></div>
					<label class="email">
						<input id="email" type="email" placeholder="Email*:"><br>
					</label>
				</div>
				<div class="coll-3">
					<div class="txt-form">Telefono:</div>
					<label class="phone notRequired">
						<input id="tel" type="tel" placeholder="Telefono:"><br>
					</label>
				</div>
				<div>
					<div class="txt-form">Comentarios/Consultas<span>*</span></div>
					<label class="message">
						<textarea id="comentario" placeholder="Comentarios*:"></textarea><br>
					</label>
				</div>
			</fieldset>
			<br><br>
			<div class="buttons-wrapper clearfix">
				<a class="btn link1" id="btnEnviarContacto" data-type="submit">Enviar</a><span>*Campos Obligatorios</span>
			</div>
			<script>
				/*ESTILOS POR DEFECTO*/
				$STYLES_NORMAL_BORDER="none";
				$STYLES_NORMAL_BACKGROUND="#e7e7e7";
				$STYLES_ERROR_BORDER="2px solid rgb(248, 152, 152)";
				$STYLES_ERROR_BACKGROUND="rgb(252, 188, 188)";
				
				/*VALIDAMOS AL ESCRIBIR EN EL NOMBRE*/
				$('#nombre').change(function() {
					ValidarNombre(this);
				});
				
				/*VALIDAMOS AL ESCRIBIR EN EL EMAIL*/
				$('#email').change(function() {
					ValidarEmail(this);
				});
					
				/*VALIDAMOS AL ESCRIBIR EN EL COMENTARIO*/
				$('#comentario').change(function() {
					ValidarComentario(this);
				});
			
				/*Funciona que valida que el campo nombre no este vacio
				  Devuelve: true o false
				*/
				function  ValidarNombre(obj){
					if ($(obj).val()!=""){
						$(obj).css("background", $STYLES_NORMAL_BACKGROUND); 
						$(obj).css("border", $STYLES_NORMAL_BORDER);
						return true;
					}else{
						$(obj).focus(); 
						$(obj).css("border", $STYLES_ERROR_BORDER); 
						$(obj).css("background", $STYLES_ERROR_BACKGROUND);
						return false;
					}
				}
				
				/*Funciona que valida que el campo email contenga una direccion valida y no este vacio.
				  Devuelve: true o false
				*/
				function  ValidarEmail(obj){
					if ($(obj).val()!=""){
						var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
						if (testEmail.test($(obj).val())){
							$(obj).css("background", $STYLES_NORMAL_BACKGROUND); 
							$(obj).css("border", $STYLES_NORMAL_BORDER);
							return true;
						}else{
							$(obj).focus(); 
							$(obj).css("border", $STYLES_ERROR_BORDER); 
							$(obj).css("background", $STYLES_ERROR_BACKGROUND);
							return false;
						}
					}else{
						$(obj).focus(); 
						$(obj).css("border", $STYLES_ERROR_BORDER); 
						$(obj).css("background", $STYLES_ERROR_BACKGROUND);
						return false;
					}
				}
				
				/*Funciona que valida que el campo de texto no este vacio.
				  Devuelve: true o false
				*/
				function  ValidarComentario(obj){
					if ($(obj).val()!=""){
						$(obj).css("background", $STYLES_NORMAL_BACKGROUND); 
						$(obj).css("border", $STYLES_NORMAL_BORDER);
						return true;
					}else{
						$(obj).focus(); 
						$(obj).css("border", $STYLES_ERROR_BORDER); 
						$(obj).css("background", $STYLES_ERROR_BACKGROUND);
						return false;
					}
				}
			
				/*AL PULSAR EL BOTON COMPROBAMOS QUE ESTE TODO CORRECTO*/
				$("#btnEnviarContacto").click(function() {
					//SI TODOS LOS CAMPOS ESTAN VALIDADOS CORRECTAMENTE ENVIAMOS EL EMAIL
					if(ValidarNombre($('#nombre')) &&  ValidarEmail($('#email')) && ValidarComentario($('#comentario'))){
						//Ocultamos el boton para no darle dos veces sin querer
						$("#btnEnviarContacto").hide();
						//Mostramos la capa de carga
						$("#divCarga").show();
						$.ajax({
							type: 'POST',
							url: "do_contacto.php",
							data: {
									nombre:$("#nombre").val(),
									email:$("#email").val(),
									tel:$("#tel").val(),
									comentario:$("#comentario").val()
							},
							dataType: 'html',
							success: function(resp) {
								if (resp==""){
									$("#formContacto").hide();
									$("#thanksMSG").show();
									$("#divCarga").hide();
								}else{
									$("#btnEnviarContacto").show();
									$("#divCarga").hide();
									alert(resp);
								}
							}
						});
					}								
				});
			</script>
		</form>
	</div>
</body>
</html>

 

Código del archivo do_contacto.php
<?php
	//CORREO DONDE SE MANDARA(EL NUESTRO)
	$email_destino="miemail@miweb.com";

	//VARIABLES POST
	$nombre= trim(strip_tags($_POST['nombre']));
	$email = trim(strip_tags($_POST['email']));
	$tel = trim(strip_tags($_POST['tel']));
	$comentario = strip_tags($_POST['comentario']);


	
	$headers = "From: " . $email . "\r\n";
	$headers .= "Reply-To: ". $email . "\r\n";
	//$headers .= "CC: susan@example.com\r\n";
	$headers .= "MIME-Version: 1.0\r\n";
	$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
	


	//SI FALTAN DATOS DEVOLVEMOS ERROR
	if($nombre!="" && $email!="" && $comentario!=""  ){
		$Titulo="Contacto desde Mipagina.com";
		$Cabecera="<strong><u>Datos del Cliente/Interesado</u></strong>";
		$contenido="
			<html><body>
			$Cabecera<br>
			<strong>Nombre:</strong> $nombre<br>
			<strong>Email:</strong> $email<br>
			<strong>Telefono:</strong> $tel<br>
			<strong>Mensaje:</strong><br>
			$comentario
			<br>
			<br>
			<strong>Fecha: </strong> " . date('d/m/Y H:i:s', time()) . "<br>
			<strong>IP: </strong> " . $_SERVER['REMOTE_ADDR'] . "<br>
			</body></html>
		";
		mail($email_destino, $Titulo, $contenido, $headers);
	}else{
		//faltan datos
		echo "-1";
	}
?>

 

Código del archivo form_styles.css
/***** contact form *****/
.contact-form {
	position: relative;
	vertical-align: top;
	z-index: 1;
	margin: 22px 0 0;
	top: 0;
}
.contact-form .txt-form {
	display: none;
}
.contact-form .coll-1, .contact-form .coll-2, .contact-form .coll-3 {
	margin-bottom: 26px;
	float: left;
	width: 180px;
}
.contact-form .coll-1, .contact-form .coll-2 {
	margin-right: 40px;
}
.contact-form .coll-3 {
	margin-right: 0;
}
.contact-form fieldset {
	top: 13px;
	border: none;
	padding: 0;
	width: 100%;
	position: relative;
	z-index: 10;
}
.contact-form label {
	display: block;
	min-height: 45px;
	position: relative;
	margin: 0;
	padding: 0;
	float: left;
	width: 100%;
}
.contact-form .message {
	display: block;
	width: 100%;
}
.contact-form input {
	padding: 10px 15px;
	margin: 0;
	text-decoration: none;
	font-family: 'Trebuchet MS', sans-serif;
	font-size: 14px;
	line-height: 22px;
	font-weight: normal;
	color: #8b8b8b;
	background: #e7e7e7;
	outline: none;
	width: 100%;
	border: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	float: left;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.contact-form textarea {
	padding: 10px 15px;
	margin: 0;
	text-decoration: none;
	font-family: 'Trebuchet MS', sans-serif;
	font-size: 14px;
	line-height: 22px;
	font-weight: normal;
	color: #8b8b8b;
	background: #e7e7e7;
	outline: none;
	width: 100%;
	border: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	float: left;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.contact-form input {
	height: 42px;
}
.contact-form input:focus, .contact-form textarea:focus {
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
	color: #8b8b8b !important;
	border: none;
}
.contact-form .area .error {
	float: none;
}
.contact-form textarea {
	width: 100%;
	height: 277px;
	resize: none;
	overflow: auto;
}
.contact-form .success {
	border: none;
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	font-size: 14px;
	line-height: 20px;
	background: #e7e7e7;
	padding: 18px 0px;
	text-transform: none;
	text-align: center;
	z-index: 20;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.contact-form .error, .contact-form .empty {
	color: #f00;
	font-size: 10px;
	line-height: 1.2em;
	display: none;
	text-align: right;
	overflow: hidden;
	width: 100%;
	text-transform: none;
	position: absolute;
	top: 30px;
	right: 0;
}
.contact-form .message .error, .contact-form .message .empty {
	top: 265px;
}
.contact-form .buttons-wrapper {
	margin: 0;
}
.contact-form .buttons-wrapper a {
	margin-top: 38px;
}
.contact-form .buttons-wrapper a:hover {
	text-decoration: none;
}
.contact-form .buttons-wrapper p {
	top: -10px;
	position: relative;
	font-weight: 200;
	display: inline-block;
	color: #8b8b8b;
	text-transform: uppercase;
}
.contact-form .buttons-wrapper span {
	font-family: 'Trebuchet MS', sans-serif;
	font-size: 14px;
	line-height: 22px;
	font-weight: normal;
	display: inline-block;
	position: relative;
	margin-left: 28px;
}
.buttons-wrapper > .link1 {
	padding: 13px 22px;
}
/*-- end contacts --*/  
  
  
  

@media (min-width: 1200px) {
.contact-form .coll-1,  .contact-form .coll-2,  .contact-form .coll-3 {
	float: left;
	width: 230px;
}
}
/*************************************************/
@media (min-width: 768px) and (max-width: 979px) {
.row_6 h2 {
	font-size: 19px;
}
.contact-form .coll-1,  .contact-form .coll-2,  .contact-form .coll-3 {
	float: none;
	width: 100%;
}
}
/*************************************************/
@media (max-width: 767px) {
.contact-form .coll-1,  .contact-form .coll-2,  .contact-form .coll-3 {
	float: none;
	width: 100%;
}
.row_6 .span4 {
	margin-top: 30px;
}
}

.btn.link1 {
	position: relative;
	border: none;
	text-shadow: none;
	font-family: 'Trebuchet MS', sans-serif;
	font-weight: normal;
	font-size: 16px;
	color: #ffffff;
	padding: 6px 21px 8px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	background-position: 0 0;
	background: #343434;
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	cursor:pointer;
}

#divCarga {
	height:100%;
	width:100%;
	position: absolute;
	background-color: gray;
	top: 0;
	z-index:9999;
	opacity: 0.4;
	filter: alpha(opacity=40);
}
.ajax-loader {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto; 
}

Resultado