Bubble.io Tutorial - Form Wizard / Multi Step Form in Bubble entwickeln

In diesem Video lernt ihr eine mehrstufige Form in Bubble zu entwickeln.

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

Video-Transkript:

Hallo, mein Name ist Chris Strobl, ich bin der Gründer von Nocode Germany und ich zeige euch heute, wie wir eine mehrstufige Form im Bubble entwickeln können. Ihr kennt das wahrscheinlich von vielen Webseiten, wo der Zainab Flow oder der Daten Input Flow auf mehrere Seiten heruntergebrochen wurde.

Und diesen sogenannten Form können wir eben auch im Bubble selbst entwickeln. Wir legen direkt mal los und gehen in den Editor. Ich habe ein paar Sachen schon vorbereitet und wir fangen direkt mal an mit der Datenbank.

Wir gehen in Data und wählen hier Veranstaltung aus und ihr seht wir haben verschiedene Data Files, nämlich Name. Das ein Text, der Name der Veranstaltung, die Beschreibung, ebenfalls ein Textfeld.

Den Online Link, der Link zur Veranstaltung, auch ein Textfeld, die Adresse, eine Geographic Adresse und hierfür benötigt ihr dann auch Google Maps API Keys Das Video seht ihr oben, das ist eingeblendet, wo wir selber API Keys im Bubble für Google Maps erstellen. Ein Start Datum, Uhrzeit, das ist ein Date und ein Enddatum Uhrzeit. Das ist auch ein Date und schließlich die Teilnehmerzahl.

Das ist eine Number. Darüber hinaus haben wir in der Datenbank einen User und dieser hat neben den STANDARD Feldern ein Vornahme Textfeld, ein Nachname, Textfeld und die Telefonnummer als Textfeld. Hier benutzen wir Text statt Number, weil es uns mehr Freiheit gibt beim Daten Import, weil manche Nutzer zum Beispiel +49 eingeben und dies würde mit einem reinen Nummern Feld dann nicht abgedeckt werden. Als nächstes gehen wir in das designte Tab und entwickeln nun die Form ohne Workflows und ohne Conditional.

Das machen wir im nächsten Schritt. Als erstes erstellen wir eine grobe Form. Wir nennen diese Group Form Type of content. Nehmen wir eine Veranstaltung. Wir klicken auf Remove Style, border Style Solid und wir ändern die Border Collie auf je 5 5 5 innerhalb dieser Gruppe. Fügen wir nun die einzelnen Schritte der Form hinzu, das heißt Group. Schritt 1. Ebenfalls Type of content Veranstaltung. Wir nennen diese Gruppe Schritt 1, wir entfernen wiederum den Style und machen hier Flat Color. 4 5 5 4 5. Und in der Group Schritt 1 fügen wir ein Textfeld hinzu.

Der Text ist Arial, Größe 16 und wir zentrieren mittig, die Höhe machen wir mit 27. Und die Breite passen wir ungefähr dem Text an. Wir zentrieren das Ganze. Und nehmen 40 Pixel vom oberen Rand darunter. Gehen wir in die Input forms nehmen ein Input Field. Der Blase Holder ist der Name der Veranstaltung. Und auch hier wieder 40 Pixel im Abstand darunter nehmen wir einen Multi lein Input Field. Der Platzhalter ist Beschreibung der Veranstaltung.

Wir nehmen hier den Style STANDARD Line Multi Line Input Field. Die City ist wiederum Areal 16 und Schwarz 1,5. Wir zentrieren horizontal, gehen hier auf 20 und machen eine Höhe von 125 darunter. Nehmen wir nun einen Text, wir kopieren diesen. Ändern die Ausrichtung auf links zentriert. X 250. Und der Text heißt Art der Veranstaltung. Wiederum darunter nehmen wir Radio Buttons. Wir nehmen den Style STANDARD Radio, den ich vorher schon definiert habe. Dieser ist wiederum Areal und 16 Pixel. Static choices Wir schreiben zwei, einmal online, einmal offline. Und was wichtig ist hier zwei Collins Number of Columbus 2 Wir nennen dies Radio Buttons nur nach Art der Veranstaltung.

