En la mayoría de los proyectos web, es necesaria la implementación de formularios, relacionados con el registro de usuario, la contratación del un nuevo servicio, etc.
Generalmente los formularios no suelen ser muy extensos, por lo que su implementación tampoco requiere demasiado esfuerzo, pero en algunos casos, necesitaremos implementar formularios muy complejos, con numerosos campos, que podrían matar el interes de los usuarios, si los presentamos por completo, en una misma página; por esta razón existen los formularios de varios pasos, que permitirán distribuir los campos en varias páginas, haciendo que el proceso de rellenar los datos no resulte tan abrumador.
El módulo Webform de Drupal, ya viene con un asistente o (wizard), que nos ayudará a crear este tipo de formularios, sin la necesidad de añadir código o dejar la interfaz de usuario administrador de drupal.
Cómo configurar un formulario multi-pasos con webform
Para este ejemplo, hemos creado un formulario donde tendremos que copilar algunos datos de los usuarios y otros relacionados con la empresa en la que trabajan.
Dividiendo el formulario en varios pasos
Ahora que ya hemos añadido todos los campos que vamos a necesitar para nuestro formulario, es el momento de dividirlos en varios pasos o páginas, gracias al asistente de weborm. Así que haremos clic en el botón de Add page o añadir página, ubicado en la parte superior de la ventana de creación del formulario y, a continuación, nombraremos la página de acuerdo con el objetivo de esa parte del formulario; porque de esta manera el usuario sabrá en todo momento, dónde se encuentra y le ayudará a recordarlo, en caso de que no llegara a rellenarlo completamente.
Al hacer clic en el botón Añadir página o (Add page), se desplegará a la derecha de la pantalla, la misma ventana que se activa al añadir cualquier tipo de campo en el formulario; en este caso, sólo añadiremos el nombre que se desplegará cuando el usuario se encuentre en esta parte o paso del proceso.
Repertiremos los mismos pasos, para cada una de las partes del formulario.
Cuando tengamos añadidas todas las páginas, pantallas o "pasos" de nuestro formulario, que se irán agregando a la parte inferior de nuestro webform, lo próximo será distribuir cada uno de los campos, en su página correspondiente. Para ello, solo tendremos que arranstrar dichos campos, posicionándolos debbajo del nombre de la página, como cuando trabajamos con los elementos de un submenú.
Para nuestro ejemplo, vamos hemos creado dos páginas: (INFORMACIÓN DEL USUARIO e INFORMACIÓN DE LA EMPRESA), una vez creadas las dos páginas, hemos arrastrado y colocado cada uno de los campos del formulario, justo debajo de su página correspondiente.
El resultado debería ser igual a la siguiente imagen.
Comprobación, personalización y otras opciones
Cuando hayamos colocado todos los campos del formulario, según nuestras necesidades, podremos confirmar el resultado del mismo, haciendo clic en el botón VER, ubicado en la parte superior de la pantalla de edición del webform. Esto nos llevará a la ventana página que nos enseña cómo queda nuestro webform con todos dus elelementos por defecto, incluyendo un indicador de los diferentes pasos o páginas de los que consta el formulario.
Como habrás podido comprobar, sin cambiar ninguna de las configuraciones, el resultado final, puede servirnos perfectamente para utilizar nuestro webform multi-pasos, tal y como Drupal nos lo presenta. Pero tenemos otras opciones, con las cuáles realizar algunas personalizaciones de nuestro formulario.
Para proceder con la personalización de nuestro webform, podríamos acceder directamente desde el icono de edición rápida, que aparecerá al colocarnos sobre el formulario y seleccionando la opción build, o mediante moviéndonos a la url "/admin/structure/webform/manage/NOMBRE_WEBFORM"
Las opciones disponibles para personalización, variarán según el elemento que seleccionemos en el formulario. Por ejemplo, si seleccionamos una de las páginas o "pasos", podremos personalizar el nombre o palabra que se muestra en los botones que permiten acceder y navegar entra cada una de las páginas.
