Detalles del tutorial
Implementos necesarios:
ajax CSS formulario de contacto HTML Javascript JQuery PHP
Hace algún largo tiempo ya, les trajimos un tutorial sobre como armar un formulario de contacto para nuestros sitios Web, en el cual vimos todo el proceso de creación, desde el armado hasta el envío de los datos vía correo electrónico.
Pero como el tiempo pasa, y nos vamos poniendo viejos, y sabemos que las soluciones no son eternas ni apropiadas para estos tiempos, hoy hemos decidido sacar a relucir nuestros talentos musicales y poéticos desarrollísticos (¿desarrolladores?) y traerles una nueva versión de este formulario, ahora con sabor a limón y algunas características que lo convierten en una versión mucho más óptima que la anterior.
El detalle, como siempre, después del salto.
Como siempre, lo primero:
Detalles del tutorial
- Tiempo aproximado de implementación: 30 minutos.
- Dificultad: Básico (para implementar tal cual) – Intermedio (para personalizar).
- Conocimientos previos requeridos: Entendimiento de HTML, CSS, jQuery y PHP.
- Un editor Web (Recomendamos Aptana Studio o Notepad++, ambos gratuitos).
Ahora, la pregunta de rigor. ¿Qué trae de nuevo este formulario 2.0?:
Así que con eso claro, vamos, manos a la obra:
Separaremos este desarrollo en las siguientes partes:
El armado del formulario es bastante estándar:
<div id="container">
<form name="formulario" id="formulario" method="post" action="envio.php">
<fieldset><h2>Contacto</h2></fieldset>
<div>
<label for="nombre">Nombre: </label>
<input type="text" name="nombre" id="nombre" size="60">
<span id="validar-nombre"></span>
</div>
<div>
<label for="correo">Correo:</label>
<input type="text" name="correo" id="correo" size="60"/>
<span id="validar-correo"></span>
</div>
<div><label for="sitio">Sitio Web:</label>
<input type="text" name="sitio" id="sitio" size="60"/>
<span id="validar-sitio"></span>
</div>
<div>
<label for="mensaje">Mensaje: </label>
<textarea name="mensaje" id="mensaje" rows="10" cols="56"></textarea>
<span id="validar-mensaje"></span>
</div>
<p id="envio">
<input type="submit" name="enviar" id="enviar" value="Enviar" />
</p>
</form>
</div>
Con este código tendremos un formulario bastante estándar armado en nuestra página de contacto. Este contará con campos de texto para que el visitante ingrese su nombre, correo electrónico y sitio Web, así como un área de texto para que ingrese su mensaje. Y obviamente al final añadimos un botón para el envío.
Como podrán fijarse, a continuación de cada campo de texto y área de texto, hemos añadido un span sin contenido. Esto lo hemos hecho para insertar mensajes y resultados de las validaciones posteriormente mediante jQuery.
A continuación, haremos la estilización del formulario, mediante CSS.
body {
height: 100%;
background: #348075;
font-family: Arial;
font-size: 11px;
color: white;
}
#container {
width: 1000px;
margin: 0 auto;
background: #5b5c5c;
border: 1px solid white;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
#formulario {
padding: 1em;
}
#formulario fieldset {
width: 400px;
padding: 0 0 0 0;
border: 0;
}
#formulario label {
display: block;
padding: 5px 0 5px 0;
}
#formulario input[type=text], textarea {
padding: 10px 0 10px 0;
border: 1.5px solid black;
color: #5b5c5c;
font-family: inherit;
font-size: inherit;
-moz-border-radius: 5px;
-webkit-border-radius: 3px;
}
#formulario input[type=text]:focus, textarea:focus {
background: #f5f2c9;
}
#formulario input[type=submit] {
border: none;
margin-right: 1em;
padding: 6px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
-moz-border-radius: 4px;
background: #348075;
color: white;
width: 100px;
}
#formulario input[type=submit]:hover {
background: #287368;
cursor: pointer;
}
#validar-nombre, #validar-correo, #validar-sitio, #validar-mensaje {
position: absolute;
width: 100px;
}
#validar-nombre img, #validar-correo img, #validar-mensaje img {
padding:10px 0 0 5px;
}
Como podrán ver, en algunas partes hemos utilizado la propiedad border-radius (con moz y webkit para apuntar a distintos navegadores). Esta propiedad, tal como hemos indicado anteriormente, es de CSS3, por lo que no está completamente soportada por todos los navegadores, especialmente los más antiguos. El efecto que logra es el de bordes redondeados, así que ojo, si utilizan IE o algún navegador de mayor antiguedad no lo podrán apreciar.
Acá debemos fijarnos en algunas cosas. Primero, debemos asegurarnos de descargar e incluir jQuery en la cabecera de nuestro formulario, y luego, crear un documento js en el que incluiremos el código en jQuery que hará las validaciones y el correspondiente a Javascript que contendrá la expresión regular que evaluará la dirección de correo ingresada para ver si es válida. Partamos con jQuery:
$(function(){
var valor;
var i = 0;
$('#nombre').focus(function(){
$('#resultado-nombre').remove();
$('#validar-nombre').append('<p>* Obligatorio</p>');
});
$('#nombre').blur(function(){
$('.advertencia').remove();
valor = $('#nombre').val();
if(valor != '') {
$('<img src="imagenes/accept.png" id="resultado-nombre" />').appendTo('#validar-nombre');
}
else {
$('<img src="imagenes/delete.png" id="resultado-nombre" />').appendTo('#validar-nombre');
}
});
$('#correo').focus(function(){
$('#resultado-correo').remove();
$('#validar-correo').append('<p>* Obligatorio</p>');
});
$('#correo').blur(function(){
$('.advertencia').remove();
valor = $('#correo').val();
if(valor != '') {
if(validaCorreo(valor)){
$('<img src="imagenes/accept.png" id="resultado-correo" />').appendTo('#validar-correo');
var valido = true;
}
else {
$('<span id="resultado-correo">Correo no valido</span>').appendTo("#validar-correo");
}
}
else {
$('<img src="imagenes/delete.png" id="resultado-correo" />').appendTo('#validar-correo');
}
});
$('#sitio').focus(function(){
$('#validar-sitio').append('<p>* Opcional</p>');
});
$('#sitio').blur(function(){
$('.advertencia').remove();
});
$('#mensaje').focus(function(){
$('#resultado-mensaje').remove();
$('#validar-mensaje').append('<p>* Obligatorio</p>');
});
$('#mensaje').blur(function(){
$('.advertencia').remove();
valor = $('#mensaje').val();
if(valor != '') {
$('<img src="imagenes/accept.png" id="resultado-mensaje" />').appendTo('#validar-mensaje');
}
else {
$('<img src="imagenes/delete.png" id="resultado-mensaje" />').appendTo('#validar-mensaje');
}
});
$('#enviar').click(function(){
if($('#nombre').val()!= '' && $('#correo').val()!='' && $('#mensaje').val()!='' && valido) {
$('.advertencia').remove();
$('#envio').append('<img src="imagenes/ajax-loader.gif" alt="Procesando envio" id="cargando" />');
var nombre = $('#nombre').val();
var correo = $('#correo').val();
var sitio = $('#sitio').val();
var mensaje = $('#mensaje').val();
$.ajax({
url: 'envio.php',
type: 'POST',
data: 'nombre=' + nombre + '&correo=' + correo + '&sitio=' + sitio + '&mensaje=' + mensaje,
success: function(resultado) {
$('#respuesta').remove();
$('#envio').append('<span id="respuesta">' + resultado + '</span>');
$('#cargando').fadeOut(500, function() {
$(this).remove();
});
}
});
return false;
}
else {
$('#envio').append('<span>Debe completar los datos requeridos.</span>');
return false;
}
});
});
Varias cosas a las que ponerle atención en el código anterior:
El código básicamente ejecuta acciones cada vez que se selecciona un campo de texto (focus) y/o se sale de el (blur). Ahí evalua de acuerdo a los parámetros que hemos definido (que existan datos) y en base a eso muestra un resultado de la validación. Luego, al final, cuando se hace click en el botón de envío, evalúa que existan datos en todos los campos y en ese caso envía. De lo contrario, despliega un mensaje indicando la necesidad de completar el formulario.
Luego, a continuación del código jQuery, incluiremos una función en Javascript que evaluará el correo mediante una expresión regular para verificar que tenga el formato correcto:
function validaCorreo(correo) {
var expresion = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)
|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})
\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.
|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.)
{2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
return expresion.test(correo);
}
Entre estos 2 códigos se encargan de toda la validación del formulario, tal como indicamos, en tiempo real. Lo que nos queda hacer ahora es crear nuestro script en PHP para el envío final de los datos.
<?php
/* Recepcionamos los datos enviados asincrónicamente */
$nombre = $_POST['nombre'];
$correo = $_POST['correo'];
$sitio = $_POST['sitio'];
$mensaje = $_POST['mensaje'];
/* Definimos el correo donde enviaremos el mensaje y el asunto */
$destino = "correo@ejemplo.com";
$asunto = "Contacto sitio Web";
/* Definimos el formato del mensaje a enviar */
$cuerpo = "<strong>Nombre: </strong>".$nombre."<br />
<strong>Correo: </strong>".$correo."<br />
<strong>Sitio Web: </strong>".$sitio."<br />
<strong>Mensaje: </strong>".$mensaje;
/* Definimos las cabeceras del mensaje */
$cabecera = "MIME-Version: 1.0\r\n";
$cabecera .= "Content-type:text/html; charset=iso-8859-1\r\n";
$cabecera .= "From: $correo\r\n";
$cabecera .= "Reply-to: $correo\r\n";
$cabecera .= "Cc: $correo\r\n";
/* Enviamos vía correo, devolviendo un mensaje en caso de éxito o falla */
if(mail($destino, $asunto, $cuerpo, $cabecera)) {
echo 'Su mensaje ha sido enviado.
De ser necesario, nos pondremos en contacto con Ud.';
}
else {
echo 'No se pudo enviar el mensaje. Inténtelo nuevamente';
}
?>
Los mensajes desplegados en el if y else cuando enviamos el correo son aquellos que son devueltos al método .ajax de jQuery (el parámetro resultado del que hablamos anteriormente), los cuales son desplegados en el formulario.
Y con eso tenemos nuestro formulario de contacto terminado, el cual valida en tiempo real y envía los datos de forma asincrónica. En caso de que el visitante tenga Javascript desactivado en su navegador, esto se ejecutará de forma normal, es decir, el script PHP se cargará al momento de presionar el botón Enviar y no habrá validación en tiempo real.
Antes de terminar:
Y como siempre, les recordamos que este tutorial ha sido:
Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.
Esperamos que este tutorial haya sido de utilidad para Uds.
Muchas gracias por leer y será hasta una próxima oportunidad.
7:31:27 am
Excelente estimado. Es justo lo que andaba buscando. Muchas gracias. Grande!!!
2:15:29 pm
Muchas gracias fue de gran ayuda este tuto, solo que todavia existen errores como cuando oprimes el boton enviar y aparece el mensaje “Debe completar los datos requeridos.” si se sigue oprimiendo este sigue apareciendo y acumulandose uno enfrente de otro.
11:44:02 am
Hola, tengo problemas con el formulario. En realidad funciona todo muy bien, el unico problema es que no envia al correo. Probe con varios mails, Gmail y Hotmail pero no recibo nada. Me ha pasado con otros formularios. Alguna idea de que puede ser?
12:45:01 pm
Bajé su formulario para probarlo y esta muy bueno lo unico que cuando voy a abrirlo no me sale el texto y tengo que hacerle reply para ver el mensaje que puedo hacer para verlo directamente cuando yo abro el correo
2:49:14 am
Hola, tengo un problema estoy adaptando la pagina a mi web y me pasa que no me valida los mensajes, me dice: Debe completar los datos requeridos, pero ya están completos y no me arroja la imagen de aprobado en el mensaje, a que podría deberse?
4:57:27 pm
Muy bueno, pero una pregunta… estos codigos los pego en un archivo? como y en que extension tengo que hacer los otros en tal caso?
7:48:53 pm
que tal de antemano muchisimas gracias por este tutorial soy nuevo en esto y me estaba dando unos dolores de cabeza con esto del formulario, ahora gracias a ustedes lo comprendo mas…
queria preguntarte si hay alguna forma de que una vez enviado el formulario se redireccione la pagina a la de contacto.
denuevo te agradesco mucho por la ayuda
1:08:30 pm
Hola buen dia, alguien me puede ayudar seleccione tu codigo y lo pegue y lo modifique a mis necesidades pero no me funciona no envia ningun correo, pero no me marca ningun error. Porfavor que alguien me ayude me urge.
11:42:17 am
Muchas gracias!! funciona perfecto!!
Si a alguien le sirve:
Así quedarían validacion.js con los cambios que sugirió Xabadu para que no se envíe nada hasta que el email sea correcto:
Primer cambio:
//crear variable “valido” con valor false
$(function(){
var valor; /
var i = 0;
var valido = false;
Segundo:
if(validaCorreo(valor)){
valido = true; //se cambia el valor de “valido”
Tercero:
//se pregunta si “valido” es igual a “true” (sólo remplazar esa linea)
if($(‘#nombre’).val()!= ” && $(‘#correo’).val()!=” && $(‘#mensaje’).val()!=” && valido == true){
Saludos!!
8:22:06 pm
Que tal, baje los archivos y los coloque en la raiz. Tambien he cambiado el correo electronico del destinatario. Sin embargo, cuando trato en enviar un correo, me resulta en el error:”No se pudo enviar el mensaje. Inténtelo nuevamente”
Favor ayudar.