Anschließend wollen wir noch einen Link zur Veranstaltung hinzufügen, dafür kopieren wir dieses Input Field und sagen Link der Veranstaltung dieses Input Field ist nur sichtbar, wenn wir wiederum online ausgewählt haben. Das heißt, wir gehen das Element des visible Page is loaded nein, gehen in das Conditional, fügen einen neue Bedingungen hinzu und sagen wenn. Radio Buttons Art der Veranstaltung Value ist und wir schreiben online, also den statischen und dann ist dieses Element visible und wir wählen das aus. Umgekehrt wollen wir, wenn offline ausgewählt wird, eine Adresse eingeben. Dafür gehen wir die Input forms auf Search Box. Wir fügen die Search Box hinzu mit genau der gleichen Konfiguration wie die Alternative Input forms für den Link der Veranstaltung. Wir legen das einfach drüber und schreiben. Adresse der Veranstaltung. Nutzen hier nun Geographic Places und wir deaktivieren wiederum das Element ist visible, um Page is loaded gehen in die Bedingungen und fügen nun wiederum eine Bedingung hinzu Wenn Radio Buttons Art der Veranstaltung Value ist offline, dann ist dieses Element sichtbar. Wir haben nun den Schritt eins fertig.

Wir klicken einmal auf Group Schritt 1 Wenn Ihr Element Tree aktiviert, dann sehen wir hier. Wir haben die grobe Form darin. Group Schritt 1 Wir kopieren diesen Cookie, fügen hinzu und achten darauf, dass er gleich angeordnet ist. Wir nennen diese neue Gruppe Group Schritt 2 Was nun wichtig ist, ist, dass wir Group Schritt 1 nicht sichtbar machen. Und anschließend ändern wir nun hier in Gruppe zwei, könnt das noch mal im Detail sehen In Grub 2 ändern wir nun den Text Schritt 2. Weitere Details zur Veranstaltung.

Wir löschen die anderen Felder. Und vor allem auch die nicht sichtbaren Felder. Link zur Veranstaltung und Search Box Adresse der Veranstaltung. Als nächstes fügen wir ein Textfeld hinzu. Start, Datum und Uhrzeit der Veranstaltung und wir fügen jetzt den Day Time Picker hinzu. In Input forms Date Time Picker. Wir nennen diesen Day Time Picker statt Datum und Uhrzeit. Und als Input Field nehmen wir Date und Time, um eben auch die Uhrzeit zu haben. Ihr seht, wie sich das Ganze hier erweitert. Das Time Intervall behalten wir bei 30, das Time Format 1726. Ihr könnt das auch ändern und wir gehen auf das Input Field No Code Beamt. Das liegt hieran, dass wenn wir nur das Datum auswählen und nicht die Uhrzeit. Dass der Wert gar nicht gespeichert wird.

Und deswegen wollen wir dem User ein grafisches Feedback geben, was er hier erkennen kann. Das heißt, wenn wir in den Style reingehen, sehen wir, dass wir ein Conditional haben. Wenn der Day Time API Keys nicht belegt ist, gibt es quasi rund um das Input Field einen Rahmen, der in Rot ist. Und genau dieses visuelle Feedback wollen wir dem Nutzer geben. Wenn wir hier das Input Field No Code BMP auswählen Wir kopieren jetzt hier einmal diese zwei Elemente, fügen diese darunter ein. Ändern aber den Text auf n Datum und Uhrzeit. Und auch hier ein Datum und Uhrzeit. Ansonsten sind die Werte gleich, anschließend kopieren wir noch mal den Text. Und schreiben Teilnehmerzahl.

