Formular-Design per CSS stylen

INHALTSVERZEICHNIS

• Voraussetzungen und wichtige Hinweise
• Standard-Design als Grundlage auswählen
• Eigenes CSS im Formular hinterlegen
• Projekt im Formular ausblenden
• Automatische Erfolgsseite gestalten
• Kreditkartenfelder gestalten
• Eigene Bilder und Schriftarten per SSL einbinden
  • Dateien über die FundraisingBox bereitstellen

Mit eigenem CSS kannst Du das Design Deiner klassischen Spendenformulare gezielt an Deine Website anpassen. In diesem Artikel erfährst Du, wo Du eigenes CSS hinterlegst und wie Du einzelne Bereiche des Formulars individuell gestaltest.

Voraussetzungen und wichtige Hinweise

Für individuelle CSS-Anpassungen kannst Du das Standard-CSS der FundraisingBox als Grundlage verwenden. Du musst dabei nicht das vollständige Stylesheet übernehmen, sondern hinterlegst nur die CSS-Regeln, die Du ändern möchtest.

• Eigener CSS-Code steht nicht in allen FundraisingBox-Varianten zur Verfügung.
• Eigene Bilder, Schriftarten und andere externe Elemente musst Du über eine SSL-verschlüsselte Verbindung einbinden.
• Kreditkartenfelder lassen sich aus Gründen der PCI-Compliance nur eingeschränkt gestalten.

Bei technischen Fragen zum Styling kann Dich außerdem Deine IT-Abteilung oder Agentur unterstützen. Bei Bedarf kann Dir unser Support-Team Empfehlungen für Agenturen aussprechen, falls Du noch keine hast.

Standard-Design als Grundlage auswählen

Für klassische Spendenformulare stellt Dir die FundraisingBox zwei CSS-Design-Templates zur Verfügung:

• Polaris: Weitere Informationen findest Du im Artikel Design-Template „Polaris“ für Spendenformulare mit Tailwind CSS verwenden.
• Aurora: Das zugehörige CSS findest Du unter Aurora-CSS-Code.

Eigenes CSS im Formular hinterlegen

Deine individuellen CSS-Regeln hinterlegst Du direkt in den Design-Einstellungen des gewünschten klassischen Formulars.

1. Öffne links im Menü Formulare > Klassische Formulare.
   

2. Klicke auf das Formular, dessen Design Du anpassen möchtest.
3. Öffne innerhalb der Formular-Einstellungen rechts im Menü  den Bereich Design und wähle das gewünschte Design-Template aus. Beispielsweise Polaris, wie hier zu sehen:
   
4. Klicke auf Erweiterte Design-Einstellungen anzeigen.
5. Füge Deine angepassten CSS-Regeln in das Feld Eigenes Stylesheet (CSS) ein.
   Hinterlege dabei nur die CSS-Regeln, die vom Standard abweichen sollen.
   
6. Klicke oben rechts auf Speichern. 

Möchtest Du das Formular vollständig selbst gestalten, kannst Du die Option Keine Standard-Stylesheets laden verwenden. In diesem Fall wird das vorhandene Standard-Styling gar nicht geladen.

Projekt im Formular ausblenden

Du kannst ein Projekt einer Transaktion zuordnen, ohne die Projektauswahl für Spender*innen im Formular anzuzeigen. Das ist zum Beispiel sinnvoll, wenn in den Einstellungen nur ein Projekt vorhanden ist und deshalb jede Transaktion automatisch diesem Projekt zugeordnet wird.

Blende die Projektauswahl über die ID #projectChoice aus:

/* Projekt ausblenden */
#projectChoice {
  display: none !important;
}

Automatische Erfolgsseite gestalten

Auch die automatisch angezeigte Erfolgsseite kannst Du mit CSS anpassen. Verwende dafür die ID #thankYouMessage.

Das folgende Beispiel ändert die Hintergrundfarbe der Erfolgsnachricht in Blau und vergrößert die Überschrift:

/* Hintergrundfarbe blau statt grün */
#thankYouMessage {
  background-color: #006;
}

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

Kreditkartenfelder gestalten

Die Eingabefelder für Kreditkartendaten wie Kartennummer und Prüfnummer werden direkt vom Zahlungsanbieter bereitgestellt. Dadurch können die Daten PCI-konform übertragen werden. Da diese Felder nicht direkt von der FundraisingBox stammen, kannst Du ihr Design nur eingeschränkt über Dein CSS beeinflussen.

Bestimmte CSS-Eigenschaften werden vom Feld für den*die Karteninhaber*in auf die übrigen Kreditkartenfelder übertragen. Im folgenden Beispiel wird die Schriftfarbe auf Rot gesetzt:

#payment_credit_card_owner {
  color: #F00;
}

/* Die rote Schriftfarbe wird auch für die anderen
   Kreditkartenfelder übernommen. */

Folgende Eigenschaften können vom Feld für den*die Karteninhaber*in übernommen werden:

• color
• font-family
• font-size
• font-style
• line-height

Eigene Bilder und Schriftarten per SSL einbinden

Wenn Du über Dein CSS eigene Bilder, Schriftarten oder andere externe Dateien verwendest, müssen diese über eine SSL-verschlüsselte Verbindung erreichbar sein. Lade die Dateien dafür auf einen Server mit SSL-Unterstützung oder auf eine SSL-fähige Speicherlösung wie AWS S3 oder CloudFront und referenziere sie in Deinem CSS über einen absoluten Pfad.

Dateien über die FundraisingBox bereitstellen

Wenn Du keinen eigenen SSL-fähigen Speicher verwenden möchtest, kannst Du benötigte Dateien direkt in Deiner FundraisingBox hochladen.

1. Öffne links im Menü Account und wähle Dateien.
   

2. Wähle Direktlink-Datei und lade die gewünschte Datei oder mehrere Dateien hoch.
   
3. Kopiere den nach dem Upload angezeigten Direktlink. Der Link ist öffentlich zugänglich und kann als Pfad in Deinem CSS verwendet werden.