Meldeformular per CSS gestalten – Stylesheet und CSS-Klassen
Gestalten Sie das Meldeformular einer Organisation mit einem eigenen Stylesheet: wo Sie CSS hinterlegen, welche festen CSS-Klassen das Formular anbietet und drei kurze Beispiele für Hausfarben, Schrittleiste und häufige Fragen.
Letzte Aktualisierung:
Transkript des Videos
In diesem Video gestalten Sie das Meldeformular von preeco | hinweisgeber mit einem eigenen Stylesheet.
So sieht das Meldeformular ohne eigenes Stylesheet aus.
Eigene Gestaltung hinterlegen Sie im Abschnitt Optik.
Diese Liste zeigt alle Klassen, die Sie im Stylesheet ansprechen können.
Tragen Sie Ihre CSS-Anweisungen ein, zum Beispiel Hintergrund, Überschrift und Hauptschaltfläche in Ihrer Hausfarbe.
Nach dem Speichern wirkt das Stylesheet sofort im öffentlichen Meldeformular.
Die Schritt-Klassen sind nach dem Inhalt benannt, so bleibt Ihr Stylesheet gültig, auch wenn sich die Nummerierung ändert.
Bei umfangreicheren Anpassungen unterstützt Sie unser Support.
Mit einem eigenen Stylesheet passen Sie Farben, Schriften und Abstände des Meldeformulars an Ihr Corporate Design an. Das Formular vergibt dafür feste CSS-Klassen, die Sie als Selektoren verwenden – unabhängig davon, welchen Aufbau Sie gewählt haben.
Voraussetzungen
- Sie besitzen die Berechtigung „edit“ auf die betreffende Organisation.
- Sie haben Grundkenntnisse in CSS und HTML.
Stylesheet hinterlegen
- Öffnen Sie unter „Einstellungen → Organisationen“ die gewünschte Organisation.
- Wechseln Sie auf den Reiter „Meldeformular“ und klicken Sie im Abschnitt „Optik“ auf „Bearbeiten“. Es öffnet sich ein Seitenpanel mit dem Namen der Organisation.
- Tragen Sie Ihre CSS-Anweisungen im Feld „Stylesheet“ ein. Die Liste „Verfügbare CSS-Klassen“ darunter zeigt alle Klassen, die Sie ansprechen können.
- Klicken Sie auf „Speichern“. Das Stylesheet wirkt sofort im öffentlichen Meldeformular.
Verfügbare CSS-Klassen
| Klasse | Element |
|---|---|
.form-bg-color | Seitenhintergrund |
.form-container | Rahmen um Kopfbereich und Inhalt; bestimmt Breite und Innenabstand der Seite |
.form-masthead | Gesamter Kopfbereich mit Logo, Titel, Sprachauswahl, Einleitungstext und Übersetzungshinweis |
.form-header | Kopfbereich mit Logo, Titel und Sprachauswahl |
.form-language | Sprachauswahl; .form-logout für die Schaltfläche Abmelden |
.form-logo | Logo |
.form-title | Überschrift des Meldesystems |
.form-platform-text | Einleitungstext unter dem Kopfbereich |
.form-main | Inhaltsbereich unter dem Kopfbereich |
.form-home | Startseite mit den Kacheln Meldung einreichen und Login |
.form-panel | Jede weiße Kachel, zusätzlich .form-panel-report, .form-panel-login, .form-panel-faq, .form-panel-correspondence, .form-panel-unavailable |
.form-panel-heading | Überschrift einer Kachel |
.form-contact | Angaben zu Meldestelle und verantwortlicher Organisation; .form-contact-heading für deren Überschriften |
.form-report | Das Meldeformular, je Aufbau zusätzlich .form-report-layout-wizard, .form-report-layout-vertical-wizard, .form-report-layout-single-page oder .form-report-layout-accordion |
.form-steps-nav | Navigation um die Schrittleiste |
.form-steps | Schrittleiste über dem Formular, je Eintrag .form-steps-item-information, .form-steps-item-personal-data, .form-steps-item-access, .form-steps-item-report, .form-steps-item-review, .form-steps-item-done; darin .form-steps-label, .form-steps-title und .form-steps-connector |
.form-steps-border | Linie und Kreis eines erreichten Schrittes; .form-steps-border-action an einem Schritt, zu dem man zurückspringen kann |
.form-steps-marker | Nummernkreis eines Schrittes |
.form-current | Zustand: aktueller Schritt; .form-complete an erledigten Schritten |
.form-accordion-item | Abschnitt im Aufbau „Aufklappbare Abschnitte“, mit .form-accordion-header, .form-accordion-body und .form-accordion-edit |
.form-steps-text | Beschriftung des aktiven Schrittes |
.form-step | Inhalt eines Schrittes, zusätzlich .form-step-information, .form-step-personal-data, .form-step-access, .form-step-report, .form-step-review, .form-step-done |
.form-step-intro | Überschrift und Beschreibung eines Schrittes mit .form-step-eyebrow, .form-step-title, .form-step-description |
.form-field | Eingabefeld mit .form-field-label, .form-field-control, .form-field-description, .form-field-info, .form-field-error |
.form-check | Ankreuzfeld mit .form-check-control und .form-check-label |
.form-upload | Datei-Upload mit .form-upload-dropzone, .form-upload-link, .form-upload-hint, .form-upload-file |
.form-voice | Sprachnachricht |
.form-notice | Hinweisbox mit .form-notice-warning oder .form-notice-info; der Übersetzungshinweis trägt .form-translation-hint |
.form-review | Zusammenfassung im Schritt Prüfung mit .form-review-section, .form-review-heading, .form-review-row, .form-review-term, .form-review-value, .form-review-edit |
.form-report-code | Hinweisbox mit der Melde-ID, .form-report-code-value für die ID; Überschriften im Schritt Fertig tragen .form-done-heading |
.form-actions | Fußzeile eines Schrittes mit Abbrechen, Zurück, Weiter und Absenden |
.form-faq | Häufige Fragen mit .form-faq-heading, .form-faq-toggle, .form-faq-item, .form-faq-question, .form-faq-answer |
.form-button | Schaltflächen, zusätzlich .form-button-primary, .form-button-secondary, .form-button-danger |
.form-message | Einzelne Nachricht in der Korrespondenz |
.form-footer | Fußbereich; .form-footer-link für die Links zu Impressum und Datenschutz |
Warum die Schritt-Klassen nach dem Inhalt heißen
Die sichtbare Nummerierung verschiebt sich je nach Einstellung: Ist „Ihre Daten“ deaktiviert, erscheint „Ihr Zugang“ als „Schritt 2“. Deshalb heißen die Klassen nach dem Inhalt, nicht nach der Position. .form-step-access trifft den Zugangs-Schritt in jedem Fall, und Ihr Stylesheet bleibt gültig, wenn Sie Felder ein- oder ausschalten.
Beispiele zum Kopieren
Hausfarben für Hintergrund, Überschrift und Hauptschaltfläche:
.form-bg-color { background: #f2f5f9; }
.form-title { color: #004b87; }
.form-button-primary { background: #004b87; border-color: #004b87; }Aktuellen Schritt in der Hausfarbe hervorheben – die Nummer steht in einem eigenen Element und braucht deshalb eine eigene Regel:
.form-steps-marker.form-current { background: #004b87; border-color: #004b87; }
.form-steps-marker.form-current .form-steps-text { color: #ffffff; }Häufige Fragen absetzen:
.form-panel-faq { border-top: 4px solid #004b87; }
.form-faq-question { font-weight: 600; color: #004b87; }Tipp aus der Praxis
- Prüfen Sie jede Änderung direkt über die „Meldeformular URL“ im Abschnitt „Internet-Adresse“ – auf der Startseite und in mindestens einem Schritt.
- Die Aufbau-Klassen
.form-report-layout-*erlauben Regeln, die nur für einen Aufbau gelten, siehe Aufbau des Meldeformulars wählen. - Bei umfangreicheren Anpassungen unterstützt Sie unser Support auf Anfrage.