Cómo introducir un formulario en nuestra página web para que los visitantes nos envíen sus dudas, sugerencias...

Seguro que muchos de vosotros os habéis preguntado más de una vez qué piensan los visitantes de vuestra página web. Incluso algunos habéis puesto vuestra dirección de correo electrónico a la vista para que aquellas personas que lo crean oportuno os puedan enviar un correo con sus dudas, aportaciones...
Ésta es sin duda una muy buena opción, pero ahora os presentamos otra más cómoda para el visitante: incluir un formulario en vuestra página con el que se pueda enviar un comentario sin la necesidad de abrir otros programas.

Los formularios son esas famosas cajas de texto y botones que podemos encontrar en muchas páginas web. Ofrecen gran cantidad de opciones que se pueden llevar a cabo: comprar un artículo, rellenar una encuesta, enviar un comentario al autor...

Los datos que el usuario introduce en estos campos son enviados al correo electrónico del administrador del formulario o bien a un programa que se encarga de procesarlos automáticamente.

A continuación vamos a ver un ejemplo bastante sencillo para que el creador de la web pueda recibir en su correo electrónico una sugerencia o una duda de parte de cualquier persona.

Les vamos a pedir tres cosas:

1. Pregunta sobre si es profesor o alumno quien nos envía la información
2. Dirección de correo electrónico a la que desean que se les responda
3. Comentario, duda, sugerencia... que nos quieran hacer llegar.

Como ya sabéis, las páginas web se programan (generalmente) en lenguaje html, que funciona mediante etiquetas (tags).
Los formularios son definidos por medio de las etiquetas <form> y </form>. Entre estas dos etiquetas colocaremos todos los campos y botones que componen el formulario.
Dentro de esta etiqueta <form> debemos especificar algunos atributos:

ACTION

Define el tipo de acción a llevar a cabo con el formulario. Como ya hemos dicho, existen dos posibilidades:

• El formulario es enviado a una dirección de correo electrónico
• El formulario es enviado a un programa o script que procesa su contenido

En nuestro caso, haremos que el contenido del formulario sea enviado a la dirección de correo electrónico especificada:
<form action=“mailto:direccion@correo.com“>

METHOD

Este atributo se encarga de especificar la forma en la que el formulario es enviado. Los dos valores posibles que puede tomar este atributo son post y get. Lo más común es utilizar post, ya que indica al formulario que envíe los datos inmediatamente a la direccioón de correo elctrónico nada más pulsar el botón de envío.

ENCTYPE

Se utiliza para indicar la forma en la que viajará la información que se mande por el formulario. En nuestro caso el formulario se envía por correo electrónico, el valor de este atributo debe de ser “text/plain“.
Ejemplo de nuestra etiqueta <form> completa:
<form action=“mailto:direccion@correo.com“ method=“post“ enctype=“text/plain“>

A continuación, deberemos describir los campos que deseemos poner en nuestro formulario. Veamos los tres tipos de campos que necesitamos para nuestra miniencuesta:

LISTAS DE OPCIONES

Profesor/a Alumno/a

Las listas de opciones son los menús desplegables que nos permiten elegir una (o varias) de las múltiples opciones que nos proponen. Para construirlas emplearemos una etiqueta con su respectivo cierre: <select>

Para aclararnos mejor, dentro de esta etiqueta definiremos su nombre por medio del atributo name. Cada opción que deseemos incluir en la lista será incluida en una línea precedida de la etiqueta <option>.

Por lo que nuestra lista de opciones sería definida de la siguiente manera:

<select name=“tipo“>
<option>Profesor/a</option>
<option>Alumno/a</option>
</select>

TEXTO CORTO

Las cajas de texto se definen mediante la etiqueta <input>. Dentro de esta etiqueta debemos especificar el valor de dos atributos: type y name.
La etiqueta es de la siguiente forma: <input type=“text“ name=“correo“>

TEXTO LARGO

Para introducir, por ejemplo, un comentario, una sugerencia... podemos poner a disposición del usuario una ventana con varias líneas. Deberemos indicar el tamaño de la misma:

rows Define el número de líneas del campo de texto.
cols Define el número de columnas del campo de texto.

La etiqueta queda por tanto de esta forma: <textarea name=“comentario“ rows=“10" cols=“40"></textarea>

BOTÓN ENVIAR FORMULARIO

Para dar por finalizado el proceso de relleno del formulario y hacerlo llegar a su gestor, el visitante debe validarlo por medio de un botón de envío. Siempre se define de la misma manera: <input type=“submit“ value=“Enviar“>

BOTÓN BORRAR FORMULARIO

Este botón permitirá borrar el formulario por completo en el caso de que el usuario desee rehacerlo desde el principio. Su estructura sintáctica es análoga a la anterior: <input type=“reset“ value=“Borrar“>

Con ambos botones, nuestro pequeño formulario quedaría definido de la siguiente manera:

Y los visitantes de nuestra web lo verían así:

Además de los tipos de campos que hemos detallado, en un formulario se pueden utilizar muchos otros. Veamos unos ejemplos rápidos (para todos aquellos que queráis profundizar un poco en el tema, podéis encontrar múltiples tutoriales en la Red que os servirán de ayuda, por ejemplo, http://www.webestilo.com/html).

TEXTO OCULTO

Se utiliza para introducir contraseñas... <input type=“password“ name=“nombre“>

BOTONES DE RADIO

Para elegir varias opciones de entre una lista de ellas.

Profesor/a
Alumno/a

<input type="radio" name="queeres" value="1">Profesor/a<br>
<input type="radio" name="queeres" value="2">Alumno/a<br>

CAJAS DE VALIDACIÓN

Este tipo de elementos pueden ser activados o desactivados por el visitante con un simple clic sobre la caja en cuestión.

Soy profesor/a

<input type="checkbox" name="Profesor/a">Soy profesor/a

BOTONES PULSABLES

Para introducir un botón que realice una acción al pulsarlo.

<input type=button value="Texto escrito en el botón">

CAMPO PARA INSERTAR ARCHIVO

Para pedir que nos envíen un archivo adjunto.

<input type="file" name="nombre">