Ein einfaches Kontakt-Formular

Kontakt-Formular

Ein Kontakt-Formular findet sich auf fast jeder WordPress-Webseite. Dafür gibt es meistens zwei Gründe.
1. Die E-Mail-Adresse soll geschützt werden.
2. Die Kontaktaufnahme für den Besucher soll vereinfacht werden.

Egal, was dein Grund ist ... ich zeige dir heute das beste (kostenlose) Kontakt-Formular-Plugin für WordPress.


Das Kontakt-Formular:
Meine Empfehlung

Ich empfehle das Plugin "Contact Form 7". Du kannst das Plugin direkt aus deiner WordPress-Installation heraus installieren oder von der offiziellen Webseite downloaden.


Das Kontakt-Formular:
Die Bedienung

Auch wenn die Bedienung nicht sehr kompliziert ist, gibt es doch ein paar kleine Kniffe, die vielleicht ganz hilfreich sind.


Das erste Kontakt-Formular erstellen

So findest du den Kontakt-Formular-Editor:

Kontakt-Formular

Klicke auf den Button:

Und bearbeite das neue Kontakt-Formular:

Kontakt-Formular-erstellen

1. Gib einen Titel ein. (Der Titel ist nur für dich, damit du bei mehreren Kontaktformularen später weißt, um welches es sich handelt. Der Titel kann also z.B. "Formular-Kontaktseite" heißen.)

2. Bearbeite die Inhalte des Formulars.

Achte darauf, dass du nur die Text und nicht den "Code" (<p>, </br> usw.) veränderst.

Kontakt-Formular cf7-bearbeiten

Du kannst auch ganze Abschnitte entfernen, indem du einen ganzen Block löschst.

Kontakt-Formular cf7-bearbeiten

Am Ende sieht es dann vielleicht so aus.

Kontakt Formular cf7-angepasst

3. Vergesse nicht deine Arbeit zu speichern

Und damit ist das erste Formular erstellt.


Jetzt muss noch die E-Mail angepasst werden, die an dich geschickt wird, wenn sich jemand einträgt.

Standardmäßig sind dort Einstellungen, die ich nicht für sinnvoll halte.

Die E-Mail-Einstellungen für dein Kontakt-Formular erreichst du über den oberen Reiter

Die E-Mail richtig einstellen

Ich gehe jetzt einmal die gesamte Einstellung der E-Mail in der Reihenfolge der Nummerierung durch. Danach ist die E-Mail fertig eingestellt und das Kontakt-Formular startklar.

1. Das "An-Feld"

In diesem Feld ist standardmäßig die Adresse eingetragen, die Du in deiner WordPress-Installation hinterlegt hast. - Hier sollte die Adresse eingetragen werden, an die die Kontakt-Anfragen geschickt werden sollen. Also deine Kontaktadresse.

2. Das "Von-Feld"

In diesem Feld sollte der Absender eingetragen sein und zwar mit Name und E-Mail-Adresse.
Das ist vom Plugin so nicht vorgesehen und wenn wir das einrichten, wird eine Warnmeldung angezeigt. - Ich weiß nicht, was sich der Plugin-Autor dabei gedacht hat. 
Ich empfehle meine Einstellung zu übernehmen, damit du dann auf die Kontakt-Anfrage einfach antworten kannst. Sonst würde die Antwort nämlich an dich selbst geschickt.

Damit der Name und die E-Mail-Adresse automatisch eingetragen werden, benötigen wir dafür die richtigen Platzhalter: [your-name] <[your-email]>

Du kannst sie dir einfach unten aus dem Nachrichtenkörper (hinter dem "Von:") kopieren

3. Das "Betreff-Feld"

Das Feld kannst du ganz nach deinen Wünschen ausfüllen.
Wenn du in dem Formular kein "Betreff" abfragst, könntest du dort ein Standard-Betreff eintragen wie z.B. "Kontakt-Anfrage von internet-tool.de".
Soll nur der "Betreff" von dem Besucher angezeigt werden lässt du nur den Platzhalter dafür stehen: [your-subject]
(Wenn du auf diese E-Mail antwortest, sieht der Besucher diese Betreffzeile mit "AW:" davor.)

4. Der "Zusätzliche-Header"

Lösche bitte einfach den Inhalt aus diesem Feld.

5. Der "Nachrichtenkörper"

Hier bist du letztlich auch ganz frei. Es sollten aber alle Platzhalter vorkommen, die du in deinem Formular abfragst.
Die "Von-Zeile" bleibt genau so erhalten.
Die "Betreff-Zeile" kann ich in meinem Beispiel löschen, weil ich in dem Formular kein Betreff abfrage.
Ob über dem Nachrichten-Platzhalter noch einmal "Nachrichtentext" stehen muss, ist Geschmackssache. Der Platzhalter [your-message] muss aber erhalten bleiben, weil sonst die Nachricht nicht übermittelt werden würde.
Den unteren Text kannst du wieder frei gestalten oder auch ganz löschen ... ganz nach den eigenen Wünschen. Du kannst da z.B. auch ein Angebot einfügen, das der Besucher dann sehen würde, wenn du auf die E-Mail antwortest.

