Tutorial de Bubble.io - Desarrollar el asistente de formulario / formulario de varios pasos en Bubble

En este vídeo aprenderás a desarrollar una forma multinivel en Bubble.

Das Template Beispiel: https://bubble.io/template/multi-step-project-form-1544096668849x617675551948144600

Transcripción del vídeo:

Hola, mi nombre es Chris Strobl, soy el fundador de Nocode Alemania y hoy os voy a mostrar cómo podemos desarrollar un formulario multinivel en la burbuja. Probablemente lo sepa por muchos sitios web en los que el flujo de Zainab o el flujo de entrada de datos se ha dividido en varias páginas.

Y también podemos desarrollar esta llamada forma nosotros mismos en la Burbuja. Empecemos de inmediato y entremos en el editor. Ya he preparado algunas cosas y empezamos directamente con la base de datos.

Entramos en Datos y seleccionamos Evento aquí y ves que tenemos diferentes archivos de datos, concretamente Nombre. Este es un texto, el nombre del evento, la descripción, también un campo de texto.

El enlace en línea, el enlace al evento, también un campo de texto, la dirección, una dirección geográfica y para esto también se necesita Google Maps API Keys El video que se ve arriba, que se desvanece en, donde nosotros mismos crear claves de la API en la burbuja de Google Maps. Una fecha de inicio, una hora, es decir, una fecha y una hora de finalización. También es una fecha y, por último, el número de participantes.

Esto es un número. Además, tenemos un usuario en la base de datos y este usuario tiene un campo de texto de nombre, un campo de texto de apellido y el número de teléfono como campo de texto además de los campos ESTÁNDAR. Aquí utilizamos texto en lugar de números porque nos da más libertad a la hora de importar los datos, ya que algunos usuarios, por ejemplo, introducen +49 y esto no quedaría cubierto con un campo puramente numérico. A continuación entramos en la pestaña diseñada y desarrollamos el formulario sin flujos de trabajo y sin condicionales.

Eso es lo que hacemos en el siguiente paso. En primer lugar, creamos un formulario aproximado. A este tipo de contenido lo llamamos "Forma de grupo". Tomemos un evento. Hacemos clic en Eliminar estilo, estilo de borde sólido y cambiamos el Border Collie a 5 5 5 cada uno dentro de este grupo. Ahora vamos a añadir los pasos individuales al formulario, es decir, el Grupo. Paso 1. también Tipo de evento de contenido. Llamaremos a este grupo Paso 1, volveremos a quitar el Estilo y haremos Color Plano aquí. 4 5 5 4 5. Y en el Grupo Paso 1 añadimos un campo de texto.

El texto es Arial, tamaño 16 y lo centramos, hacemos la altura 27. Y ajustamos el ancho aproximadamente al texto. Lo centramos todo. Y toma 40 píxeles del margen superior de abajo. Vayamos a los formularios de entrada y tomemos un campo de entrada. El titular de la burbuja es el nombre del evento. Y de nuevo 40 píxeles en el espacio de abajo tomamos un campo de entrada multi lein. El marcador de posición es la descripción del evento.

Aquí tomamos el estilo STANDARD Line Multi Line Input Field. La Ciudad es de nuevo el Área 16 y el Negro 1,5. Centramos horizontalmente, vamos a 20 aquí y hacemos una altura de 125 abajo. Ahora tomamos un texto, lo copiamos. Cambia la alineación a la izquierda. X 250. Y el texto se llama Tipo de evento. De nuevo, debajo de los botones de radio. Tomamos el estilo STANDARD Radio, que ya he definido. Esto es de nuevo areal y 16 píxeles. Opciones estáticas Escribimos dos, una online y otra offline. Y lo que es importante aquí es dos Collins Número de Colón 2 Llamamos a este botones de radio sólo por tipo de evento.

Luego queremos añadir un enlace al evento, así que copiamos este campo de entrada y decimos enlace al evento, este campo de entrada sólo es visible si hemos seleccionado en línea. Eso significa que vamos al elemento de la Página visible se carga no, ir a la Condicional, añadir una nueva condición y decir si. Botones de radio tipo de evento es el valor y escribimos en línea, por lo que la estática y, a continuación, que el elemento es visible y seleccionamos que. Por el contrario, cuando se selecciona fuera de línea, queremos introducir una dirección. Para ello vamos a los formularios de entrada a la caja de búsqueda. Añadimos el cuadro de búsqueda con exactamente la misma configuración que los formularios de entrada alternativos para el enlace del evento. Lo ponemos encima y escribimos. Dirección del evento. Ahora utilice Lugares Geográficos aquí y de nuevo desactivar el elemento es visible a la Página se carga ir a las condiciones y ahora de nuevo añadir una condición Si los botones de radio Tipo de evento Valor es fuera de línea, entonces este elemento es visible. Ya hemos completado el primer paso.

