Entwicklung & Design

WordPress-Plugin Contact Form 7: Formular mit dem CF7 Customizer aufhübschen

Contact-Form-7-Formular visuell in wenigen Klicks aufbereiten. (Grafik: WordPress-Plugins)

Das WordPress-Plugin Contact Form 7 gehört zu den beliebtesten WordPress-Erweiterungen. Mit über einer Million Installationen ist es stark verbreitet und findet sich überall dort wieder, wo ein Formular benötigt wird. Wir schauen uns heute die Ergänzung CF7 Customizer an, die euren Formularen noch den nötigen (CSS-)Style verpassen.

Contact Form 7 hat alle wichtigen Funktionen, die ein Formular-Plugin benötigt. Die Struktur von Formular und Versand-Mail kann individuell erstellt und mit Platzhalter-Variablen belegt werden. Es werden unzählige Sprachen und die dazugehörigen Fehlermeldungen unterstützt. Eine direkte Formular-Validierung  ist vorhanden und es gibt viele Erweiterungen, die alle unsere Wünsche und Ideen befriedigen.

Contact-Form-7-Formular: Nicht nur technisch, sondern auch visuell aufbereiten

Damit ein verständliches und gutes Formular erstellt werden kann, ist nicht nur technischen Raffinessen gefragt, sondern das Ganze muss auch visuell gut zum Theme passen. Damit die Möglichkeit der visuellen Anpassungen nicht nur CSS-Profis vorbehalten bleibt, können wir mit dem CF7-Customizer-Plugin ein eigenes Erscheinungsbild des Formulars erstellen.

Mit dem CF7 Customizer können wir über den integrierten WordPress-Customizer das Formular live im Frontend anpassen. Es können Schriftfarben, Schriftgrößen, Hintergrundbilder, Abstände, Rahmen oder auch Hover-Effekte definiert werden. Das Ergebnis können wir direkt im Frontend begutachten und speichern. Für die Verwendung des Plugins wird Contact Form 7 benötigt, mit dem wir ein Formular erstellt und über den Shortcode auf einer Seite eingebettet haben. Folgend müssen wir den CF7 Customizer installieren und auf die Seite des angelegten Formulars navigieren. Nun können wir über die schwarze Admin-Leiste am oberen Rand den integrierten WordPress-Customizer starten und unser Formular aufbereiten.

https://vimeo.com/139903612

CF7 Customizer im Einsatz – Idee und Zweck

Das Aufbereiten eines Formulars kann natürlich auch für jeden erfahrenden CSS-Frickler über die Theme-CSS bewerkstelligt werden. Trotzdem sollten wir uns nochmals die Vorteile des Plugins im Vergleich zu der direkten CSS-Umsetzung ansehen. Bei der Plugin-Umsetzung ist es egal, ob CSS-Erfahrungen bestehen oder nicht: Jeder kann helfen die Formulare aufzubereiten – im Team. Es wird zusätzlich kein Child-Theme benötigt, das verhindert, dass die Änderungen bei dem nächsten Theme-Update nicht verloren gehen.

Zusätzlich kümmert sich CF7 Customizer um die Referenzierung der einzelnen Formulare. Sollten wir mehrere Formulare mit unterschiedlichen Erscheinungsbildern benötigen, übernimmt diese Aufgabe der CF7 Customizer – im CSS-Code müssten wir wiederum über eine eindeutige Klasse das richtige Formular selektieren, wobei auch nur der Programmierer wiederum die Kontrolle über die Vergabe hat.

Insgesamt doch eine sinnvolle Erweiterung für Contact Form 7, das sich besonders eignet, wenn mit einem fertigen Theme gearbeitet wird und die Anpassung nachträglich erstellt werden müssen – ohne das unbedingt CSS-Kenntnisse oder einen FTP-Zugang benötigt werden.

Hat der CF7 Customizer eine Chance bei euch?

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

5 Kommentare
LucasHoffmann
LucasHoffmann

Super Tool. Vielen Dank für den Beitrag!

Antworten
Udo Fahlbusch

Naja… haut mich nicht vom Hocker…

Antworten
kirchmeier
kirchmeier

A propos CF7:
Kennt jemand eine Möglichkeit, in der Admin-Email die letzte Referrer-URL aus der Browser-History mit auszugeben? Hintergrund ist: Ein Kontakt-Formular für die ganze Seite, aber ich will wissen, von welcher Seite aus das KF angesteuert wurde.
Vielleicht hat ja jemand ne Idee! :)
Dankbar für jeden Hinweis!
Achim

Antworten
Peter.

Offtopic: Die Wir-Form im Artikel ist sehr merkwürdiger Schreibstil. Wirkt wie Selbsthilfegruppe oder Kindergarten…

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.