Soma : Blog

Los formularios de contacto son la forma más útil para generar un medio de comunicación entre los visitantes y el webmaster o encargado del sitio.

Con este tutorial pretendo explicar como es posible tener nuestro propio formulario rápidamente.

Dividiré este tutorial en las siguientes partes:

1. Parte I: Diseño del formulario.
2. Parte II: Validación de campos por JavaScript.
3. Parte III: Validación de campos por PHP
4. Parte IV: Envío de información.

Diseño del formulario

Antes de comenzar a diseñar un formulario es necesario pensar que es lo que necesitamos saber del usuario, o que es lo que él podría querer comunicarnos.

Como el que tratamos ahora es un formulario de contacto simple, los datos que le solicitaremos al usuario son:

1. Nombre
2. E-Mail
3. País
4. Comentario

De los cuales el único que no será obligatorio será “País”, podríamos pedirle más datos y hacerlos todos obligatorios, pero si quieres que te contacten pide solo lo estrictamente necesario, recuerda que los usuarios son “flojos” y si los cansas se irán.

Teniendo esta información solo nos queda comenzar con el código HTML que por lo demás es muy simple:

Y aplicando un poco de CSS el formulario puede quedar asi:

Acciones del formulario

Lo primero que hay que ver en el formulario es que comienza con la etiqueta <form> y termina con </form> y para comenzar el formulario es necesario especificarle algunas cosas mediante parámetros:

1. Id:
   Es el identificador de la etiqueta, este es el único parámetro que no es exclusivo de los formularios, todas las etiquetas pueden llevar un ID para reconocerlas en el documento, con la peculiaridad que debe ser única en todo el código, no pueden existir dos etiquetas con el mismo ID no importando que etiqueta sea.
2. Name:
   Es el nombre con el que identificaremos el formulario este campo también debe ser único en el código.
3. Method:
   Es el método que se usara para enviar el formulario, hay para elegir entre POST, que enviará los datos sin posibilidad que el usuario los vea mientras se envían, y el método GET que enviara los datos al archivo que trabajara con ellos de la siguiente forma “resibe-datos.php?nombre=diego&email=diego@soma-d.com&pais=chile&comentario=Mi comentario sin importar que tan largo sea”. Lo limitante de GET es que se puede enviar cierta cantidad de caracteres, mientras que POST no limita.
4. Action:
   Es la dirección del archivo PHP al que enviaremos la información y el que en definitiva la procesara y la enviará, almacenara en algún lugar o lo que queramos con ella.

Campos del formulario

Todos los campos de un formulario deben tener especificados los parámetros “name” e “id” por razones que se verán mas adelante.

Otra información importante es que los campos <input /> definen su función y características graficas según el tipo (type) que definas como atributo. En este caso trabajaremos con los tipos “text” y “submit”.

Campos de texto simple

En estos campos se puede introducir únicamente una línea de texto, se omiten los saltos de línea, también es posible incluir un parámetro “value” que será representado como un texto introducido por defecto en el campo.

Campos de texto multilínea

En este tipo de campos es posible ingresar saltos de línea y gráficamente son mas amplios ya que se ven como un recuadro más o menos grande según el valor que se le entregue como parámetros a “cols” (columnas) y “rows” (filas).

Para especificar un texto por defecto en este campo es necesario escribirlo entre <textarea> y </textarea>.

Botones

Este campo se representa gráficamente como un botón que al ser del tipo (type) “submit” al ser presionado enviará los datos a la dirección que se especifico en el atributo “action” de la etiqueta <form> principal.

Esto es todo lo que hay que saber para armar un formulario de contacto muy simple, en el próximo articulo mostrare como validar (ver si están correctamente ingresados antes de trabajar con ellos) los campos con JavaScript.

Sphere: Related Content