Homepage-Formular mit eigenem CSS gestalten

Rüdiger Reichelt
Zuletzt am 06.02.2026 aktualisiert

Wenn du das Homepage-Formular von Simple Ticket optisch an dein Theme anpassen möchtest, kannst du dies über eigenes CSS tun. Das Plugin verwendet bewusst klar abgegrenzte CSS-Klassen, damit keine anderen Formulare oder Theme-Elemente beeinflusst werden.

Das Formular wird über folgende Struktur ausgegeben:

<form class=“simple-ticket-form“>

Alle weiteren Elemente befinden sich innerhalb dieses Containers. Dadurch lassen sich Styles gezielt auf das Formular beschränken. CSS-Klassen im Formular-Container:

.simple-ticket-form

Der äußerste Wrapper des Formulars, geeignet für:

  • Abstände (margin, padding)
  • Hintergrund
  • Rahmen oder Schatten
  • maximale Breite
  • Eingabefelder

.simple-ticket-input

Alle Text-, E-Mail- und URL-Felder verwenden diese Klasse. Geeignet für:

  • Schriftgröße
  • Farben
  • Rahmen
  • Innenabstände
  • Textbereich (Nachricht)

.simple-ticket-textarea

Das mehrzeilige Nachrichtenfeld, geeignet für:

  • Mindesthöhe
  • Resize-Verhalten
  • Schriftart
  • Farben

.simple-ticket-button

Der Button zum Erstellen des Tickets. Geeignet für:

  • Hintergrundfarbe
  • Hover-Effekte
  • Rahmenradius
  • Schriftgewicht
  • Abstand zur darunterliegenden Notice

.simple-ticket-notice

Der optionale Text unterhalb des Buttons, geeignet für:

  • kleinere Schrift
  • dezente Farben

.simple-ticket-error

Container für Validierungs- und Sicherheitsfehler. Geeignet für:

  • Hervorhebung
  • Rahmen oder Hintergrund
  • Listenformatierung

.simple-ticket-success

Wird nach erfolgreicher Ticketerstellung ausgegeben. Geeignet für:

  • positive Hervorhebung
  • Hintergrundfarbe
  • Abstand zum restlichen Content

Noch ein Hinweis zu !important 

Einige Themes definieren sehr aggressive Formular-Styles (z. B. für input, textarea oder button). Falls eigene Styles nicht greifen, kann es sinnvoll sein, sie gezielt mit !important zu versehen, z. B.:

.simple-ticket-input { border-radius: 8px !important; }

Zusammenspiel mit dem Simple-Ticket-CSS

Wenn in den Simple-Ticket-Einstellungen die Option „Simple Ticket-CSS verwenden“ aktiviert ist, werden Standard-Styles geladen. Eigenes Theme-CSS kann diese Styles jederzeit überschreiben.

Alternativ kann das Plugin-CSS deaktiviert werden, um das Formular vollständig über das Theme zu gestalten.

War dieser Artikel hilfreich?