Hacemos clic una vez en Grupo Paso 1 Si su elemento Árbol está activado, entonces vemos aquí. Tenemos la forma más dura en ella. Grupo Paso 1 Copiamos esta galleta, la añadimos y nos aseguramos de que está dispuesta de la misma manera. Llamamos a este nuevo grupo Grupo Paso 2 Lo importante ahora es que hagamos invisible el Grupo Paso 1. Y después cambiamos ahora aquí en el grupo dos, puede ver esto de nuevo en detalle En Grub 2 ahora cambiamos el texto Paso 2. Más detalles sobre el evento.

Eliminamos los demás campos. Y especialmente los campos que no son visibles. Enlace al evento y caja de búsqueda Dirección del evento. A continuación añadimos un campo de texto. Inicio, fecha y hora del evento y ahora añadimos el selector de hora del día. En los formularios de entrada el selector de fecha y hora. A esto lo llamamos Seleccionador de Hora del Día en lugar de Fecha y Hora. Y tomamos la fecha y la hora como campo de entrada, para tener también la hora. Puede ver cómo se expande el conjunto aquí. Mantenemos el Intervalo de Tiempo en 30 y el Formato de Tiempo en 1726. También se puede cambiar esto y vamos al Campo de Entrada No Código Beamt. Esto se debe a que si seleccionamos sólo la fecha y no la hora. Que el valor no se guarda en absoluto.

Y por eso queremos dar al usuario una respuesta gráfica, que puede reconocer aquí. Es decir, cuando entramos en el estilo, vemos que tenemos un condicional. Si las teclas API de la hora del día no están ocupadas, hay un marco alrededor del campo de entrada, por así decirlo, que está en rojo. Y esta es exactamente la información visual que queremos dar al usuario. Si seleccionamos el campo de entrada No Code BMP aquí, copiamos estos dos elementos aquí y los pegamos debajo. Pero cambia el texto por n fecha y hora. Y también aquí una fecha y hora. Si los valores son los mismos, entonces copiamos el texto de nuevo. Y escribe el número de participantes.

Y, desgraciadamente, siempre inserta los formularios de entrada bien abajo. Los arrastramos al editor. Toma el Bubble.io a cero. Hacer todo en pasos de 10, por desgracia Typekit estación simple es horizontal y tomamos el Border Collie en azul. El color de fondo sigue siendo blanco y las manos de Algolia también las hacemos azules, pero un poco más oscuras. Y esto lamentablemente lo llamamos Entrada Número de Participantes por debajo de ahora añadimos un campo de texto mostrando el número de participantes, es decir en Buscar datos dinámicos. Desafortunadamente Entradas, Número de participantes, valor y hacemos este campo bajo el desafortunadamente. Ahora, también el grupo 2 hecho, es decir, ahora viene el grupo final, copiamos este grupo de nuevo. Se adapta. Ponga esto exactamente encima del grupo 3 y escriba de nuevo un tipo de contenido. Hacemos invisible este grupo 2 y eliminamos todos los elementos esenciales. Y ahora escriba el paso 3. Información sobre el organizador Y aquí necesitamos de nuevo algunos campos de entrada. El primero es el correo electrónico de entrada. Contenido, formato, correo electrónico. Centrar horizontalmente. Debajo copia todo el asunto. Vamos a hacer Tipo de contenido Texto, porque todo el nombre y el Campo de entrada Nombre. Por debajo de eso. Apellido.

Y el campo se llama su apellido, de nuevo un texto. Debajo, Entrada, Interesado, Contraseña. Y tomamos la contraseña de formato de contenido. Este campo ya está creado automáticamente en la cuenta de usuario de Bubble, por lo que creamos un usuario aquí con el correo electrónico y la contraseña y finalmente el número de teléfono. Y esto es un campo de texto. Ahora tenemos los tres grupos listos. Paso uno, dos y tres y ahora necesitamos la navegación. Eso significa que ponemos un botón. Coge el botón primario aquí.

Nombra este siguiente paso. Y copie este botón en Paso anterior. Por último, copiamos el botón Paso siguiente y lo colocamos justo encima del botón Enviar. Insertaremos la lógica de esto inmediatamente cuando tengamos el condicional de nuevo. Primero vamos una vez a la forma de fosa y creamos un nuevo estado Edo New State y llamamos a este paso y este es un número el Default Value. Pues esta es una. Alternativa.