6. Die beiden "Anhak-Kästchen"

Zeilen mit leeren Tags ausschließen meint, das diese Zeilen nicht in der E-Mail angezeigt werden, falls der Besucher nichts eingetragen hat.
wenn also z.B. der Betreff prinzipiell abgefragt würde, ein Besucher aber nichts einträgt, würde die Zeile in der E-Mail nicht angezeigt. Aus meiner Sicht kann man das anhaken ... aber auch lassen.

Html-Content-Typ verwenden muss nur angehakt werden, wenn du html-Code in der E-Mail benutzt. Ich gehe mal davon aus, dass jeder, der html benutzt es weiß ... in sofern ist keine weitere Erklärung nötig.

7. Dateianhänge

In dieses Feld würden Platzhalter eingefügt, wenn der Besucher Dateianhänge hochladen dürfte. Das ist bei einem einfachen Kontaktformular nicht nötig und deshalb bleibt dieses Feld leer.


Die fertig bearbeitete E-Mail sieht dann in etwa so aus:

Kontakt-Formular-Mail-fertig

Vergiss nicht deine Veränderungen mit dem "speichern-Button" zu sichern!


Es gibt noch viele weitere Einstellmöglichkeiten, die aber über den Sinn dieser kurzen Einleitung hinaus gehen. 
Sieh dir die unterschiedlichen Optionen in Ruhe an. Ich bin mir sicher, dass du mit dieser Anleitung auch die anderen Optionen verstehen und bei Bedarf einsetzen kannst.

Das Kontakt-Formular:
Einfügen auf der Webseite

Das Einfügen des Formulars erfolgt ganz einfach über den Shortcode, der im Kontakt-Formular-Editor eingeblendet ist.

Kontakt-Formular-Shortcode

Achte darauf, dass du den Shortcode im "Text-Modus" einfügst.

Kontakt-Formular-Shortcode-einfuegen

Und so könnte das Ergebnis dann aussehen.

Kontakt-Formular-Optik

Das Kontakt-Formular:
Anpassung von Schrift und Farbe

Du möchtest das Kontakt-Formular wahrscheinlich optisch anpassen, denn von Haus aus wird es sich voraussichtlich in deinem Design nicht wirklich einfügen.

Das kannst du natürlich mit CSS-Kenntnissen alles komplett gestalten. Ich empfehle dafür aber einfach ein weiteres Plugin zu installieren, mit dem du die Optik schnell und einfach anpassen kannst. Das Plugin heißt "Contact Form 7 Skins" oder einfach CF7 Skins.
Das Plugin kannst du wieder kostenlos direkt in WordPress installieren oder von der CF7 Skins-Webseite herunterladen.

Nachdem du das Plugin installiert hast, kannst du dein Kontakt-Formular mit wenigen Klicks verändern. Unter dem Formular-Editor findest du jetzt zwei Reiter:


Unter dem Editor sind diese neuen Reiter:

Kontakt-Formular-cf7-skins-reiter

Unter dem Template-Reiter findest du verschiedene vorgefertigte "Formular-Aufbauten". Was uns jetzt aber interessiert, ist der Style-Reiter.
Dort gibt es verschiedene "Optiken", die du mit einem Klick auf "select" aktivieren kannst (speichern nicht vergessen ...)


Falls dir die Designs nicht reichen, gibt es auf der Webseite von Contact Form 7 noch eine Premium Version mit mehr Skins und mehr Einstellmöglichkeiten oder du fragst bei mir an. Ich kann diese Skins (gegen ein kleines Entgelt) deinen Wünschen anpassen, dann bekommst du das Formular direkt an deine Wünsche angepasst.


Aus aktuellem Anlaß möchte ich noch auf den eventuell nötigen Datenschutz hinweisen.
Es gibt leider Fälle, in denen du dein Formular nur über eine gesicherte Webseite nutzen solltest. Nähere Informationen findest du in diesem Artikel:
Datenschutz bei Kontaktformularen

Ich hoffe, ich konnte dir mit diesem Artikel helfen. Falls etwas unklar geblieben ist oder wenn du mir sonst etwas sagen möchtest, freue ich mich über einen Kommentar.

Du möchtest Rabatte für Premium-Plugins?
Dann trage dich hier in den Newsletter ein!

Newsletter - internet-tool.de
Über den Autor

Henning Klocke

Dieser Blog zeigt eine Auswahl der Plugins und Tools, die ich im Laufe der Zeit für meine eigenen und für Kundenwebseiten gesammelt habe, um gut funktionierende und nach Marketingprinzipien aufgebaute WordPress-Webseiten zu erstellen. Ich empfehle ausschließlich Tools, die ich selbst verwende bzw. für meine Kunden integriert habe. Falls dir ein Tool fehlt, freue ich mich über deine Frage!

4 Kommentare

Schreibe einen Kommentar: