Design-Template „Polaris“ für klassische Spendenformulare mit Tailwind CSS anpassen

INHALTSVERZEICHNIS

• Bevor Du individuelle Anpassungen umsetzt
• Polaris über CSS-Variablen gestalten
• Design-Template auf Polaris umstellen
• Eigene CSS-Variablen verwenden
• Globale Variablen für das Formular
• Fußnoten gestalten
• Legenden und Abschnittsüberschriften gestalten
• Buttons gestalten
• Links gestalten
• Beschriftungen von Eingabefeldern gestalten
• Eingabefelder gestalten
• Feste Eingabewerte gestalten
• Checkboxen gestalten
• Radio-Buttons gestalten
• Zahlungsweisen gestalten
• Betragsvorschläge gestalten
• Bildauswahl gestalten

Mit dem Design-Template „Polaris“ kannst Du das Erscheinungsbild Deiner klassischen FundraisingBox-Spendenformulare über CSS-Variablen anpassen. In diesem Artikel erfährst Du, wie Du Polaris aktivierst und Farben, Schriften, Eingabefelder, Buttons und weitere Formularelemente gezielt gestaltest.

Bevor Du individuelle Anpassungen umsetzt

Hinweis: Bevor Du umfangreiche Anpassungen über eigenen Code umsetzt, empfehlen wir Dir eine kurze Rücksprache mit unserem FundraisingBox-Support-Team. Wir entwickeln unsere Formularlösungen aktuell neu und können Dich dazu beraten, welche Ansätze für neue Projekte langfristig sinnvoll sind.

Das Design-Template „Polaris“ steht seit Mitte Juni 2023 neben dem Template „Aurora“ in den Design-Einstellungen der klassischen Spendenformulare zur Verfügung. Polaris verwendet Tailwind CSS und bietet Dir zusätzliche Möglichkeiten für individuelle Design-Anpassungen.

Polaris verbessert außerdem verschiedene Bereiche der Formularnutzung:

• Elemente der Benutzer*innen-Oberfläche enthalten ARIA-Attribute, um Screenreader besser zu unterstützen und die Barrierefreiheit zu verbessern.
• Betragsvorschläge sind deutlicher hervorgehoben und insbesondere auf Mobilgeräten einfacher nutzbar.
• Datums- und IBAN-Felder unterstützen Spender*innen bei der korrekten Eingabe.

Wichtig: Die in diesem Artikel beschriebenen Einstellungen gelten ausschließlich für das Design-Template „Polaris“. Du kannst sie nicht 1:1 auf das Template „Aurora“ übertragen.

Polaris über CSS-Variablen gestalten

Polaris unterstützt vordefinierte CSS-Variablen, mit denen Du das Erscheinungsbild des gesamten Formulars oder einzelner Formularelemente steuerst. Zusätzlich kannst Du einzelne Elemente über Klassen und IDs gestalten.

Für ein einheitliches Erscheinungsbild solltest Du nach Möglichkeit die CSS-Variablen verwenden. Dadurch musst Du die HTML-Struktur des Formulars nicht im Detail kennen und kannst zentrale Designwerte an einer Stelle definieren.

Design-Template auf Polaris umstellen

Du wählst Polaris direkt in den Design-Einstellungen des gewünschten Formulars aus.

1. Öffne den Formular-Bereich Deiner FundraisingBox über Formulare > Klassische Formulare
   
2. Öffne das Formular, das Du bearbeiten möchtest indem Du auf den Formularnamen klickst.
3. Öffne den Abschnitt Design im rechten Menü.
   
4. Wähle Polaris als Design-Template.
   
5. Speichere Deine Änderung über den blauen Button oben rechts.

Weitere Informationen zu den Design-Einstellungen findest Du im Hilfe-Artikel Formular konfigurieren und einbetten.

