CF7 – Basics! Erstellen eines Kontaktformulars

 

Contact Form 7 – Basics

 

Du möchtest ein Kontaktformular in deine WordPress-Seite einbinden? Dann nehmen wir dich an der Hand und erklären dir in einer ausführlichen Schritt für Schritt-Anleitung, wie wir ein Kontaktformular auf deiner Seite einfügen. 

Wir sprechen hier nicht von irgendeinem Kontaktformular, sondern von Contact Form 7. Dieses Plugin ist mit über 5 Millionen Downloads eines der beliebtesten und zugleich verbreitetsten Kontaktformulare.

Diese Step-by-Step-Anleitung bezieht sich auf die Version 5.1.6

 

Schritt 1: Installation

Bevor wir mit der Konfiguration des Plugins starten, müssen wir dieses zuerst installieren. 

Hierfür gehst du in das WordPress Dashboard und klickst in der linken Spalte auf Plugins. Nun öffnet sich ein Untermenü, in welchem du auf Installieren klickst.

 

 

In der Suchleiste kannst du nun nach dem Plugin Contact Form 7 suchen. 

 

 

Sobald du das Plugin mit dem schneebedeckten Berg im Hintergrund gefunden hast, klickst du auf installieren und das Plugin wird heruntergeladen und für dich installiert. Kurz zur Information für dich, das Plugin ist kostenfrei. 

Um das Plugin verwenden zu können, musst du das Plugin noch aktivieren. 

Nach der Aktivierung des Plugins ist der Installationsprozess schon abgeschlossen. 

In deinem WordPress Dashboard erscheint auf der linken Seite der Unterpunkt Formulare.

Nun können wir dein Kontaktformular individuell gestalten und in deine Seite einbinden.

 

 

 

 

Schritt 2: Erstellen und einfügen deines Kontaktformulars

 

Du wirst sehen, das Einfügen des Kontaktformulars auf deiner Website geht im Handumdrehen! 

Klicke hierzu in der linken Spalte auf Formulare. Jetzt öffnet sich ein Untermenü mit weiteren Auswahlmöglichkeiten. Hier klickst du auf Neu hinzufügen, um dein Kontaktformular anzulegen.

Nun öffnet sich eine neue Maske. In der oberen Leiste kannst du deinem Kontaktformular einen Namen geben. Wir haben uns für „Testformular“ entschieden. Dieser Name ist im Grunde ohne Bedeutung. Falls du später mehrere Kontaktformulare erstellt hast, fällt dir dadurch die Zuordnung leichter, sofern du Änderungen an deinen Kontaktformularen vornehmen möchtest. 

 

 

 

 

Im Anschluss daran klickst du auf Speichern. Und schon hast du dein Kontaktformular erstellt. Gleichzeitig wurde ein kleiner Shortcode für dich erzeugt (blau hinterlegt), mit dem du dein Kontaktformular an einer frei beliebigen Stelle auf deiner Website einfügen kannst. 

 

 

 

Kopiere hierzu den Shortcode und gehe auf die Stelle auf deiner Seite, an der du dein Kontaktformular platzieren möchtest. 

Erstelle an dieser beliebigen Stelle ein neues Textfeld und füge dort den eben kopierten Shortcode ein. Klicke unten noch auf Save changes und aktualisiere deine Seite. 

Das war doch kinderleicht. Shortcode kopieren, an beliebiger Stelle einfügen, Seite aktualisieren und das wars. 

 

 

 

 

Nachdem du deine Seite neu geladen hast, begutachten wir mal dein getanes Werk. Auf deiner Seite findest du jetzt ein Standart-Kontaktformular, welches wir jetzt auf deine Bedürfnisse anpassen.

 

 

 

Schritt 3: Kontaktformular individualisieren 

 

Schaue dir das bereits erstellte Kontaktformular in Ruhe an und überlege dir, was geändert werden muss. 

Um Änderungen an deinem Kontaktformular vorzunehmen, klickst du in der linken Spalte wieder auf Formulare und im Anschluss auf Kontaktformulare.

An dieser Stelle siehst du schon dein erstelltes Formular. Klicke auf Bearbeiten. 

 

 

 

 

 

