Los formularios de contacto son ese tipo de cosas que todo el mundo pone en su web/blog porque queda bonito y muy profesional. Sin embargo, son tremendamente útiles, porque ¿quién no se ha topado con alguna web interesante y no ha podido contactar con el webmaster?. Sólo por eso ya merece la pena tener uno.

También podríamos entrar en la tentación, de simplemente, poner nuestro mail en el footer, por ejemplo, para que los usuarios contacten con nosotros, claro que esto sólo nos llenaría la bandeja de entrada de spam y mucho más spam. Así que como nos interesa lo que la gente opine de nosotros, nos cuenten sus dudas o simplemente echen nuestro trabajo por tierra, vamos a hacer un formulario de contacto desde cero, y además con validación en HTML5, así nos ahorraremos unas cuantas líneas de código en javascript, php o similar (lenguajes difíciles de entender para un alienígena como yo).

Estructura y validación

Primeramente vamos a empezar con la estructura básica del formulario en HTML, luego lo explicaré más a fondo:

<form class="contact_form" action="contact.php" method="post">
 <label for="name">Nombre:</label>
 <input type="text" name="nombre"  placeholder="Nombre y apellidos" autofocus required />
 <label for="email">Email:</label>
 <input type="email" name="email" placeholder="ejemplo@ejemplo.com" required />
 <label for="website">Sitio Web:</label>
 <input type="url" name="web" placeholder="http://www.tuweb.com" />
 <label for="Mensaje">Mensaje:</label>
 <textarea name="mensaje" required ></textarea>
 <button type="submit">Enviar</button>
</form>

Como puedes ver, es un formulario de contacto básico, donde he incluido algunos atributos nuevos de HTML5 para su validación. Venga, voy a explicarlo paso a paso por si eres nuevo en esto de los formularios:

• Lo primero que vemos es el elemento form, que contienen todos los campos del formulario, además del botón para enviar. Contiene dos atributos importantes: action que envía los datos al fichero "contact.hp" para procesarlos (siempre que antes haya sido enviados como es lógico) y method que especifica cómo se envían los datos.
• Luego tenemos varios elementos label, son simples etiquetas de texto para marcar cada input. Pueden estar relacionadas expresamente con un input, siempre que el valor del atributo for de label y del atributo id de input sean el mismo. En este caso lo he obviado, aunque es una buena práctica de cara a la accesibilidad.
• Los input, que son campos de entrada, los he definido todos de tipo texto, por tanto de una sólo línea. Como puedes ver hay una particularidad, sólo he definido uno como tipo texto, los otros dos no, sin embargo funcionan de la misma forma, salvo que los valores url y website especifican además que el contenido de ellos cumpla unas reglas concretas. Sí, has acertado, con estos valores estamos añadiendo al formulario la tan ansiada validación. Dos de ellos además, contienen un atributo más, el atributo required, que obliga a cubrir estos campos, sino el formulario no será válido. Seguimos, por tanto, validando en HTML5. Por último destacar el atributo placeholder que nos permite introducir un texto previo, a modo de explicación, que desaparecerá en cuanto el usuario escriba algo en ese campo.
• El elemento textarea, es simplemente eso, un campo de texto de entrada, eso sí, multilínea. Como puedes ver, también tiene el atributo requiered, para que sea obligatorio rellenar este campo.
• Por último tenemos el elemento button, que no es ni más ni menos que un botón para enviar los datos del formulario, según se ha especificado en los atributos action y method del elemento form.

Algo de chapa y pintura con CSS

Ahora que ya tenemos nuestro formulario en HTML5 y con validación, ¿qué tal si además le damos forma con un poco de CSS?. Para ese ejemplo voy a usar el mismo formulario que uso yo es esta web (a fecha de publicación de este artículo). Eres libre de copiar, modificar y hacer lo que quieras con él. Manos a la obra:

<style type='text/css'>
.contact_form label {
 display: block;
 margin-top: 1.25em;
}

.contact_form {
 margin: 0 auto;
 width: 25em;
}
 
.contact_form input, .contact_form textarea { 
 border: 1px solid #aaa;
 color: #888;
 font-size: .8em;
 padding: .3em 8% .3em 2%;
 -moz-transition: padding .25s; 
 -webkit-transition: padding .25s; 
 -o-transition: padding .25s;
 transition: padding .25s;
 width: 70%;
}

.contact_form textarea {height: 10em;}

.contact_form input:focus, .contact_form textarea:focus {
 background: #fff; 
 border: 1px solid #999; 
 box-shadow: 0 0 3px #aaa; 
 padding-right: 20%;
}

.contact_form input:required:valid, .contact_form textarea:required:valid {
 box-shadow: 0 0 5px #0FB90F;
 border-color: #0FB90F;
}

.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
 box-shadow: 0 0 5px #E71313;
 border-color: #E71313;
}

 
.contact_form button {
 background-color: #eee;
 border-width: 0;
 color: #666;
 cursor: pointer;
 display: block;
 margin-top: .6em;
 padding: .25em .5em;
 text-align: center;
 transition: background 200ms ease-in-out;
}

.contact_form button:hover {
 background-color: #1fa2ff;
 color: #fff;
}
</style>

¿No funciona?

Seguramente ya le has dado al botón de enviar y ¡tachán!, no funciona. No te preocupes, no has hecho nada mal, tan sólo es necesario un paso más para que el formulario funcione, aunque esa no es la misión de este tutorial. Por si no te acuerdas lo que estábamos haciendo era crear un formulario de contacto, y aprovechando las novedades de HTML5 validar los datos introducidos por el usuario, y eso es lo que hemos hecho.

Para un funcionamiento completo del formulario necesitamos algo más. En este caso concreto lo lógico sería enviar los datos del formulario, que previamente han sido validados gracias a las novedades de HTML5, a nuestra dirección de correo. Lo normal es crear un archivo externo que realice esta función, comúnmente en Javascript o PHP. En la red puedes encontrarte con decenas de scripts, sobre todo en PHP, para enviar los datos de un formulario a una dirección de correo.

Puntualizando y fin

El CSS creado para este tutorial usa padding para agrandar el campo sobre el que estamos. Hay que tener en cuenta que esto sólo funcionará si no hemos cambia el modelo de caja en algún punto de nuestro CSS. Por ejemplo es muy común usar box-sizing: border-box en webs responsive, en cuyo caso este efecto no funcionará, ya que el padding no altera el tamaño de la caja. Para ello bien podríamos usar width directamente y el efecto conseguido sería el mismo.

Puedes ver una aproximación de como queda el formulario en la página de contacto, aunque reconozco que le he hecho algunos arreglillos.