Educa62 Formulario Web

De EducaMadrid Ayuda
Saltar a: navegación, buscar


Los Formularios Web básicamente son un medio de comunicación entre usuarios. Podemos rellenar estos formularios web de igual modo que hacemos con los formularios de papel, utilizando casillas de selección, botones de opción, o campos de texto.

Los formularios son importantes porque permiten a los usuarios interactuar con la página, ya sea para enviar comentarios al usuario propietario de la página, buscar información, etc. y cuánto más limpio y atractivo sea su diseño mejor comunicación se establecerá entre nosotros.


Vídeo tutorial: Cómo agregar un Formulario Web


Agregar Formulario Web

Una vez estemos situado en la página en la cual queramos incorporar un Formulario web, pulsamos sobre Añadir, a continuación desplegamos Herramientas y seleccionamos Formulario web pulsadon "Añadir" situado a la derecha.


A continuación vemos como el recurso queda incorporado en nuestro sitio web.


Formulario web 1 2015.png


Para configurar el formulario, se debe ir al botón Opciones y en el menú que se despliega seleccionar Configuración. Se abrirá una nueva ventana.


Formulario web 2 2015.png


El configuración del formulario está dividido en tres partes fundamentales que debemos cumplimentar según nuestras necesidades.


Formulario web 3 2015.png



Información del Formulario

Título y Descripción

Veamos el proceso con un ejemplo:


1.- Título: Escribiremos una palabra o frase con el nombre o asunto del formulario que vamos a crear. Por ejemplo: "Formulario de Información"

2.- Descripción: Este campo nos permite dar una idea general de las distintas partes o propiedades del formulario.

3.- Requerir CAPTCHA: Captcha es el acrónimo de Completely Automated Public Turing test to tell Computers and Humans Apart (Prueba de Turing pública y automática para diferenciar a máquinas y humanos).

La típica prueba consiste en que el usuario introduzca un conjunto de caracteres que se muestran en una imagen distorsionada que aparece en pantalla. Se supone que una máquina no es capaz de comprender e introducir la secuencia de forma correcta por lo que solamente el humano podría hacerlo.

Utilizaremos un captcha si queremos evitar que algún "intruso" pueda acceder a nuestro formulario. Para ello, bastará con marcar la opción "Requerir CAPTCHA".

Captcha.png

4.- Redirigir al usuario a una URL tras el envío del formulario:En este campo insertaremos una dirección de Internet a la que el usuario será redirigido en el caso que lo requiera tras haber efectuado el envío del formulario.


Formulario web 4 2015.png


Acciones con los datos del Formulario

Las acciones de formulario son los comportamientos que se llevan a cabo cuando se devuelve un formulario al servidor para que lo procese.


1.- Correo electrónico

Si deseamos que al pulsar el botón de envío del formulario se manden los datos por email, deberemos tener marcada la opción "Enviar por correo electrónico" indicando el asunto del correo así como la dirección de correo electrónico en la cual queremos recibir los datos del formulario.

2.- Base de datos

Si deseamos que al pulsar el botón de envío del formulario se guarde la información en una base de datos, deberemos tener marcada la opción "Base de datos".

Es importante saber que se puede tener seleccionada una o las dos posibles opciones de envío de formulario.

3.- En el caso del envío a base de datos, podremos exportar los datos y almacenarlos en un fichero en formato "csv" que será generado por la propia aplicación:


Formulario web 5 2015.png


Por ello, recomendamos utilizar el envío del formulario por correo electrónico o en base de datos.


Campos del Formulario

Es conveniente indicar al usuario qué campos son obligatorios. El método más utilizado consiste en insertar el típico asterisco al lado de la etiqueta o campo.


Los distintos tipos de campos de un formulario son los cuadros y botones individuales con los que escribirá información y rellenará el formulario propuesto cualquier usuario o visitante de nuestro sitio web.

Por defecto, el recurso muestra tres apartados: Name, Rating y Comments. Cada uno de estos apartados podremos modificarlos, eliminarlos o bien incorporar nuevos.


Formulario web 6.2 2015.png


En la siguiente imagen podemos ver cómo realizar estas acciones:



Formulario web 8 2015.png


A continuación describiremos cada una de las opciones que tenemos disponibles en el recurso Formulario Web de EducaMadrid:


Texto

Utilizaremos este tipo de campo cuando queramos permitir cualquier tipo de respuesta a una pregunta del formulario, proporcionando para ello sólo una línea en la que se debe escribir la información requerida.

  • Si se requiere que el campo sea obligatorio entonces "NO" se debe marcar la casilla de "Opcional".
  • Si requiere agregar o eliminar campos sólo deberemos pulsar los símbolos (+,-).


