Tutorial de Bubble.io: Barra de progreso para el registro de usuarios

In diesem Video zeige ich euch wie man das Progress Bar Plugin in Bubble benutzt, um beim Onboarding von Nutzern oder bei der Registrierung dem User Feedback zu geben, wie weit dieser schon in seiner Registrierung ist.

Transcripción del vídeo:

Hallo, mein Name ist Chris Strobl und Search heute, wie wir eine Progress Bar erstellen können, die dynamisch agiert, wenn sich der User registriert, das können wir bei allen on Boarding und seiner Workflows oder auch in Checkout super verwenden. Ich habe schon mal vorbereitet, dass wir hier quasi vier Gruppen übereinander gelegt haben. Stepp 1, 2, Stepp 3 und 4 um.

Bei all diesen Gruppen müssen wir quasi einmal das Element ist visible um Page is loaded deaktivieren. Als nächstes erstellen wir, wenn wir auf die Seite klicken, einmal auf das Info, einen Status und diesen Status nennen wir STEP. Und das ist eine Number. Diese hilft uns nachher immer zu erkennen, wo wir genau sind. Als nächstes die den Plugins und installiert euch dort das kostenlose Progress Bar Plugin, was ein originales Plugin von Bubble ist. Dieses wiederum wählen wir aus und fügen bei allen vier Gruppen ein. Als Design Element will ich border nun eine Run mode von 20, ein horizontal Padding von 0 und um die Schrift nicht anzuzeigen, nehme ich die gleiche Farbe und macht die Schriftgröße auf 8.

Das ist quasi klein. Ist die Höhe 20? Und von der Breite geben wir komplett auf die Breite. Als nächstes geben wir einen User Data und fügen hinzu ein Feld kompliziert. Und das bedeutet, wie viel Prozent hat der Nutzer bereits durchgeführt? Der Default ist hier Null. Dann gehen wir in das progressive Feld und machen Current users kompiliert. Als Nummer diese Progress Bar kopieren wir jetzt in alle 4 Steps. Wenn wir jetzt in den ersten Stepp gehen, dann sehen wir hier den Firestone machen Start/edit workflow Make Changes to Current users change oder field. Wir machen kompliziert ist 25. Weil wir 4 Steps haben im zweiten Step auf Continue. Kopieren einmal den Workflow.

Und fügen die Zahl 50 ein. Beim dritten Step. Paket 75 und den vierten Stepp brauchen wir nicht mehr, weil wir hier quasi die den Screen verlassen und machen einmal hier auf seiner um machen Count seien die User. Wir haben bereits die E-Mail aus Input E-Mails Value, wir haben das Passwort aus input A's value Value und weitere Felder. Das heißt einmal Create a new thing first nehmen Text. Das ist Input forms namens Value und relativ viel Last nehmen. Das ist auch ein Text Input Field namens Value und anschließend leiten wir den User weiter auf eine andere Page. Zum Beispiel die Page Create a new thing Page Welcome. Und wenn wir auf die Page Welcome gehen. Ich nutze hier wieder Frames, da habe ich ein Video dazu gemacht, das kennen wir bereits und wir sagen einmal passt. Wir sind Preview. Welcome kommer Current users first nehmen.

Nur noch ein letzter wichtiger Schritt, weil wir ja die verschiedenen Deploy haben und den Status, das heißt, der erste Stepp ist als Default Value 1, wenn die Seite geladen wird und dann müssen wir quasi im Stepp 1 Set State of ein Element. Die Seite Steeb und machen den Stepp 2 und auch hier kopieren wir wiederum. Stepp 3. Zapier Und jetzt brauchen wir quasi den letzten Teil noch die Gruppen Ich bin der Stepp 1 diese Gruppe ist wenn. Progress Bars Stepp ist eins, dann ist dieses Element sichtbar. Ich komme hier einmal hier die Conditional Kopie Conditional Formatierung rein in die zweite passt Conditional formatieren, dann ist dieses, wenn es zwei ist. PS Conditional Informantin Stepp 3 und einmal Pace Conditional Formation Stepp 4 und wir gehen jetzt einmal im Preview.

Sieht, wie die Progress Bar funktioniert. Und wie hier quasi einmal den Test haben. Kommt John. Schließlich können wir diese Progress Bar auch dynamisch machen. Wir können nämlich gehen auf. Current users bietet plus 25 und dann haben wir quasi immer den aktuellen Status plus 25. Das Ergebnis ist dann das gleiche. Somit konnte sehen, wie wir im Bubble relativ einfach eine Progress Bar nutzen können, um den Nutzer jederzeit zu zeigen, in welchem Status und welchem Fortschritt er ist. Dieses System können wir auch nutzen mit Gruppen statt dem nativen Bubble Event und dann quasi den Status und die Visible, die jeweils nach den verschiedenen Steps zu gestalten.

Wenn euch dieses Video gefallen habt, klickt gerne auf den Like-Button, subscribed unseren Channel bei Fragen geht in die Kommentare. Ich wünsche euch weiterhin viel Erfolg und auf bald.