Was steht in diesem Artikel?
Dieser Artikel erklärt, wie man in der STREAMBOXY Backstage die Benutzerregistrierungsseite (Registrierungsformular) einfach mit HTML & CSS stylen und das Standardformat überschreiben kann.
Grundkenntnisse in HTML und dem Umgang mit CSS sind vorausgesetzt.
Ein Beispiel, wie ein Registrierungsformular (Standard-Formular) aussehen kann:
Bitte beachten Sie, dass Sie sich nur registrieren können, wenn Sie die Pflichtfelder (mit einem * versehen) ausgefüllt haben. In diesem Fall sind die Felder "Ihr Name" und "Ihre E-Mail" auszufüllen.
Detaillierte Informationen zu den Einstellungen der Felder im Registrierungsformular finden Sie hier.
Wo kann ich die Benutzerregistrierungsseite erstellen und stylen?
Es wird zwischen zwei Einstellungsformaten unterschieden, den Tenant-Einstellungen (übergreifend für alle Events in einem Tenant) und den Einstellungen für ein einzelnes Event.
1. Benutzerregistrierung für alle Events des Tenants festlegen
Die Konfiguration der Benutzerregistrierungsseite finden Sie in den Tenant Einstellungen (Zahnrad in der rechten oberen Ecke Ihres Tenants) unter dem Punkt "Aussehen" und dort unter dem Reiter "Benutzerregistrierung".
Detaillierte Informationen zu allen anderen Einstellungsmöglichkeiten im Reiter "Aussehen" finden Sie hier.
Diese Einstellungen gelten für alle Events des Tenants bzw. Mandanten, solange in einzelnen Events keine eigene Definition festgelegt wurde.
2. Benutzerregistrierung für ein einzelnes Event festlegen
Die Konfiguration der Benutzerregistrierungsseite für ein einzelnes Event, finden Sie in den Event Einstellungen unter "Aussehen" und dort den Reiter "Benutzerregistrierung"
Detaillierte Informationen zu allen anderen Einstellungsmöglichkeiten im Reiter "Aussehen" finden Sie hier.
Diese Einstellungen gelten für das gesamte Event incl. aller Breakout-Räume.
Hier wird das Event "Test Event" bearbeitet.
Für das Feld "Benutzerregistrierung", scrollen Sie in dem sich öffnenden Fenster ganz nach unten.
Wie konfiguriere ich das Aussehen des Registrierformulars?
CSS
Um eine Sign-Up Custom CSS zu konfigurieren, fügen Sie in das freie Feld Ihren entsprechenden Code ein. Die CSS wird für das Styling des Registrierungsformulars verwendet.
Im Styling und in der Formatierung haben Sie keinerlei Einschränkungen und können alles nach Ihrem Belieben anpassen:
- Farben
- Schriftart
- Schriftdicke
- etc.
Beispiel Vorlage
STREAMBOXY bietet Ihnen auch die Möglichkeit, eine Vorlage für die CSS mit Standard Styling in das Textfeld hinzuzufügen.
Um eine Vorlage von STREAMBOXY zu verwenden, klicken Sie auf den Button "</>".
Daraufhin füllt sich das Textfeld mit einem Beispielscode, der den Kopf, das Daum und die Uhrzeit, Texte, Panele, Labels und Inputs des Registrierungsformulars konfiguriert.
Scrollen Sie in dem Textfeld herunter, um alle Teile des Codes einzusehen.
Klicken sie auf
um den Code in einem größeren Fenster zu öffnen und ihn dort übersichtlicher bearbeiten zu können.
Speichern der CSS Anpassungen
Speichern Sie Ihre Konfiguration des Registrierungsformulars, indem Sie ganz unten auf den Button "Benutzerregistrierung aktualisieren" klicken.
Verdeutlichung der Anpassungen des Registrierungsformulars (Farben)
Wie schon oben gezeigt, sieht das Standard-Formular von STREAMBOXY wie folgt aus:
Im Folgenden werden nacheinander einige Elemente des Standard-Formulars (farblich) angepasst. Wie bereits erwähnt, können auch Schriftart, Schriftdicke, etc. angepasst werden.
Elemente, die beispielhaft angepasst werden:
- Haupttext
- Label
- Button
- Tickbox
1. Haupttext
Im Standard-Formular ist der Haupttext (text-center im Code) "dunkelgrau" (HEX: #5f5d5d).
Hier ist der Haupttext "Anmelden für "STREAMBOXY Demo"":
Backstage:
Soll der Text zum Beispiel zu "rot" geändert werden, muss einfach der HEX-Code ausgetauscht werden.
Angepasstes Formular:
2. Label
Im Standard-Formular sind die Labels die festgelegten Titel der Felder zum Ausfüllen. Diese sind hier "dunkelgrau" (label im Code) (HEX: #5f5d5d).
Hier sind die Labels "Ihr Name*", "Ihre E-Mail*" und "Hiermit stimme ich den AGB zu*".
Detaillierte Informationen zur Erstellung eigener Labels für das Registrierungsformular finden Sie hier.
Backstage:
Sollen die Labels zum Beispiel zu "rot" geändert werden, muss einfach der HEX-Code ausgetauscht werden.
Angepasstes Formular:
3. Button
Im Standard-Formular ist der Block der Button "Registrieren". Dieser ist hier "hellgrau" (.btn-block im Code) (HEX: #eeecec).
Backstage:
Sollen der Button zum Beispiel zu "rot" geändert werden, muss einfach der HEX-Code ausgetauscht werden.
Angepasstes Formular:
4. Tickbox
Im Standard-Formular ist der Rahmen der Tickbox (Box, in der das Häkchen für die AGB gesetzt werden muss) "grau" (input im Code) (HEX: #5f5d5d).
Backstage:
Sollen die Tickbox zum Beispiel zu "rot" geändert werden, muss einfach der HEX-Code ausgetauscht werden.
Angepasstes Formular:
HTML
Um den Hintergrund zu konfigurieren, fügen Sie in das freie Feld Ihren entsprechenden Code ein.
Im Styling und in der Formatierung haben Sie keinerlei Einschränkungen und können alles nach Ihrem Belieben anpassen:
- Farben
- Logo, Video hinzufügen
- etc.
Beispiel Vorlage
STREAMBOXY bietet Ihnen auch die Möglichkeit, eine Vorlage für die HTML mit Standard Styling in das Textfeld hinzuzufügen.
Um eine Vorlage von STREAMBOXY zu verwenden, klicken Sie auf den Button "</>".
Daraufhin füllt sich das Textfeld mit einem Beispielscode.
Scrollen Sie in dem Textfeld herunter, um alle Teile des Codes einzusehen.
So sieht der Musterhintergrund aus.
Klicken sie auf
um den Code in einem größeren Fenster zu öffnen und ihn dort übersichtlicher bearbeiten zu können.
Speichern Sie Ihre Konfiguration der Hintergrund, indem Sie ganz unten auf den Button "Benutzerregistrierung aktualisieren" klicken.
Wenn Sie Ihren eigenen HTML-Code hinzugefügt haben und versehentlich auf "Beispiel HTML einfügen" klicken, werden Sie aufgefordert,
Ihren HTM Code durch den Beispiel-HTML zu überschreiben.