Galería de formas de contacto y mejores prácticas

In the entire world wide web, most sites, be it large or small, contain the Contact Us page. The purpose of the Contact Us page is to get your clients or customers to talk to you or enquire more about your services, ultimately it is to generate potential businesses for your company. A site contact page may seems insignificant but it’s the only gateway for your visitors to get in touch with you.Contact Us Page Best Practices With 20+ Fabulous Showcases | Onextrapixel – Showcasing Web Treats Without Hitch

La vieja, aburrida y a veces cansina forma de contacto es para muchos sitios la única manera que tienen de que sus visitantes se comuniquen con ellos, a veces con buena razón. En esta galería puedes encontrar cosas inspiradoras para hacer la forma menos aburrida, más útil y mejor para todas las partes involucradas.

Como validar campos

Muchas veces tienes la necesidad de poner una forma en tu sitio y además asegurarte que los campos sean llenados de cierta manera. Esto se puede convertir fácilmente en un quebradero de cabeza para la programación inicial y el mantenimiento del sitio. Pero hay un modo más fácil. De Robertobaca.Net

La biblioteca javascript wForms sirve para validar campos de formas fácil y rápidamente. La desarrolló una empresa llamada TheFormAssembly que hacen y venden software para crear formas. Sin embargo ellos decidieron liberar esta biblioteca de funciones bajo la licencia GNU, así que todo mundo la puede usar, cambiar y distribuir libremente.

Usar la biblioteca es muy sencillo. Después de descargar el archivo de su sitio, descomprimes su contenido y lo subes a tu sitio usando algún cliente de FTP. Después nada más añades las siguientes líneas a las páginas que quieres que usen esta biblioteca:

<script type="text/javascript" src="/wForms/v2.0/modules/wforms_core.js" ></script>
<script type="text/javascript" src="/wForms/v2.0/modules/wforms_validation.js" ></script>

Por supuesto en src tienes que poner la ruta al subdirectorio donde subiste el archivo.

Una vez hecho esto puedes hacer cosas como lo siquiente:

<div class="requiredall">
1: <input type="radio" name="opcion1" value="1" />
2: <input type="radio" name="opcion1" value="2" />
A: <input type="radio" name="opcion2" value="A" />
B: <input type="radio" name="opcion2" value="B" />
</div>

que obliga a los usuarios a seleccionar algo tanto en opcion1 como en opcion2.

Simplemente cambiando el atributo class de tu etiqueta puedes decir si ese campo es un requisito, si debe ser numérico, alfanumérico, fecha, etc. o incluso si cumple con una expresión regular que tú mismo determines.

La ventaja de este método es que es totalmente semántico, no es intrusivo, se degrada grácilmente y es fácilmente personalizable. Con unas pocas líneas de código puedes cambiar los mensajes de error que recibiría el usuario. Como usa clases puedes configurar los campos de la manera que quieras. Y como es una biblioteca externa el añadir, quitar o modificar campos no requiere que reprogrames el javascript entero.

Por supuesto, no sustituye la necesidad de validad una entrada en el servidor. Por motivos de seguridad siempre debes validar los datos también en el servidor. Pero sí te facilita mucho la programación de formas amigables y útiles para los usuarios.