Wfo7.png



Opciones

Los combo se utilizan para restringir la respuesta de una pregunta a unas determinadas opciones de respuesta, de las cuales sólo es posible escoger una. Para incluir las diferentes opciones de respuesta, debemos escribir todas en la misma línea separadas por una coma (,). Así mismo, las respuestas de los combo estarán ocultas para ocupar menos espacio en el formulario.

Se diferencian de los Botones de elección en que las respuestas de los combo están ocultas para ocupar menos espacio en el formulario.


Wfo9.png



Caja de texto

Utilizaremos este tipo de campo cuando queramos permitir cualquier tipo de respuesta a una pregunta del formulario, proporcionando para ello varias líneas en las que escribir información.


Wfo10.png


Botones de elección

Utilizaremos esta opción para restringir la respuesta a una pregunta a unas determinadas opciones de respuesta, de las cuales sólo es posible escoger una. Lo haremos en los casos en que realmente sólo es posible una respuesta, por ejemplo, "sexo: hombre o mujer". También podremos utilizarla para hacer al usuario decantarse por la opción preferida o más cercana.


Wfo11.png


Párrafo

Utilizaremos esta opción cuando queramos introducir un texto informativo o descriptivo para su lectura por parte del usuario. Observamos que este tipo de campo, lógicamente, no muestra la casilla "Opcional".


Wfo12.png


Casilla de selección

Las "Casilla de selección" podremos utilizarlos en dos casos:

1.- Para presentar una única opción que no es obligatoria. Por ejemplo, para confirmar la lectura de algún dato, optar por recibir un correo electrónico, etc. Para ello, será necesario tener marcada en todos los casos la casilla "opcional".


Wfo13.png


2.- Otra opción más avanzada consiste en restringir la respuesta de una pregunta a unas determinadas opciones de las cuales es posible escoger varias. Por ejemplo, para recoger información de los usuarios acerca de preferencias, gustos o cualquier otro tipo de pregunta que requiera una respuesta múltiple y variada.

Para ello será necesario crear tantos campos de tipo Casilla de selección como opciones de respuesta queramos ofrecer, marcando todos y cada uno de ellos como opcionales. Podremos, además, introducir el enunciado de la pregunta mediante la previa creación de un campo tipo párrafo tal como se muestra en la imagen:


Checkbox ejemplo1.png



Mover campos

Para reorganizar el orden de los campos solo tendremos que posicionar el cursor sobre el nombre del campo a mover y arrastrar sin soltar hasta llevarlo a la posición que se requiera. Los desplazamientos pueden efectuarse tanto hacia arriba como hacia abajo dependiendo de la posición a la que queramos llevar el campo correspondiente, como se muestra en la imagen,


Wfo23.png


luego de arrastrar hacia abajo soltamos el campo en la posición requerida,


Wfo24.png


Añadir/Eliminar campos

Para Agregar o Eliminar campos dentro de los formularios solo debe pulsar en los botones que se encuentran al final de cada uno de ellos, tal y como se muestra a continuación:


Wfo14.png



Guardar (publicar) Formulario

Guardar el formulario equivale a publicarlo para que los usuarios lo rellenen y lo envíen pero esta acción no implica que el formulario haya quedado archivado de forma permanente. Cuando quitemos el recurso de nuestra página web, el formulario desaparecerá y no tendremos forma de recuperar el mismo salvo que hayamos "archivado su configuración".

Para publicar el formulario bastará con pulsar sobre el botón "Guardar" que se encuentra al final del formulario:


Wfo15.png


Archivar la configuración del Formulario

Cuando archivamos la configuración de un formulario, en realidad estamos guardando una copia de su plantilla, igual que cuando se guarda un archivo en un equipo.

Esta copia del formulario que guardamos podrá ser modificada y, a continuación, volver a publicarse en cualquier otro sitio o espacio web. De este modo, podremos reutilizar el formulario tantas veces como queramos y tener guardadas y disponibles distintas variaciones del mismo.

Desplegamos "Opciones" iremos al botón "Exportación/Importación"


Formulario web 9 2015.png


  • 1.- Seleccionamos la pestaña "Exportar".
  • 2.- Seguidamente seleccionamos la pestaña "Crear un proceso de exportación".
  • 3.- Escribimos un nombre o dejamos el que esta por defecto.
  • 4.- Marcar la casilla de "Configuración" o pulsar el botón "Cambiar" para elegir nuestra propia configuración.
  • 5.- Asignar permisos.
  • 6.- Pulsamos "Exportar".


Formulario web 10 2015.png


Tras Exportar el "archivo" la herramienta nos devuelve el mensaje de confirmación.


Formulario web 11 2015.png