Jetzt entscheidest du, welche Angaben der Seitenbesucher über das Kontaktformular eingeben kann, welche Angaben Pflichtangaben sind und welche Angaben variabel sind. 

Die oben markierten Textbausteine kannst du problemlos per Klick in dein Kontaktformular einfügen. Auch die Anordnung lässt sich anpassen, indem du die Codeschnipsel an die von dir gewünschten Stelle kopierst.
So kannst du es deinem Seitenbesucher beispielsweise ermöglichen,  seine URL dem Kontaktformular beizufügen, ein genaues Datum einzutragen oder z.B. eine Datei dem Kontaktformular anzuhängen. An dieser Stelle ist Kreativität gefragt, um das Kontaktformular exakt auf deine Kundenbedürfnisse anzupassen. 

 

 

 

 

Sobald du ein neues „Formular-Element“ aus der Liste ausgewählt hast, öffnet sich automatisch ein neues Popup-Fenster. Hiermit kannst du individuelle Einstellungen zu diesem Element vornehmen. 

Um die Einstellungen schneller zu verstehen, haben wir dir eine kleine Ausfüllhilfe zusammengestellt: 

  • Pflichtfeld: soll an dieser Stelle ein Pflichtfeld in deinem Kontaktformular entstehen? Ist diese Angabe wichtig für dich zu wissen oder handelt es sich hierbei eher um eine Nice to have-Angabe. 

  • Name: Wie soll dieses Feld bezeichnet werden? 

  • Standardwert: dieser Wert wird im Kontaktformular als „Standard“ ausgegeben

  • Akismet: Hierbei handelt es sich um eine Spam-Filterung 

Sofern du alle Eingaben gemacht hast, klickst du auf den Button Tag einfügen. Dadurch wird dieses Feld in dein Kontaktformular übernommen. 

Nach diesem Schema kannst du noch weitere Textbausteine deinem Kontaktformular hinzufügen. 

 

 

Schritt 4: Hinterlege deine E-Mailadresse

 

Sobald einer deiner Seitenbesucher sich entschieden hat, dich über das Kontaktformular zu kontaktieren, versendet das Plugin Contact Form 7 eine automatisch generierte Mail an die von dir hinterlegte E-Mailadresse. Mittels dieser Mail erhältst du die vom Seitenbesucher in das Kontaktformular eingegebenen Daten und kannst individuell darauf antworten. 

Um diese E-Mailadresse anzupassen, klicke auf den Reiter E-Mail. 

Nun gilt es, deine E-Mailadresse zu überprüfen (das Feld „An“). Um dir die Arbeit zu erleichtern, legt Contact Form 7 als Standard die in WordPress anfangs von dir hinterlegte E-Mailadresse fest. Überprüfe diese und ändere diese bei Bedarf ab.

In dem zweiten Feld von oben („Von“) wird von WordPress eine E-Mailadresse generiert, von der du die Mail bekommst, sofern ein Seitenbesucher dein Kontaktformular ausgefüllt hat. Diese Mailadresse ist von dir bei Bedarf auch frei anpassbar. 

 

 

 

 

In dem Feld Nachrichtenkörper kannst du einstellen, wie die vom Seitenbesucher eingegeben Daten dir angezeigt werden. Zur Auswahl stehen dir hierzu die in dem Reiter Formular abgefragten Daten. Diese Werte werden dir als Textbausteine oben (hellgrau) angezeigt (in diesem Fall z.B. [your-name], [your-email], [your-subject], [your-message]… etc.). 

Die Textbausteine kannst du kopieren und in dem Feld Nachrichtenkörper in einer für dich sinnvollen Reihenfolge einfügen. Anstelle dieser Textbausteine wird später der Eingabewert des Seitenbesuchers dir ausgegeben. 

 

 

Schritt 5: Automatische Bestätigungsmail an den Absender

 

Neben der E-Mail, welche du selbst erhältst, ermöglicht es dir Contact Form 7, auch eine automatisch generierte E-Mail an den Absender zu schicken. Durch diese Möglichkeit, kannst du einen noch besseren Support deinem Seitenbesucher garantieren. 

Aktiviere hierzu die Schaltfläche Verwende E-Mail 2. 

 

Noch keine Kommentare

Schreibe einen Kommentar