Formular-Design per CSS stylen

INHALTSVERZEICHNIS

• Gut zu wissen
• Standard-CSS
• CSS im Formular hinterlegen
• Automatische Erfolgsseite stylen
• Styling von Kreditkarten-Feldern
• SSL-Verschlüsselung

Sie können das Aussehen Ihrer Formulare mit Hilfe von eigenen CSS-Anweisungen komplett an Ihre Webseite anpassen. Das individuelle Styling ermöglicht Ihnen die größtmögliche Design-Flexibilität. Hier erfahren Sie alles zum Formular Styling.

Gut zu wissen

• Unser Standard-CSS dient Ihnen als Hilfestellung, um IDs und Klassen nach Ihren Vorstellungen zu stylen.
• Dabei ändern Sie nicht das komplette CSS, sondern nur die gewünschten Stellen.
• Elemente (wie Bilder oder Schriften) nur mit SSL-Verschlüsselung im CSS nutzen.

Standard-CSS

Standardmäßig stellt Ihre FundraisingBox zwei verschiedene CSS-Design-Templates zur Verfügung:

• Polaris (Mehr Informationen dazu finden Sie im separaten Artikel Design-Template "Polaris" für Spendenformulare mit Tailwind CSS verwenden)
• Aurora (Link zum Aurora-CSS-Code)

CSS im Formular hinterlegen

1. Klicken Sie auf Formulare .
2. Wählen Sie das gewünschte Formular aus.
3. Unter Design wählen Sie das gewünschte Standard-Design aus.
4. Klicken Sie auf den Button Erweiterte Design-Einstellungen anzeigen.
5. In das Feld für Eigenes Stylesheet (CSS) kopieren Sie das angepasste (nur die Änderungen) CSS.
6. Klicken Sie auf den Button speichern  .

Automatische Erfolgsseite stylen

1. Möchten Sie die automatische Erfolgsseite ein anderes Styling geben, können Sie hierfür auf die #thankYouMessage ID zurückgreifen. 
2. Falls Sie z. B. die Hintergrundfarbe blau statt grün und die Überschrift etwas größer machen, wäre das wie folgt möglich:
    /* Hintergrundfarbe blau statt grün */
#thankYouMessage {
background-color: #006;
}

/* Überschrift größer */
#thankYouMessage h1 {
font-size: 80px;
 } 

Styling von Kreditkarten-Feldern

1. Die Felder zu den Kreditkarten-Daten (wie Kartennummer und Prüfnummer) stammen von dem Zahlungsanbieter, damit die Daten PCI-Konform übermittelt werden können.
2. Da diese Felder nicht direkt von der FundraisingBox kommen, können diese nur bedingt via CSS beeinflusst werden. 
3. Grundsätzlich wird das Styling vom dem “Karteninhaber/-in”-Feld übernommen. Beispiel: 
    #payment_credit_card_owner {
color: #F00;
}

/* Die Schriftfarbe des Inhaber-Feldes ist in diesem Beispiel rot. Die anderen Kreditkarten-Felder werden daher auch eine rote Schriftfarbe bekommen. */
4. Folgende CSS-Eigenschaften werden vom Inhaber-Feld in die anderen Kreditkarten-Felder übernommen:
   • color
   • font-family
   • font-size
   • font-style
   • line-height

SSL-Verschlüsselung

Wenn Sie eigene Elemente wie Bilder oder Schriftarten verwenden wollen, müssen Sie diese auf einen Server mit SSL-Unterstützung hochladen (oder auf SSL-fähigen Speicherlösungen, wie z.B. AWS S3 oder Cloudfront) und in Ihrem CSS absolut darauf referenzieren.

Da nicht jeder ein SSL-Zerfikat besitzt oder dafür extra kaufen will, haben Sie auch die Möglichkeit die Elemente in Ihrer FundraisingBox hochzuladen.

1. Klicken Sie auf Account  und wählen Dateien aus.
2. Wählen Sie Direktlink-Datei aus und laden die Datei(en) hoch.
3. Der angezeigte Direktlink ist öffentlich zugänglich und kann als Pfad in Ihrem CSS verwendet werden.