Una de las herramientas que mas se usan en el diseño y desarrollo Web son los Formularios, en proyectos de sitios web sencillos por así decirlo, lo primero que solicita el cliente es tener un formulario para que sus visitantes lo contacten, hasta hace algunos años la única forma de poder hacer esto era mediante la opción mailto:mail@dominio.com, que lo único que hacía era abrir el cliente de correo electrónico en el equipo del visitante y agregar en el campo PARA la dirección de correo electrónico, hoy en día el formulario de contacto en un sitio Web va más allá de un simple mailto, tomando como referencia un formulario de contacto en donde solicitamos el nombre del visitante, su dirección de correo electrónico y algún comentario en su forma más básica, ahora se pueden crear un formulario tan extenso como sea necesario de tal forma que con una sola plantilla se puedan generar mensajes dirigidos por ejemplo a uno o varios departamentos, que al ser exitoso el envío del formulario el visitante reciba un mensaje de seguimiento, en fin se pueden generar n tareas a partir de un formulario.

Formulario de Contacto

Formulario de Contacto

Los formularios también son utilizados en el desarrollo de aplicaciones web, prácticamente son la herramienta escencial para insertar información de forma dinámica en una base de datos, crear filtros para realizar consultas, etc.

Formulario Aplicación Web

Formulario Aplicación Web

Prácticamente con un formulario Web podemos hacer cualquier cosa, contacto, búsquedas, ingreso de información en una base de datos y mucho más.

Formulario Login

Formulario Login

En este post que estará conformado de varias partes, lo que pretendo es diseñar un pequeño formulario de contacto comenzando desde cero, comenzando por identificar y definir las etiquetas HTML 4 y/o HMTL 5 disponibles para este fin, pasando por la maquetación y estilización por medio de CSS (hojas de estilo en cascada), la validación de datos por medio de plugins hasta la implementación de la funcionalidad tanto del lado del cliente (JavaScript) como del lado del servidor (PHP).

Pues bien manos a la obra, para no hacer muy extenso este post vamos a puntualizar que herramientas usaremos a lo largo de nuestro desarrollo, de tal manera que tengamos definida la línea que seguiremos:

  1. Editor de HTML (indistinto)
  2. Etiquetas HTML 4 y/o HTML 5
  3. Etiquetas CSS 2 y/o CSS 3
  4. Validación por medio de FrameWork JavaScript (jquery / jquery validate)
  5. Lenguaje de programación PHP
  6. Uso de Sesiones en PHP
  7. Captcha (clase JpGraphics)
  8. Implementación AJAX por medio de FrameWork JavaScript (jquery)

Como podemos ver, en la lista anterior aparece un listado de los conceptos y herramientas mínimas que debemos tener para diseñar, desarrollar e implementar un formulario, claro esta que en la actualidad en la red podemos encontrar un sin fin de aplicaciones gratuitas y con costo que nos permiten crear formularios, en lo personal yo prefiero hacerlo paso a paso.

En el próximo post definiremos las etiquetas HTML existentes para crear nuestro formulario de contacto.