Design-Template "Polaris" für Spendenformulare mit Tailwind CSS verwenden

INHALTSVERZEICHNIS

• Gut zu wissen
• Allgemeines
• Template wechseln
• CSS-Variablen nutzen
  • Globale Variablen
  • Fußnote
  • Legende
  • Button
  • Links
  • Labels
  • Eingabe
  • Fixierte Eingabe
  • Checkbox
  • Radio-Buttons
  • Zahlungsweisen
  • Betragsvorschläge
  • Bildauswahl

Gut zu wissen

Mitte Juni 2023 führen wir ein neues Design-Template für die FundraisingBox-Spendenformulare ein. Dieses neue Design-Template trägt den Namen "Polaris" und ist neben dem "Aurora"-Template in den Design-Einstellungen der Formular-Konfiguration auswählbar.

Wir möchten mit dem Polaris-Template ein neues, aufgeräumtes, frisches und schlankes Design auf dem neuesten Stand anbieten. Zudem wurden Elemente in der Benutzer*innen-Oberfläche mit ARIA-Attributen ergänzt, um Screen-Reader-Anwendungen besser zu unterstützen und dadurch die Barrierefreiheit zu optimieren.

Besonders hervorzuheben ist, dass die Betragsvorschläge nun mehr hervorstechen und vor allem auf Mobilgeräten noch besser nutzbar sind. Betragsvorschläge erleichtern den Spender*innen die Entscheidung, sich für einen Betrag zu entscheiden und können Ihnen dabei helfen, die Höhe des durchschnittlichen Spendenbetrags zu erhöhen!

Bei den Datums- und IBAN-Feldern wird es den Spender*innen jetzt durch Eingabeunterstützung erleichtert, die korrekten Angaben zu machen. So wird Frust und unnötiger zusätzlicher Aufwand bei Ihnen und den Spender*innen reduziert.

Das "Polaris"-Template verwendet Tailwind CSS. Damit lassen sich Ihre eigenen konkreten Design-Anforderungen an die FundraisingBox-Spendenformulare einfacher, schneller und flexibler umsetzen.

Allgemeines

Das neue Design-Template “Polaris” unterstützt CSS-Variablen, über die das Aussehen des Formulars gesteuert werden kann. Zusätzlich können über diverse Klassen und IDs auch gezielt einzelne Elemente gestylt werden. Der einfachste und sicherste Weg ist es jedoch, die vordefinierten CSS-Variablen zu nutzen, um ein einheitliches Erscheinungsbild zu gewährleisten. Die CSS-Variablen fließen in alle Styles ein und helfen dabei, dass das Formular gestylt werden kann, ohne notwendigerweise den Aufbau und Struktur des HTML-Codes der fraglichen Webseite verstehen zu müssen.

Template wechseln

Wie Sie das Polaris-Template für Ihre FundraisingBox-Spendenformulare verwenden können, ist grundsätzlich im entsprechenden bestehenden Artikel beschrieben. Öffnen Sie einfach den Formular-Bereich in Ihrer FundraisingBox, öffnen Sie das gewünschte Formular, navigieren Sie im Reiter "Einstellungen" zum Abschnitt "Design", wählen Sie dort "Polaris" als Design-Template und speichern Sie diese Änderung.

CSS-Variablen nutzen

Grundsätzlich hat sich die Verwendung von eigenem CSS-Code in Verbindung mit dem Polaris-Template nicht verändert, jedoch bietet Tailwind CSS diverse Optimierungen und Erweiterungen.

Beispiel:

Dies hat den Effekt, dass