No hay un valor por defecto para esto y va en los flujos de trabajo. Generalmente lo hacemos cuando se carga la página, por ejemplo, el estado de es un elemento, la forma aproximada. Aquí está el paso y lo ponemos a uno. Entonces entramos en el diseño. Hacer que el botón de Enviar no sea visible y pasar al botón de Iniciar/Editar flujo de trabajo y decimos Ver estado de un elemento. Paso del formulario y hacemos formularios de grupo. Paso más uno. Y decimos después que si Burbuja Condicional siguiente paso si Formularios Pit. Paso. Mayor es igual a tres.

Entonces este elemento ya no es visible. El elemento no es visible. Luego vamos al botón Paso anterior. Iniciar/editar el flujo de trabajo. Estado de si grupo de elementos Forma. Paso. Paso del formulario de cabecera. Menos uno y hacemos la Forma de Grupo de Oliva. El paso es mayor que uno. Esto evita que el surco se vuelva negativo antes del paso. Entonces entramos de nuevo en el diseño y decimos Este elemento es visible página de inicio. No. Y hacemos un condicional. Si el pozo está antes del paso. Es de tamaño 1 y forma de grupo. Paso. es menor o igual a tres, entonces este elemento es visible. Ahora siguiente vamos a los grupos individuales aproximadamente paso uno Este elemento es el viento del norte, desplegar y la página se carga, pero sólo si el grupo en el paso anterior es exactamente uno, entonces este elemento es visible, que la casilla de verificación fuera. Hacemos lo mismo con el Grupo.

Paso 2 No hay código visible en la página se carga y la condición es de nuevo Grupo Formulario Paso es exactamente 2, entonces es visible y análogo en el Grupo. Paso 3 El elemento es Northwind Deploy y Page Load, pero condicional si Group Form. Paso es exactamente tres, entonces es visible Activar casilla de verificación. Y ahora hacemos el flujo de trabajo más complejo de toda la aplicación, que el botón quiere enviar esto desde el elemento try. Iniciamos/editamos la cuenta del flujo de trabajo siendo usuario. Seleccionamos Email, Entradas, Valor de los Emails como Valor de la Contraseña de Entrada. También cambiar de campo. El pulso del primer nombre. Valor del primer nombre. Cambiar Campo, Apellido, Entrada, Valor del Apellido. Y número de teléfono, entrada, número de teléfono, valor.

Luego creamos un nuevo evento Data Create a new thing Type of content Nocode Field y aquí tenemos ahora todo el Input Field. El nombre es el nombre de importación del valor del evento. La descripción es igual a la importación multilínea. Descripción del evento. La fecha y hora de inicio es el selector de fecha Fecha y hora de inicio Valor. La fecha de finalización es un valor de fecha y hora. El número de participantes es. Lamentablemente número de entrada de la creencia de los participantes y el enlace en línea es. El enlace de entrada del evento Valor y dirección es Caja de búsqueda. Dirección del evento Valor Tenga en cuenta que el enlace en línea está vacío si no es un evento en línea, o la dirección también está vacía. Por supuesto, también se puede estructurar de forma diferente o dar diferentes respuestas al usuario. Todas las opciones están abiertas aquí.

Y por último, hacemos la navegación. Ir a la página Evento. Y enviamos el resultado del evento de estado. La página del evento que ya he creado antes y esto es una especie de evento de contenido y tenemos los campos individuales del evento aquí. Y finalmente tenemos que hacer una cosa más, que está en el botón de enviar también. El elemento es No Code visible y carga de la página y la condicional es si Group Form. Paso es tres, entonces este elemento es visible. Vamos a ir a la vista previa una vez y echar un vistazo a ella.... Llamamos al evento en Berlín Nocode. Como descripción mensual Smid ab.

El tipo de evento, ya sea en línea o fuera de línea Puede ver la dirección del evento aquí. Estamos ejecutando esto. Ahora ves cómo también obtenemos una dirección, por así decirlo. Entonces vamos a. Siguiente paso Vea cómo ahora hemos desvanecido en el paso anterior y los archivos están todavía allí. Elegimos una fecha. Jueves 19 a. Jueves a. 22:30 El número de participantes. ¿Ves cómo ahora podemos llegar a los 1000 participantes? Hacemos 30 participantes. Siguiente paso.

Y sométase. Y ahora ve como llegamos a este evento y todos los datos son dinámicos y al mismo tiempo también tenemos un enlace al evento. Y así hemos creado un formulario de varios niveles en la burbuja. También puede utilizar esta plantilla gratuita de Nocode Icon aquí.

Lo que te he enlazado en las notas del programa, si te ha gustado este vídeo, no dudes en hacer clic en el botón de "me gusta" y escribir en nuestro canal. Si tiene alguna pregunta, no dude en escribirnos en los comentarios. Te deseo que sigas teniendo éxito y que nos veamos pronto.