So fügen Sie Custom CSS zu Formularen, Umfragen und Quiz hinzu

Sie können das Design Ihrer Formulare, Umfragen und Quiz ganz einfach mit Custom CSS anpassen. Folgen Sie diesen Schritten:

1. Wo Sie Custom CSS hinzufügen können

Option 1: Direkt im Formular, der Umfrage oder dem Quiz (empfohlen)

Gehen Sie zu Sites → Form Builder (oder Survey Builder / Quiz Builder)
Öffnen Sie Ihr Formular
Klicken Sie auf Styles → Advanced → Custom CSS
Fügen Sie Ihren CSS-Code ein
Klicken Sie auf Save und anschließend Publish

➡️ Diese Methode ändert das Design direkt innerhalb des Formulars oder der Umfrage.

Tipp:
Für einfache Abstände oberhalb Ihres Formulars nutzen Sie zuerst die integrierten Top-Margin-Einstellungen unter
Styles → Layout.

Verwenden Sie Custom CSS nur für erweiterte Anpassungen.

Option 2: Auf Funnel- oder Website-Seiten

Wenn Ihr Formular eingebettet ist:

Öffnen Sie Ihren Funnel oder Ihre Website im Builder
Gehen Sie zu Settings → Custom CSS
Fügen Sie dort CSS hinzu (für Container-Styling wie Abstände, Padding, Hintergrundfarben)

⚠️ Wichtig:
Sie können hier keine Formularfelder oder Buttons stylen, da das Formular in einem iframe geladen wird.

Option 3: Externe Websites (z. B. WordPress)

Sie können nur den iframe-Container stylen
Nicht die Inhalte innerhalb des Formulars

2. Grundlegende CSS-Beispiele

A. Eingabefelder

input, textarea, select {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  font-size: 16px;
}
 
input:focus, textarea:focus {
  border-color: #7C3AED;
  box-shadow: 0 0 4px rgba(124, 58, 237, 0.3);
}

B. Submit-Button

button[type="submit"] {
  background-color: #7C3AED;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}
 
button[type="submit"]:hover {
  background-color: #6931d4;
}

C. Labels und Fehlermeldungen

label {
  font-weight: 600;
  color: #111827;
}
 
.hl-error, .error-message {
  color: #DC2626;
  font-size: 14px;
}

D. Fortschrittsbalken (Umfragen/Quiz)

.hl-progress .fill {
  background-color: #7C3AED;
  transition: width 0.3s ease;
}

E. Mobile-Optimierung

@media (max-width: 480px) {
  form {
    padding: 0 10px;
  }
 
  button[type="submit"] {
    width: 100%;
  }
}

3. Navigation-Buttons in Umfragen stylen

.ghl-footer-preview .ghl-submit-btn {
  background-color: #28A745 !important;
  color: #FFFFFF !important;
}
 
.ghl-footer-preview .ghl-footer-next {
  background-color: #28A745 !important;
  color: #FFFFFF !important;
}
 
.ghl-footer-preview .ghl-footer-back {
  background-color: #28A745 !important;
  color: #FFFFFF !important;
}

👉 Sie können #28A745 durch Ihre Markenfarbe ersetzen.

4. Fehlerbehebung

Wenn Ihr CSS nicht funktioniert:

Stellen Sie sicher, dass es im Custom CSS-Bereich eingefügt wurde
Klicken Sie auf Publish
Aktualisieren Sie den Browser oder nutzen Sie den Inkognito-Modus
Bei eingebetteten Formularen beachten:
→ Seiten-CSS beeinflusst nicht den Inhalt im iframe

5. Quick Tipps

Immer Save & Publish nach Änderungen
Nutzen Sie Rechtsklick → Inspect, um Klassen zu finden
Verwenden Sie !important sparsam
Testen Sie Desktop & Mobile

6. Beispiel-Template (Copy & Paste)

input, textarea, select {
  width: 100%;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  padding: 10px;
}
 
label {
  font-weight: 600;
  color: #111827;
}
 
button[type="submit"] {
  background: #7C3AED;
  color: #fff;
  padding: 12px 18px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
 
button[type="submit"]:hover {
  background: #6931d4;
}

Fertig!
Ihr Formular, Ihre Umfrage oder Ihr Quiz verwendet jetzt Ihre individuellen Styles – inklusive perfekt angepasster Buttons im Design Ihrer Marke.