Formular-Design per CSS stylen

Zurück zur Startseite

Formular-Design per CSS stylen

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.
Tipp: Ihre IT-Abteilung oder Agentur kann Ihnen bei Fragen zum Styling weiterhelfen. Bei Bedarf können wir Ihnen gerne Empfehlungen aussprechen. 

Hinweis: Bei Verwendung von Kreditkarten als Zahlungsweise ist wichtig zu beachten, dass die Kreditkarten-Felder nur bedingt angepasst werden können, da diese Felder wg. PCI-Compliance direkt von dem Zahlungsanbieter kommen. Weitere Information finden Sie unten.

Standard-CSS

Klicken Sie auf eines der unten stehenden Bilder, um die Standard-CSS-Datei anzeigen zu lassen:

     

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 kopieren Sie das angepasste (nur die Änderungen) CSS.
  6. Klicken Sie auf den Button speichern .
 
Tipp: Mit der Option "Keine Standard-Stylesheets laden" können Sie Formular komplett von A bis Z selbst stylen.

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

Hinweis: Da diese Felder von dem Zahlungsanbieter stammen, können grundsätzlich ebenfalls keine Placeholder gesetzt werden.

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.

Hinweis: Webseiten mit Elementen ohne SSL-Verschlüsselung werden vom Browser als unsicher eingestuft.

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.

Design-Beispiel




als PDF exportieren