Was ist Contactform 7?

Contactform 7 gehört mit zu den ältesten, aber auch am meisten verwendeten Formularen, bzw. Formular-Plugins in WordPress-Webseiten. Es ermöglicht den Benutzern, variable Formulare auf den Webseiten zu erstellen und zu betreiben. Die Reaktionen der Benutzer werden zumeist in E-Mails an den Webseitenbetreiber gesendet.

Wie ist Contactform 7 zu bedienen?

Die Bedienung ist nach heutigen Gesichtspunkten eher „old-school“. Kein Drag/Drop, sondern Buttons und ein besonders formatierter Quellcode ist die Grundlage für den Formularaufbau und auch den anschließenden E-Mail-Versand. Wer drag-drop erwartet oder möchte, sollte sich ein anderes Plugin suchen (z.B. WP Forms)

Checkboxen und Radiobuttons – Darstellung in 1 Zeile

Eine Krux ist jedoch die Darstellung von Checkboxen und Radiobuttons innerhalb 1 Zeile, ohne Umbruch nach oder Vor den Formularelementen. Eine Liste von mehreren Checkboxen oder Radiobuttons sieht daher so aus:

Checkbox 1 Checkbox 2 Checkbox 3 Checkbox 4

Das gleiche gilt für die Radiobuttons. Diese Optik sieht natürlich nicht nur schlecht aus, sondern ist für die Besucher auch sehr unübersichtlich.

In der Definition der Checkboxen oder Radio-Buttons von Contactform 7 gibt es keine direkte Einstellmöglichkeit, wie diese Optik geändert werden könnte.

Lösung: Für jede Checkbox mit Label, bzw. für jeden Radio-Button mit Label in 1 Zeile

Für die Lösung dieses Problem muss mit etwas CSS-Code gearbeitet werden. Die meisten modernen Themes bieten innerhalb des Customizers eine Möglichkeit, „Custom CSS“ einzugeben. Falls nicht, ist es wohl das einfachste, ein entsprechendes Plugin „Custom CSS“ zu installieren.

So stellen Sie Checkboxen und Radiobuttons mit Contactform 7 in jeweils 1 Zeile

Zur Lösung des Problems geben Sie folgenden CSS-Code in das Custom-CSS ein:

span.wpcf7-list-item {display: block;}

Mit diesem Code werden die Browser angewiesen, die Contactform7 Checkboxen und Radiobuttons jeweils in eine eigene Zeile zu stellen.
So sieht das Formular dann nach dieser Anpassung aus:

Checkbox 1
Checkbox 2
Checkbox 3
Checkbox 4