Und fügen darunter die Input forms leider immer gut ein. Diese ziehen wir in den Editor. Nehmen den Bubble.io bei Null. Den Max Value bei 1000. Machen das ganze in 10er Schritten ist leider Typekit simple Station horizontal und die Border Collie nehmen wir ein Blau. Die Background Color bleibt weiß und die Hände Algolia machen wir ebenfalls blau, aber etwas dunkler. Und dieses leider nennen wir es leider Input Teilnehmerzahl darunter fügen wir nun ein Textfeld hinzu, indem wir die Teilnehmerzahl anzeigen, nämlich in Search Dynamic data. Leider Inputs, Teilnehmerzahl, value und dieses Feld machen wir unter den leider. Nun, auch Gruppe 2 fertig, das heißt, jetzt kommen noch die finale Gruppe, wir kopieren noch mal diese Gruppe. Passt. Legen diese genau darüber schreiben Gruppe 3 wieder ein Type of content. Wir machen diese Gruppe 2 unsichtbar und löschen nun alle wesentlichen Elemente. Und schreiben nun Schritt 3. Informationen zum Veranstalter Und hier brauchen wir nun wieder ein paar Input Field. Das erste ist Input E-Mail. Content, Format, E-Mail. Zentrieren horizontal. Darunter kopieren das Ganze. Machen wir Type of content Text, denn das ganze Vornahme und das Feld Input Field Vorname. Darunter. Nachname.

Und das Feld heißt ihr Nachname, wiederum ein Text. Darunter Input, Stakeholder, Passwort. Und wir nehmen das Content Format Passwort. Dieses Feld ist bereits im User Account von Bubble automatisch angelegt, das heißt, wir erstellen hier einen User mit E-Mail und Passwort und schließlich noch die Telefonnummer. Und das ist ein Textfeld. Wir haben nun alle drei Gruppen fertig. Schritt eins, zwei und drei und brauchen jetzt die Navigation. Das heißt, wir stellen einen Button. Nehmen hier Primary Button.

Nenne diesen nächster Schritt. Und kopieren diesen Button auf vorheriger Schritt. Button Vorheriger Schritt Schließlich kopieren wir noch den Button Nächster Schritt und legen genau darüber dem Button abschicken. Die Logik davon werden wir sofort einfügen, wenn wir wiederum die Conditional haben. Als erstes gehen wir einmal in die Grube Form und erstellen einen neuen Staat Edo New State und wir nennen diesen Schritt und das ist eine Zahl der Default Value. Hierfür ist eins. Alternativ.

Dafür liegt die kein Default Value fest und geht dafür in die Workflows. Wir machen generell, wenn Page is loaded z.B. State of ein Element Element ist, die grobe Form. Hier ist der Schritt und wir setzen diesen auf eins. Anschließend gehen wir ins Designte. Machen den Button abschicken nicht sichtbar und gehen auf den Button Nächster Schritt Start/edit workflow und wir sagen Seht State of an Element. Form Schritt und wir machen Group Forms. Schritt plus eins. Und wir sagen danach, wenn Conditional Bubble nächster Schritt wenn Grube Forms. Schritt. Größer gleich drei.

Dann ist dieses Element nicht mehr sichtbar. Das Element ist not visible. Anschließend gehen wir in den Button Vorheriger Schritt. Start/edit workflow. State of wenn element group Form. Schritt. Kopfform Schritt. Minus eins und wir machen Oliven Group Form. Schritt ist größer eins. Dies verhindert, dass der Groove vor dem Schritt nicht negativ werden kann. Anschließend gehen wir noch mal ins Designte und sagen Dieses Element ist visible homepage. Nein. Und wir machen einen Conditional. Wenn Grube vor dem Schritt. Ist Größe 1 und Group Form. Schritt. Ist kleiner gleich drei, dann ist dieses Element sichtbar. Als nächstes gehen wir nun in die einzelnen Gruppen rein grob Schritt eins Dieses Element ist Nordwind, Deploy und Page is loaded, sondern eben nur wenn Gruppe vorn Schritt ist genau eins, dann ist dieses Element sichtbar, welche die Checkbox aus. Analog dazu machen wir das bei Group.

