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. 

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.

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




Artikel drucken als PDF exportieren