BreezingForms – Crear formulario de dos columnas

El componente joomla! BreezingForms, como ya conocen la mayoría de usuarios joomla, es una extensión para joomla! que te permite crear formularios para que los navegantes interesados rellenen y envíen, para contacto, petición de un servicio, envió de archivos, entre otras muchas posibilidades. Hace unos días preguntaron en el foro, cómo se podían crear formularios a dos columnas, y por el posible interes de los usuarios joomla!, he publicado este tutorial…

Esteticamente, breezingforms, con la aparición de la posibilidad de crear themes para la vista de los formularios, ha ganado muchos enteros, y con el añadido de la técnica Responsive Web Design, podemos permitirnos crear formularios que ocupen varias columnas para el caso de pantallas grandes, tipo smart TV o pantallas para pc o mac de tamaño considerable y que al visualizar el formulario en un móvil, las columnas, pasen a formarse en una sola para la vista cómoda desde un móvil.

Todo un adelanto y por ello, estoy escribiendo este tutorial, que nos va a permitir presentar nuestros foirmularios de forma mas elegante.

Crear un formulario de 2 columnas con BreezingForms

Accedemos a nuestra administración y en Componentes / BreezingForms / Manage Forms y accedemos a la pantalla donde se encontraran almacenados nuestros formularios. Arriba a la derecha hacemos clic en el icono QUICKMODE y se presentara la ventana para iniciar la creación del formulario.

Ahi mismo, le daremos un nombre a nuestro formulario para distinguirlo de otros que podamos crear.

Recordar que a cada paso creado, editado o borrado, lo primero es siempre hacer clic en SAVE PROPERTIES (Salvar o guardar propiedades) y luego le damos a guardar. Si guardamos directamente sin salvar las propiedades, los campos creados, editados y demas, NO seran guardados.

Configuración general del formulario

Creado el formulario, pasamos a configurar aspecto, haciendo clic en la pestaña Advanced, seleccionando las opciones varias que hay, y el theme que vamos a utilizar y que se podra personalizar aún mas con la edición de su archivo css de los estilos, pero eso sera en otra ocasión, con tiempo, lo trataremos.

Crear la pagina del formulario

Ahora procedemos a crear la estructura completa del formulario, que esta formado para una pagina, secciones y elementos dentro de cada sección.

Para añadir paginas, elementos y secciones dentro del formulario, siempre debemos tener en cuenta de tener señalado el objeto que le precede antes de crear otro. Es decir, que si vamos a crear un nuevo elemento, deberemos tener señalada la sección a donde queremos que aparezca el elemento de campo del formulario.

Hacemos clic en New Page y salvamos propiedades y guardamos. El paso siguiente es crear nuestra primera sección del formulario desde el componente breezingforms para crear un formulario con dos columnas. Hacemos clic en New Section y como formato o tipo de vista selecionar Allow in a row.

Creación de las dos columnas del formulario

Observar el arbol, que presenta el formulario terminado, en la imagen como justo despues de la primera sección se crea OTRA sección aderida a la primera, llamada DATOS de ACCESO y esta es la primera columna de las dos que vamos a crear.

Al crear esa sección, la clave se encuentra en el tipo de vista que elegimos, y si en la primera sección habiamos elegido Allow in a Row, para crear esta columna vamos a seleccionar Wrap after each element, que traducido significa “Envolver despues de cada elemento” y lo que nos va a permitir, crear cuantas colmunas queramos, partiendo siempre de la primera sección que se creo con el tipo Allow in a row que traducido significa “Perimitir la entrada de filas…en este caso columnas).

Para crear la segunda columna, en este caso llamamos la sección DATOS DE LA FAMILIA, fijaros que se ha creado desde la primera sección. Se puede observar la alineación con la flecha que parte de la primera sección a esta segunda columna, tal y como parte la primera columna de la primera sección.

Según el orden en el que creamos y organizamos las sección segundarias que forman las columnas, asi se presentaran al nevegante que acceda a rellenar el formulario.

Bien, este es el modo en el que se crean formularios con varias columnas con breezingforms y como pueden ver, no es nada complicado.

El resultado de este formulario lo muestro en la siguiente captura. El formulario se ha creado para una AMPA (Asociación de Madres y Padres de Alumnos), con añadidos como encriptación de campo para la visualización desde la administración por un solo super administrador (en este caso para el campo de inserción de la cuenta bancaria para su domiciliación).

Encriptando los datos, para impedir el visionado por cualquier otro usuario, asi como el registro directo en joomla desde el mismo formulario de breezinforms, con una auto asignación para el nombre de usuario, con prefijo y numero segun orden de registro y un script para la validación de DNI. Lo publicare en otro contenido mas adelante, con más tiempo.

Resultado del tutorial para la creación de un formulario a dos columnas con breezingforms

El mismo formulario, visto desde una tableta, haciendo uso de la técnica Responsive web design, auto adaptado y mostrado en una sola columna.

Observar al pie de la imagen, aunque cuesta un poco verlo, que son las dos de la mañana y ya veo poco :), como se muestra la segunda columna DATOS DE LA FAMILIA, que se desliza a la parte inferior para un visionado correcto en moviles y tabletas.

Descargar BreezingForms

Guardar

Guardar