Überblick#
Unter "Formular Design" können Sie das Aussehen Ihrer Online-Formulare individuell anpassen. Diese Einstellungen wirken sich auf alle Formulartypen aus (Mitgliedsantrag, Änderungsantrag und Kündigung) und ermöglichen es Ihnen, das Design perfekt auf Ihre Vereinsidentität und Ihre Webseite abzustimmen.Die Seite ist in zwei Bereiche unterteilt:Linke Seite: Einstellungen in drei Tabs (Theme, Farben, Layout)
Rechte Seite: Live-Vorschau des Formulars mit verschiedenen Ansichtsmodi
Design-Vorlagen (Theme)#
Verfügbare Vorlagen#
Im ersten Tab "Theme" können Sie zwischen vier vorgefertigten Design-Vorlagen wählen:| Vorlage | Beschreibung | Verwendungszweck |
|---|
| Klassisch | Traditionelles Design mit dezenten Farben und klaren Strukturen | Ideal für konservative Vereine, die ein seriöses und zeitloses Erscheinungsbild bevorzugen |
| Hell | Helles, freundliches Design mit viel Weißraum | Perfekt für eine moderne, offene Anmutung und bessere Lesbarkeit |
| Dunkel | Dunkles Design mit Kontrasten | Zeitgemäß und augenfreundlich, besonders für Vereine mit modernem Auftritt |
| Einfach | Minimalistisches Design ohne Hintergrund-Effekte | Optimal zur Einbettung in bestehende Webseiten (iFrame), da es sich nahtlos in Ihr bestehendes Design einfügt |
Die ausgewählte Vorlage dient als Basis für Ihre weiteren Anpassungen.Änderungen speichern#
Sobald Sie Änderungen vornehmen, erscheint ein Hinweis "Ungespeicherte Änderungen vorhanden". Klicken Sie auf den Button "Änderungen speichern", um Ihre Auswahl zu übernehmen. Die Änderungen werden sofort auf allen veröffentlichten Formularen sichtbar.
Farben anpassen#
Im Tab "Farben" können Sie die Farbgebung Ihrer Formulare individualisieren.Hinweis: Individuelle Farbanpassungen sind ab dem Gold-Tarif verfügbar. Im Basis-Tarif können Sie nur zwischen den Standard-Vorlagen wählen.
Seitenhintergrund#
Gestalten Sie den Hintergrund der gesamten Formularseite:Standard (aus Theme): Verwendet die Farbe der gewählten Design-Vorlage
Einfarbig: Wählen Sie eine einzelne Hintergrundfarbe
Farbverlauf: Erstellen Sie einen Farbverlauf zwischen zwei Farben
Transparent: Kein Hintergrund (ideal für iFrame-Einbindung)
Geben Sie einen HEX-Farbcode ein (z.B. #FFFFFF)
Nutzen Sie den Farbwähler zur bequemen Farbauswahl
Die Vorschau zeigt die gewählte Farbe sofort an
Startfarbe: Die erste Farbe des Verlaufs
Endfarbe: Die zweite Farbe des Verlaufs
Verlaufswinkel: Steuern Sie die Richtung (0-360°)90° = von links nach rechts
135° = diagonal (Standardwert)
180° = von oben nach unten
Bild-URL: Geben Sie die HTTPS-URL zu Ihrem Bild ein (z.B. https://ihr-verein.de/logo.jpg)
Wiederholung: Steuern Sie, ob und wie das Bild wiederholt wirdWiederholen (horizontal und vertikal)
Größe: Definieren Sie, wie das Bild skaliert wirdAutomatisch: Originalgröße
Abdecken: Füllt den Bereich vollständig
Einpassen: Passt das Bild ein, ohne zu beschneiden
Strecken: Dehnt das Bild auf 100%
Benutzerdefinierte Größe: Geben Sie Breite und Höhe in Pixel an
Position: Positionieren Sie das Bild im HintergrundZentriert, Oben, Unten, Links, Rechts und Kombinationen
Scroll-Verhalten: Bestimmen Sie das Verhalten beim ScrollenMit Seite scrollen: Bild scrollt mit
Fixiert (Parallax): Bild bleibt stehen (Parallax-Effekt)
Mit Element scrollen: Bild scrollt mit dem Container
Tipp: Achten Sie darauf, dass Ihr Hintergrundbild öffentlich zugänglich ist und über HTTPS bereitgestellt wird.
Passen Sie den Hintergrund des Formular-Containers an – das ist der Bereich, in dem die Eingabefelder angezeigt werden.Die Einstellungen funktionieren identisch zum Seitenhintergrund:Hintergrundtyp: Standard, Einfarbig, Farbverlauf oder Transparent
Wählen Sie passende Farben, um das Formular vom Seitenhintergrund abzuheben
Ein transparenter Formularhintergrund eignet sich besonders für minimalistische Designs
Schriftfarbe#
Passen Sie die Farbe von Labels, Texten und Beschriftungen an:Geben Sie einen HEX-Farbcode ein oder nutzen Sie den Farbwähler
Tipp: Achten Sie auf ausreichenden Kontrast zum Hintergrund für gute Lesbarkeit
Über den "Zurücksetzen"-Button können Sie die Farbe wieder auf den Standard der Vorlage setzen
Layout-Optionen#
Hinweis: Individuelle Layout-Optionen sind ab dem Gold-Tarif verfügbar.
Aktivieren Sie "Benutzerdefiniert" um einen eigenen Wert einzugeben
Geben Sie den Abstand in Pixel an (0-500 px)
Nützlich, um Platz für ein Logo oder eine Überschrift auf Ihrer Webseite zu lassen
Standard (aus Theme): Verwendet die Breite der Design-Vorlage
Schmal (600px): Kompaktes Format für einfache Formulare
Mittel (800px): Ausgewogene Breite für die meisten Anwendungsfälle
Breit (1000px): Mehr Platz für umfangreiche Formulare
Vollbreite (100%): Nutzt die gesamte verfügbare Breite
Benutzerdefiniert: Geben Sie eine eigene Breite in Pixel an (300-2000 px)
Aktivieren Sie "Benutzerdefiniert"
Nutzen Sie den Slider, um den Radius einzustellen (0-40 px)
Höhere Werte = stärker abgerundete Ecken
Schatten#
Fügen Sie dem Formular einen Schatten hinzu, um es optisch vom Hintergrund abzuheben:Standard (aus Theme): Verwendet den Schatten der Design-Vorlage
Kein Schatten: Flaches Design ohne Tiefenwirkung
Leicht: Dezenter Schatten
Mittel: Ausgewogener Schatten (empfohlen)
Stark: Ausgeprägter Schatten für starke Betonung
Design-Tipp: Ein mittlerer Schatten hebt das Formular hervor, ohne aufdringlich zu wirken. Bei transparentem Seitenhintergrund oder iFrame-Einbindung sollten Sie auf einen Schatten verzichten.
Logo-Anzeige#
Steuern Sie die Sichtbarkeit des Vereinslogos:Aktivieren Sie "Logo verbergen", um das Logo im Formular auszublenden
Sinnvoll bei iFrame-Einbettung, wenn das Logo bereits auf der umgebenden Webseite sichtbar ist
Eigenes CSS##
Für fortgeschrittene Anpassungen können Sie hier eigene CSS-Regeln hinzufügen:[Screenshot: CSS-Code-Editor - PLATZHALTER]Wichtig: CSS-Kenntnisse sind erforderlich. Fehlerhafte CSS-Regeln können das Formular-Layout beeinträchtigen. Nutzen Sie die Live-Vorschau, um Ihre Änderungen zu testen.
Live-Vorschau#
Auf der rechten Seite sehen Sie eine Live-Vorschau Ihres Formulars. Alle Änderungen werden sofort in der Vorschau dargestellt, noch bevor Sie sie speichern.[Screenshot: Live-Vorschau Panel - PLATZHALTER]Funktionen der Vorschau#
Desktop: Zeigt die Ansicht auf großen Bildschirmen
Tablet: Simuliert die Darstellung auf Tablets
Mobile: Zeigt die mobile Ansicht auf Smartphones
Responsive Design: Vereinsantrag passt Ihre Formulare automatisch an verschiedene Bildschirmgrößen an. Nutzen Sie die Geräteansicht, um sicherzustellen, dass Ihr Design auf allen Geräten gut aussieht.
Seitenleiste ein-/ausblendenKlicken Sie auf das Seitenleisten-Icon, um mehr Platz für die Vorschau zu schaffen
Die Seitenleiste lässt sich jederzeit wieder einblenden
Änderungen werden sofort in der Vorschau angezeigt
Die Vorschau zeigt den Status "Design" an, wenn ungespeicherte Änderungen vorhanden sind
Nach dem Speichern wechselt die Vorschau in den "Preview"-Modus und zeigt das gespeicherte Design
Best Practices#
Kontrast und Lesbarkeit#
Achten Sie auf ausreichenden Kontrast zwischen Text- und Hintergrundfarbe
Testen Sie Ihr Design auf verschiedenen Geräten
Vermeiden Sie zu grelle oder unruhige Hintergründe
Corporate Design#
Nutzen Sie die Farben Ihres Vereins für ein einheitliches Erscheinungsbild
Integrieren Sie Ihr Vereinslogo über die Hintergrundbild-Funktion
Passen Sie die Schriftfarbe an Ihre Vereinsfarben an
iFrame-Einbettung#
Wenn Sie das Formular auf Ihrer Webseite einbetten möchten:Wählen Sie die Vorlage "Einfach" als Basis
Setzen Sie den Seitenhintergrund auf "Transparent"
Aktivieren Sie "Logo verbergen", wenn das Logo bereits auf Ihrer Seite vorhanden ist
Passen Sie die Formular-Breite an die Breite Ihrer Webseite an
Verzichten Sie auf einen Schatten für eine nahtlose Integration
Verwenden Sie optimierte Bilder (max. 500 KB) für Hintergrundbilder
Komprimieren Sie Ihre Bilder vor dem Upload
Bei eigenen CSS-Regeln: Weniger ist mehr – halten Sie den Code übersichtlich
Barrierefreiheit#
Stellen Sie sicher, dass Textfarben einen WCAG-konformen Kontrast aufweisen
Vermeiden Sie Farbverläufe mit zu geringem Kontrast
Testen Sie die Lesbarkeit auf verschiedenen Geräten