Schritt 2 No Code visible on Page is loaded und die Bedingung ist wiederum Group Form Schritt ist genau 2, dann ist es sichtbar und analog bei Group. Schritt 3 Das Element ist Nordwind Deploy und Page Load, aber conditional wenn Group Form. Schritt ist genau drei, dann ist es sichtbar Checkbox aktivieren. Und nun machen wir noch den komplexesten Workflow in der ganzen Applikation, dass der Button abschicken will diesen aus dem Element try. Wir machen start/edit workflow Account seiende User ab. Wir wählen als E-Mail, Inputs, Emails Value als Passwort Input Passworts Value. Überdies Change Field. Vorname Impuls. Vorname Value. Change Field, Nachname, Input, Nachname Value. Und Telefonnummer, Input, Telefonnummer, Value.

Anschließend erstellen wir eine neue Veranstaltung Data Create a new thing Type of content Veranstaltung Nocode Field und hier haben wir nun alle Input Field. Der Name ist Import Name der Veranstaltung Value. Beschreibung ist gleich Multi Line Import. Beschreibung der Veranstaltung. Start Datum und Uhrzeit ist Date Picker Start Datum und Uhrzeit Value. Enddatum ist date picker ein Datum und Uhrzeit value. Teilnehmerzahl ist. Leider Input Teilnehmerzahl belief und online Link ist. Input Link der Veranstaltung Value und Adresse ist Search Box. Adresse der Veranstaltung Value Beachtet hier das Online Link Wenn es keine Online Veranstaltung ist, einfach leer ist oder Adresse auch leer. Dies kann man natürlich auch anders strukturieren oder verschiedene Feedbacks an den User geben. Hier stehen euch alle Möglichkeiten offen.

Und schließlich machen wir noch Navigation. Go to page Veranstaltung. Und wir senden result of status Veranstaltung. Die Seite Veranstaltung habe ich bereits vorher erstellt und dies ist quasi eine Type of content Veranstaltung und wir haben hier die einzelnen Felder der Veranstaltung. Und schließlich müssen wir noch eine Sache machen, nämlich beim Button abschicken ebenfalls. Das Element ist No Code visible und page load und das Conditional ist wenn Group Form. Schritt ist drei, dann ist dieses Element sichtbar. Wir gehen jetzt einmal auf Preview und schauen uns das Ganze an.. Wir nennen die Veranstaltung on Berlin Nocode. Als Beschreibung monatlich Smid ab.

Die Art der Veranstaltung entweder online oder offline Ihr seht hier Adresse der Veranstaltung. Wir führen diese durch. Ihr seht nun, wie wir quasi auch eine Adresse bekommen. Dann gehen wir auf. Nächster Schritt Seht, wie wir jetzt vorheriger Schritt eingeblendet haben und die Dateien immer noch da sind. Wir wählen ein Datum aus. Am Donnerstag, 19. bis. Donnerstag um. 22:30 Die Teilnehmerzahl. Seht ihr, wie wir jetzt bis auf 1000 Teilnehmer können? Wir machen 30 Teilnehmer. Nächster Schritt.

Und machen abschicken. Und es sieht jetzt, wie wir auf diese Veranstaltung kommen und alle Daten dynamisch sind und gleichzeitig wir auch eine Veranstaltung Link haben. Und so haben wir jetzt eine mehrstufige Form im Bubble erstellt. Alternativ könnt ihr auch hier dieses kostenlose Template von Nocode Icon verwenden.

Was ich euch in den Shownotes verlinkt habt, wenn euch dieses Video gefallen habt, klickt gerne auf den Like-Button und schreibt unseren Channel. Bei Fragen schreibt uns gerne in die Kommentare. Ich wünsche euch weiterhin viel Erfolg und auf bald.