• iborra
    borde slide
    DESCUBRE A TRAVÉS DE
    borde slide
    NUESTRO BLOG
    Artículos de interés sobre diseño web

Formulario tipo cuestionario con una sola entrada de texto

formulario-tipo-cuestionario

Existen muchas clases de formularios y cada uno tiene funciones diferentes pero todos buscan recoger unos serie de datos que el usuario previamente a introducido en los campos correspondientes.

En este tutorial veremos como realizar un formulario muy simple que sólo muestre una entrada de texto a la vez, sin ningún tipo de desorden o distracciones, y que revele la siguiente entrada con una transición sutil, suave y agradable.

Seguramente este tipo de formularios los habéis visto ya en algunos sitios web modernos. La ventaja es que el usuario está menos distraído y el llenado de campos parece costar menos trabajo de esta forma. Es evidente que un enfoque como éste tiene sus desventajas, también. El usuario no puede volver atrás o tener una visión general de sus respuestas. Pero eso son características que podrían ser implementadas de alguna manera.

Inicialmente, no mostraremos la flecha de navegación. Cuando hagamos clic en el campo de entrada, haremos que se desvanezca la flecha.

Los números de la parte inferior derecha indican al usuario cuántas preguntas hay en total y en qué pregunta está actualmente. Una vez se avanza a la siguiente pregunta, vamos a mostrar una barra de progreso que indica el nivel de llenado del formulario.

Se puede llegar a la siguiente pregunta haciendo clic en el icono de la flecha o dando a la tecla Enter. En caso de que haya un error, por ejemplo el campo se ha dejado vacío, se muestra un mensaje debajo de la entrada.

A continuación podéis probar un ejemplo de como quedaría el formulario. Lo podéis personalizar a vuestro gusto. Es importante que sepáis, que este tutorial es para inspiraros, lógicamente este formulario no manda las respuestas a ninguna parte, eso ya dependerá de vosotros el configurarlo de la forma correcta.

EJEMPLO DEL FORMULARIO


1 6

Para realizar este formulario, primero descargamos los archivos, el enlace de descarga se encuentra más abajo. Dentro del archivo descargado encontramos cuatro carpetas. Abrimos la carpeta js, copiamos y pegamos el archivo modernizr.js a nuestra carpeta js, siempre que no tengamos este archivo ya, y hacemos un enlace a este archivo, al principio de la página dónde vayamos a poner los enlaces, dentro de la etiqueta <head>, que es dónde se recomienda que se ponga la librería modernizr. Ahora copiamos y pegamos el archivo classie.js a nuestra carpeta js, siempre que no tengamos este archivo ya, y hacemos un enlace a este archivo antes de la etiqueta de cierre </body>. Lo mismo que este último lo hacemos con el archivo stepsForm.js, en este archivo, en el final, se cambia el mensaje de error. Un ejemplo de cómo ponerlo, tener en cuenta que la ruta puede cambiar dependiendo de donde tengáis localizados los archivos.

DENTRO DE <head>
<script src="js/modernizr.js"></script>

ANTES DE </body>
<script src="js/classie.js"></script>
<script src="js/stepsForm.js"></script>

Debajo de donde hemos enlazado el archivo stepsForm.js debemos poner el siguiente script. Ahí se puede cambiar el mensaje final que se muestra cuando se ha rellenado todo el formulario.

<script>
			var theForm = document.getElementById( 'theForm' );

			new stepsForm( theForm, {
				onSubmit : function( form ) {
					// hide form
					classie.addClass( theForm.querySelector( '.simform-inner' ), 'hide' );

					/*
					form.submit()
					or
					AJAX request (maybe show loading indicator while we don't have an answer..)
					*/

					// let's just simulate something...
					var messageEl = theForm.querySelector( '.final-message' );
					messageEl.innerHTML = 'Gracias por tus respuestas!';
					classie.addClass( messageEl, 'show' );
				}
			} );
		</script>

Ahora abrimos la carpeta fonts, copiamos y pegamos los cuatro archivos a nuestra carpeta de fuentes. Estos archivos los necesitamos para el icono de la flecha. Luego en el archivo css acordaros de poner la ruta correcta donde los tengáis alojados.

Seguimos y abrimos la carpeta css, copiamos todo lo que hay dentro del archivo style-formcuestionario.css y lo pegamos dentro del archivo principal css de nuestro tema. Podéis cambiar cualquier cosa a vuestro gusto o añadir otros elementos css para que quede mejor en vuestro sitio web. Es importante entender el código pues lo tendréis que retocar un poco.

Una vez puesto los archivos anteriores, sólo nos quedará poner el código HTML del formulario. Dentro de la carpeta demo está el código del formulario de ejemplo visto anteriormente. Ponerlo en la página donde vayáis a utilizarlo. Y con esto ya lo tendremos listo!

Para los que utilizáis Wordpress, si queréis algo similar os aconsejo los plugins gratuitos como Quiz And Survey Master, Watu y Quiz Cat. Como plugins de pago aconsejo Wordpress Viral Quiz y Wordpress Quiz.

A continuación os dejo el enlace de descarga con todos los archivos del formulario. Espero que os sirva este tutorial para poder realizar vuestro formulario tipo cuestionario.

ENLACE DE DESCARGA
Formulario tipo cuestionario (Iborra Web Design)

CONTRASEÑA DEL ARCHIVO
iborra.es

Comenta y comparte este post!

¿Tienes alguna sugerencia, idea, consejo, duda, pregunta, agradecimiento, encuentras algún error o este post no está actualizado? Entonces esperamos tu comentario.

También puedes recomendar y compartir este post. Estamos muy agradecidos por tu apoyo!

Comentarios (0)

No hay Comentarios todavía en este post. Podrías ser el primero!

Deja un comentario

Este blog se nutre de los comentarios de los visitantes! Así que vamos, únete a nosotros!

Por favor esperamos que entiendas que se eliminarán aquellos comentarios que no tengan nada que ver con el contenido de este post o siempre que se utilicen palabras ofensivas.

COMENTARIO PARA ESTE POST

Imagen mínimo: 300x300 - Formato: jpg o png - Tamaño máximo: 10Mb

CAPTCHA code