Wichtig: Beim Wechsel des Design-Templates werden individuelle CSS-, HTML- oder JavaScript-Anpassungen nicht automatisch übernommen. Prüfe bestehende Anpassungen und übertrage sie bei Bedarf.

Eigene CSS-Variablen verwenden

Eigenes CSS verwendest Du mit Polaris grundsätzlich genauso wie bisher. Tailwind CSS erweitert dabei die Möglichkeiten zur individuellen Gestaltung.

Füge Deine CSS-Variablen unter Design → Erweiterte Design-Einstellungen anzeigen → Eigenes Stylesheet (CSS) ein.

Ein mögliches Beispiel:

:root {
  --fb-primary: #FF00FF;
  --fb-text-color: #222222;
  --fb-input-border-width: 1px;
  --fb-input-border-color: #222222;
  --fb-input-bg-color: #FFFFFF;
  --fb-button-border-radius: 20px;
}

Mit diesen Einstellungen erhält Dein Formular:

• Magenta als Primärfarbe (#FF00FF),
• Dunkelgrau als Textfarbe (#222222),
• weiß hinterlegte Eingabefelder mit dunkelgrauer Umrandung und
• Buttons mit einem Eckenradius von 20 px.

Hier der Vergleich zwischen dem Standard-Design des Polaris Templates (links) und der individuellen Anpassung mit eigenem CSS (rechts):

Einige globale Variablen werden von einzelnen Elementen übernommen. So verwendet beispielsweise ein Button standardmäßig die in --fb-primary festgelegte Farbe. Du kannst diesen Wert für den Button separat überschreiben:

:root {
  --fb-primary: #FF00FF;
  --fb-text-color: #222222;
  --fb-input-border-width: 1px;
  --fb-input-border-color: #222222;
  --fb-input-bg-color: #FFFFFF;
  --fb-button-border-radius: 20px;
  --fb-button-bg-color: #EE82EE;
  --fb-button-bg-color-focus: #9400D3;
}

Der Button hat damit einen violetten Hintergrund (#EE82EE). Bei Fokus und Hover wird der Hintergrund dunkelviolett (#9400D3).

Globale Variablen für das Formular

Globale Variablen wirken sich auf das gesamte Formular aus und werden teilweise von einzelnen Elementen übernommen. Bei Bedarf kannst Du die Werte für diese Elemente separat überschreiben.

• --fb-form-bg-color – Hintergrundfarbe des Formulars. Default: #FFFFFF
• --fb-primary – Primärfarbe des Formulars. Default: #55af19. Du kannst die Primärfarbe auch über den Color-Picker im Abschnitt Design auswählen.
• --fb-error-color – Fehlerfarbe. Default: rgb(239,68,68)
• --fb-success-color – Erfolgsfarbe. Default: rgb(34,197,94)
• --fb-warning-color – Warnfarbe. Default: rgb(249,115,22)
• --fb-text-color – Textfarbe. Default: #000000
• --fb-font-size – Schriftgröße. Default: 1rem
• --fb-font-weight – Schriftstärke. Default: 400
• --fb-font-style – Schriftstil. Default: normal
• --fb-font-family – Schriftfamilie. Default: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif

Die Primärfarbe wird unter anderem auf folgende Elemente angewendet:

• Toggle- und Schalter-Elemente
  
• Checkboxen
  Radio-Buttons
  
• ausgewählte Betragsvorschläge
• ausgewählte Zahlungsweisen
  
• ausgewählte Bilder bei Geschenkspenden
• Spenden-Button
  

Fehler-, Erfolgs- und Warn-Banner verwenden die jeweils dafür definierten Farbvariablen. 

Fußnoten gestalten

Mit diesen Variablen gestaltest Du Hinweistexte und Fußnoten im Formular:

• --fb-footnote-text-color – Textfarbe. Default: rgb(55,65,81)
• --fb-footnote-font-size – Schriftgröße. Default: .75rem
• --fb-footnote-font-weight – Schriftstärke. Default: normal
• --fb-footnote-font-style – Schriftstil. Default: normal
• --fb-footnote-font-family – Schriftfamilie. Default: inherit

Legenden und Abschnittsüberschriften gestalten

Mit den Legenden-Variablen gestaltest Du Abschnittsüberschriften im Formular, zum Beispiel die Überschrift des Bereichs für die persönlichen Daten der Spender*innen.

• --fb-legend-font-size – Schriftgröße. Default: 1.25rem
• --fb-legend-font-weight – Schriftstärke. Default: 500
• --fb-legend-font-style – Schriftstil. Default: normal
• --fb-legend-font-family – Schriftfamilie. Default: inherit

Buttons gestalten

Mit den folgenden Variablen passt Du Abstände, Umrandung, Beschriftung und Hintergrund der Buttons an:

• --fb-button-padding – Innenabstand. Default: 1rem 1.5rem
• --fb-button-border-color – Farbe der Umrandung. Default: transparent
• --fb-button-border-width – Stärke der Umrandung. Default: 0
• --fb-button-border-color-focus – Umrandungsfarbe bei Fokus und Hover. Default: var(--fb-button-border-color)
• --fb-button-border-radius – Eckenradius. Default: .25rem
• --fb-button-text-color – Textfarbe. Default: #FFFFFF
• --fb-button-text-color-focus – Textfarbe bei Fokus und Hover. Default: var(--fb-button-text-color)
• --fb-button-text-transform – Texttransformation. Default: uppercase
• --fb-button-font-size – Schriftgröße. Default: 1.25rem
• --fb-button-font-weight – Schriftstärke. Default: 500
• --fb-button-font-style – Schriftstil. Default: normal
• --fb-button-font-family – Schriftfamilie. Default: inherit
• --fb-button-bg-color – Hintergrundfarbe. Default: var(--fb-primary)
• --fb-button-bg-color-focus – Hintergrundfarbe bei Fokus und Hover. Default: var(--fb-button-bg-color)
• --fb-button-opacity-focus – Transparenz bei Fokus und Hover. Default: 0.8

Links gestalten

Mit den folgenden Variablen passt Du die Darstellung von Links im Formular an:

• --fb-link-text-decoration – Textdekoration. Default: underline
• --fb-link-color – Linkfarbe. Default: rgb(55,65,81)

Beschriftungen von Eingabefeldern gestalten

Mit diesen Variablen passt Du die Labels Deiner Eingabefelder an:

• --fb-label-text-color – Textfarbe. Default: rgb(55,65,81)
• --fb-label-font-size – Schriftgröße. Default: 1rem
• --fb-label-font-weight – Schriftstärke. Default: 400
• --fb-label-font-style – Schriftstil. Default: normal
• --fb-label-text-transform – Texttransformation. Default: none
• --fb-label-font-family – Schriftfamilie. Default: inherit

Eingabefelder gestalten

Die folgenden Variablen steuern Text-, Zahlen- und Nummerneingabefelder:

• --fb-input-text-color – Textfarbe. Default: #000000
• --fb-input-font-size – Schriftgröße. Default: 1rem
• --fb-input-font-weight – Schriftstärke. Default: 400
• --fb-input-font-style – Schriftstil. Default: normal
• --fb-input-font-family – Schriftfamilie. Default: inherit
• --fb-input-padding – Innenabstand. Default: .5rem .75rem .5rem .75rem
• --fb-input-bg-color – Hintergrundfarbe. Default: rgb(243,244,246)
• --fb-input-border-width – Stärke der Umrandung. Default: 1px
• --fb-input-border-color – Farbe der Umrandung. Default: transparent
• --fb-input-border-radius – Eckenradius. Default: .25rem
• --fb-input-border-color-focus – Farbe der Umrandung bei Fokus. Default: rgb(107,114,128)
• --fb-input-bg-color-focus – Hintergrundfarbe bei Fokus. Default: #FFFFFF

Feste Eingabewerte gestalten

Mit diesen Variablen gestaltest Du Felder mit fest vorgegebenen Werten, zum Beispiel Posten:

• --fb-input-fixed-text-color – Textfarbe. Default: var(--fb-input-text-color)
• --fb-input-fixed-border-width – Stärke der Umrandung. Default: var(--fb-input-border-width)
• --fb-input-fixed-border-radius – Eckenradius. Default: var(--fb-input-border-radius)
• --fb-input-fixed-border-color – Farbe der Umrandung. Default: transparent
• --fb-input-fixed-bg-color – Hintergrundfarbe. Default: transparent
• --fb-input-fixed-padding – Innenabstand. Default: var(--fb-input-padding)

Checkboxen gestalten

Mit den folgenden Variablen passt Du Checkboxen im Formular an. Im Fokus- und ausgewählten Zustand verwenden Checkboxen die unter --fb-primary definierte Farbe.

• --fb-checkbox-border-radius – Eckenradius. Default: .25rem
• --fb-checkbox-border-width – Stärke der Umrandung. Default: 1px
• --fb-checkbox-border-color – Farbe der Umrandung. Default: rgb(229,231,235)
• --fb-checkbox-bg-color – Hintergrundfarbe. Default: rgb(243,244,246)
• --fb-checkbox-size – Höhe und Breite. Default: 1rem
• --fb-checkbox-bg-image – definiert das Checkmark-Symbol als SVG-Data-URL.

Radio-Buttons gestalten

Radio-Buttons verwenden im Fokus- und ausgewählten Zustand ebenfalls die unter --fb-primary definierte Farbe.

• --fb-radio-border-width – Stärke der Umrandung. Default: 1px
• --fb-radio-border-color – Farbe der Umrandung. Default: rgb(229,231,235)
• --fb-radio-bg-color – Hintergrundfarbe. Default: rgb(243,244,246)
• --fb-radio-size – Höhe und Breite. Default: 1rem
• --fb-radio-bg-image – definiert das Radio-Symbol als SVG-Data-URL.

Zahlungsweisen gestalten

Mit diesen Variablen gestaltest Du die Auswahlkacheln für Zahlungsweisen. Im Fokus- und ausgewählten Zustand verwenden die Kacheln die unter --fb-primary definierte Farbe.

• --fb-payment-method-border-color – Farbe der Umrandung. Default: rgb(229,231,235)
• --fb-payment-method-border-radius – Eckenradius. Default: .5rem
• --fb-payment-method-border-width – Stärke der Umrandung. Default: 1px
• --fb-payment-method-bg-color – Hintergrundfarbe. Default: #FFFFFF

Betragsvorschläge gestalten

Die Kacheln für Betragsvorschläge verwenden im Fokus- und ausgewählten Zustand die unter --fb-primary definierte Farbe.

• --fb-amount-choice-amount-font-size – Schriftgröße des Betrags. Default: 1.25rem
• --fb-amount-choice-description-font-size – Schriftgröße der Beschreibung. Default: .85rem
• --fb-amount-choice-border-color – Farbe der Umrandung. Default: rgb(229,231,235)
• --fb-amount-choice-border-radius – Eckenradius. Default: .5rem
• --fb-amount-choice-border-width – Stärke der Umrandung. Default: 1px
• --fb-amount-choice-bg-color – Hintergrundfarbe. Default: #FFFFFF

Bildauswahl gestalten

Die Auswahlkacheln für Bilder verwenden im Fokus- und ausgewählten Zustand die unter --fb-primary definierte Farbe.

• --fb-image-choice-border-width – Stärke der Umrandung. Default: 2px
• --fb-image-choice-border-radius – Eckenradius. Default: .25rem
• --fb-image-choice-border-color – Farbe der Umrandung. Default: rgb(229,231,235)