Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

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

    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.

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?

Peter.

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

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
Udo Fahlbusch

Naja... haut mich nicht vom Hocker...

Antworten
LucasHoffmann
LucasHoffmann

Super Tool. Vielen Dank für den Beitrag!

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden
Alle Jobs
Zur Startseite
Zur Startseite