• die Primärfarbe ein Magenta (#FF00FF)
• die Schriftfarbe ein dunkles Grau (#222222)
• Inputs dunkelgrau umrandet und weißem Hintergrund
• Buttons mit 20px abgerundeten Ecken

dargestellt werden.

Hier das Formular in Standarddarstellung und mit den oben genannten Einstellungen im direkten Vergleich:

Einige Variablen, wie zB --fb-primary, werden von anderen Elementen übernommen - so zB vom Element “Button” - können aber auch für diese wieder überschrieben werden. Ein Button hätte in dem Beispiel oben also standardmäßig einen Magenta Hintergrund, kann jedoch überschrieben werden:

Nun hat der Button einen violetten (#EE82EE) und bei Fokus und Hover einen dunkelvioletten (#9400D3) Hintergrund:

Folgende Variablen können im Abschnitt “Design” unter “Erweiterte Design-Einstellungen anzeigen” im Feld “Eigenes Stylesheet (CSS)“ eingefügt werden:

Globale Variablen

Unter globalen Variablen sind Werte definiert, die sich auf das gesamte Formular auswirken und die auch von Elementen übernommen werden. Sie können für alle Elemente individuell überschrieben werden.

--fb-form-bg-color
Default: #FFFFFF
Beschreibung: Hintergrundfarbe des Formulars

--fb-primary
Default: #55af19
Beschreibung: Dieser Wert kann auch über den Color-Picker im Abschnitt “Design” ausgewählt werden. Die Variable --fb-primary im CSS-Editor überschreibt diesen Wert jedoch wieder.

--fb-error-color
Default: rgb(239,68,68)
Beschreibung: Fehler-Farbe des Formulars

--fb-success-color
Default: rgb(34,197,94)
Beschreibung: Erfolgs-Farbe des Formulars

--fb-warning-color
Default: rgb(249,115,22)
Warnfarbe des Formulars

--fb-text-color
Default: #000000
Beschreibung: Schriftfarbe für Texte im Formular.

--fb-font-size
Default: 1rem
Beschreibung: Schriftgröße für Texte im Formular.

--fb-font-weight
Default: 400
Beschreibung: Schriftstärke für Texte im Formular.

--fb-font-style
Default: normal
Beschreibung: Schriftstil für Texte im Formular.

--fb-font-family
Default: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
Beschreibung: Schriftfamilie für Texte im Formular.

Die Primärfarbe des Formulars wird auf folgende Elemente angewendet:

• Toggle-/Schalter-Element
• Checkbox-Element
• Radio-Button-Element
• Auswahl der Betragsvorschlagkachel
• Auswahl der Zahlungsweise
• Auswahl des Bildes für die Geschenkspende
• Spenden-Button

Die Error-/Fehler-, Success-/Erfolgs- und Warn-Banner werden ebenfalls entsprechend dargestellt.

Fußnote

Die folgenden Variablen dienen zur Gestaltung der Hinweistexte im Formular:

--fb-footnote-text-color
Default: rgb(55,65,81)
Beschreibung: Schriftfarbe für Fußnoten

--fb-footnote-font-size
Default: .75rem
Beschreibung: Schriftgröße für Fußnoten

--fb-footnote-font-weight
Default: normal
Beschreibung: Schriftschnitt für Fußnoten

--fb-footnote-font-style
Default: normal;
Beschreibung: Schriftstil für Fußnoten

--fb-footnote-font-family
Default: inherit;
Beschreibung: Schriftfamilie für Fußnoten

Legende

Die folgenden Variablen dienen zur Gestaltung der Legenden-Überschriften im Formular, z.B. der Abschnitt der Abfrage von persönlichen Daten der Spender*innen:

--fb-legend-font-size
Default:  1.25rem
Beschreibung: Schriftgröße der Überschriften

--fb-legend-font-weight
Default:  500
Beschreibung: Schriftschnitt der Überschriften

--fb-legend-font-style
Default:  normal
Beschreibung: Schriftstil der Überschriften

--fb-legend-font-family
Default: inherit
Beschreibung: Schriftfamilie der Überschriften

Button

Die folgenden Variablen dienen zur Gestaltung der Buttons im Formular, die über die Farbe der Buttons an sich hinaus geht:

--fb-button-padding
Default: 1rem 1.5rem
Beschreibung: Innerer Abstand von Buttons

--fb-button-border-color
Default: transparent
Beschreibung: Farbe der Umrandung von Buttons

--fb-button-border-width
Default: 0
Beschreibung: Strichstärke der Umrandung von Buttons

--fb-button-border-color-focus
Default: var(--fb-button-border-color)
Beschreibung: Farbe der Umrandung von Buttons bei Fokus und Hover

--fb-button-border-radius
Default: .25rem
Beschreibung: Umrandungsradius der Buttons

--fb-button-text-color
Default: #FFFFFF
Beschreibung: Farbe des Labels

--fb-button-text-color-focus
Default: var(--fb-button-text-color)
Beschreibung: Farbe des Labels bei Fokus und Hover

--fb-button-text-transform
Default: uppercase
Beschreibung: Texttransformation des Labels

--fb-button-font-size
Default: 1.25rem
Beschreibung: Die Schriftgröße des Labels

--fb-button-font-weight
Default: 500
Beschreibung: Schriftschnitt des Labels

--fb-button-font-style
Default: normal
Beschreibung: Schriftstil des Labels

--fb-button-font-family
Default: inherit
Beschreibung: Schriftfamilie des Labels

--fb-button-bg-color
Default: var(--fb-primary)
Beschreibung: Hintergrundfarbe der Buttons

--fb-button-bg-color-focus
Default: var(--fb-button-bg-color)
Beschreibung: Hintergrundfarbe der Buttons bei Fokus und Hover

--fb-button-opacity-focus
Default: 0.8
Beschreibung: Transparenz der Hintergrundfarbe der Buttons bei Fokus und Hover

Links

Die folgenden Variablen dienen zur Gestaltung der Links im Formular:

--fb-link-text-decoration
Default: underline
Beschreibung: Text Dekoration für Links

--fb-link-color
Default: rgb(55,65,81)
Beschreibung: Farbe der Links

Labels

Die folgenden Variablen dienen zur Gestaltung der Labels bzw. Beschriftung der Eingabefelder im Formular:

--fb-label-text-color
Default: rgb(55,65,81)
Beschreibung: Farbe der Labels

--fb-label-font-size
Default: 1rem
Beschreibung: Schriftgröße der Labels

--fb-label-font-weight
Default: 400
Beschreibung: Schriftschnitt der Labels

--fb-label-font-style
Default: normal
Beschreibung: Schriftstil der Labels

--fb-label-text-transform
Default: none
Beschreibung: Texttransformation der Labels

--fb-label-font-family
Default: inherit
Beschreibung: Schriftfamilie der Labels

Eingabe

Die folgenden Variablen dienen zur Gestaltung der Eingabefelder für Text/Nummern/Zahlen an sich im Formular:

--fb-input-text-color
Default: #000000
Beschreibung: Farbe der Eingabefelder

--fb-input-font-size
Default: 1rem
Beschreibung: Schriftgröße der Eingabefelder

--fb-input-font-weight
Default: 400
Beschreibung: Schriftschnitt der Eingabefelder

--fb-input-font-style
Default: normal
Beschreibung: Schriftstil der Eingabefelder

--fb-input-font-family
Default: inherit
Beschreibung: Schriftfamilie der Eingabefelder

--fb-input-padding
Default: .5rem .75rem .5rem .75rem
Beschreibung: Innenabstand der Eingabefelder

--fb-input-bg-color
Default: rgb(243,244,246)
Beschreibung: Hintergrundfarbe der Eingabefelder

--fb-input-border-width
Default: 1px
Beschreibung: Strichstärke der Umrandung

--fb-input-border-color
Default: transparent
Beschreibung: Farbe der Umrandung

--fb-input-border-radius
Default: .25rem
Beschreibung: Umrandungsradius der Eingabefelder

--fb-input-border-color-focus
Default: rgb(107,114,128)
Beschreibung: Farbe der Umrandung

--fb-input-bg-color-focus
Default: #FFFFFF
Beschreibung: Farbe der Umrandung bei Fokus und Hover

Fixierte Eingabe

Die folgenden Variablen dienen zur Gestaltung der Eingabefelder für mit fest vorgegebenen Eingabewerten (z.B. Posten) im Formular:

--fb-input-fixed-text-color
Default: var(--fb-input-text-color)
Beschreibung: Farbe der fixen Werte

--fb-input-fixed-border-width
Default: var(--fb-input-border-width)
Beschreibung: Strichstärke der Umrandung

--fb-input-fixed-border-radius
Default: var(--fb-input-border-radius)
Beschreibung: Umrandungsradius

--fb-input-fixed-border-color
Default: transparent
Beschreibung: Farbe der Umrandung

--fb-input-fixed-bg-color
Default: transparent
Beschreibung: Hintergrundfarbe

--fb-input-fixed-padding
Default: var(--fb-input-padding)
Beschreibung: Innenabstand

Checkbox

Die folgenden Variablen dienen zur Gestaltung der Checkboxen/Kästchen, in die im Formular Haken gesetzt werden können:

--fb-checkbox-border-radius
Default: .25rem
Beschreibung: Umrandungsradius

--fb-checkbox-border-width
Default: 1px
Beschreibung: Strichstärke der Umrandung

--fb-checkbox-border-color
Default: rgb(229,231,235)
Beschreibung: Farbe der Umrandung

--fb-checkbox-bg-color
Default: rgb(243,244,246)
Beschreibung: Hintergrundfarbe

--fb-checkbox-size
Default: 1rem
Beschreibung: Höhe und Breite

--fb-checkbox-bg-image
Default: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")
Beschreibung: Checkmark Symbol

Radio-Buttons

Die folgenden Variablen dienen zur Gestaltung der Radio-Buttons im Formular:

--fb-radio-border-width
Default: 1px;
Beschreibung: Strichstärke der Umrandung

--fb-radio-border-color
Default: rgb(229,231,235)
Beschreibung: Farbe der Umrandung

--fb-radio-bg-color
Default: rgb(243,244,246)
Beschreibung: Hintergrundfarbe

--fb-radio-size
Default: 1rem
Beschreibung: Höhe und Breite

--fb-radio-bg-image
Default: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
Beschreibung: Radio Symbol

Zahlungsweisen

Die folgenden Variablen dienen zur Gestaltung der Auswahl-Elemente für die verfügbaren Zahlungsweisen im Formular:

   
--fb-payment-method-border-color
Default: rgb(229,231,235)
Beschreibung: Farbe der Umrandung

--fb-payment-method-border-radius
Default: .5rem
Beschreibung: Umrandungsradius

--fb-payment-method-border-width
Default: 1px
Beschreibung: Strichstärke der Umrandung

--fb-payment-method-bg-color
Default: #FFFFFF
Beschreibung: Hintergrundfarbe

Betragsvorschläge

--fb-amount-choice-amount-font-size
Default: 1.25rem
Beschreibung: Schriftgröße des Betrags

--fb-amount-choice-description-font-size
Default: .85rem
Beschreibung: Schriftgröße der Beschreibung

--fb-amount-choice-border-color
Default: rgb(229,231,235)
Beschreibung: Farbe der Umrandung

--fb-amount-choice-border-radius
Default: .5rem
Beschreibung: Umrandungsradius

--fb-amount-choice-border-width
Default: 1px
Beschreibung: Strichstärke der Umrandung

--fb-amount-choice-bg-color
Default: #FFFFFF
Beschreibung: Hintergrundfarbe der Kachel

Bildauswahl

--fb-image-choice-border-width
Default: 2px
Beschreibung: Strichstärke der Umrandung

--fb-image-choice-border-radius
Default: .25rem;
Beschreibung: Umrandungsradius

--fb-image-choice-border-color
Default: rgb(229,231,235)
Beschreibung: Farbe der Umrandung