Ein Kontaktforumular erstellen

Kontakt Plugin

Contact Form 7 ist eines der am häufigsten eingesetzten Kontaktformulare. Es ist ist schnell konfiguriert und bietet super Funktionen.

Gehe zu Plugins > Installieren und gib contact form 7 in das Suchfeld ein
alternativ der Downloadlink: https://de.wordpress.org/plugins/contact-form-7/

Installiere das Plugin und du Aktiviere es. Klicke danach auf Einstellungen

Alternativ findest du das Plugin unter Hauptmenü > Formulare

Contact Form 7 einrichten

Nach Aufruf des Formularmenüs findest du bereits ein vorgefertigtes Kontaktformular. Wenn du mit der Maus darauf klickst, kannst du es bearbeiten oder kopieren. Die Kopierfunktion ist praktisch wenn du mehrer Formulare zu verwalten hast. Du kopierst automatisch deine Einstellungen mit, und musst nicht jedesmal mühsam von Hand neue Texte entwerfen. Mit dem Shortcode wird dein Kontaktformular durch einfaches Copy & Paste auf einer Seite, einem Beitrag oder auch in einem Widget eingefügt. Vergiss nicht die umschließenden Klammern ebenfalls zu kopieren. Sie sind Teil des Codes.

Klicke nun auf das Kontaktformular 1 – du befindest dich jetzt im Reiter „Formular“

Contact Form 7

Ganz oben kannst du den Namen deines Formulares ändern, und darunter findest du noch einmal den Shortcode für dein Formularfeld. Im Formular stehen dir gewisse Eingabefelder zur Verfügung. Allen gemeinsam ist, das sie eine bestimmte ID zugeordnet bekommen, damit wir sie im Reiter E-Mail später nutzen können.

Klicke auf den Reiter „E-Mail“

contact form 7

Hier kannst du die Einstellungen für deine Mails treffen. Ganz unten findest du noch die Möglichkeit dem Absender eine automatische Antwort zukommen zu lassen. Du aktivierst das mit E-Mail (2)

Klicke auf den Reiter „Meldungen“

Meldungen CF7

Hier siehst du die automatischen Meldungen die nach dem Absenden an den Benutzer ausgegeben werden.

Im Reiter „Zusätzliche Einstellungen“ kannst du dein Kontaktformular mit Code bearbeiten. Das lassen wir im Anfängerkurs jedoch.

 

Ein Zusätzliches Feld im Formular anlegen

Aufgabenstellung: Nach der E-Mail Adresse wollen wir eine Telefonnummer als Pflichtangabe in unser Kontaktformular einbauen.

Klicke auf den Reiter „Formular“

Platziere deinen den Courser im Kontaktformular einer Stelle im Kontaktformular

Contact Form 7

 

Klicke 3x auf Return und danach auf Tel. Es öffnet sich dieser Generator. Da wir in diesem Übungsbeispiel eine Pflichtangabe als Vorgabe haben, müssen wir den Feld-Typ „Erforderliches Feld“ markieren. Im Feld Name vergeben wir einen Namen für das Feld. Diesen brauchen wir später im Reiter „E-Mail“. Ganz unten siehst du jetzt unseren Feldnamen, mit diesem Code wird das Feld im Reiter „Formular“ angezeigt. Klicke auf Tag einfügen.

Contact Form 7 Erweitern

 

Um es später auf der Webseite nicht nur als leeres Feld auszugeben, müssen wir unseren Formular-Tag noch bezeichnen. Wir umfassen unser Tag mit einem sogenannten Label. Das müssen wir in diesem Fall manuell machen. Uns so sieht es dann Fertig aus

<label> Deine Telefonnummer (Pflichtfeld)
[tel* Telefon] </label>

Abschließend speichere das Formular ab.

Formular Tag

 

Klicke auf den Reiter „Email“

Im oberen Bereich siehst du jetzt den neuen E-Mail Tag [Telefon]

Diesen musst du jetzt nur noch in den Nachrichtenkörper kopieren, und wenn du möchtest, dazuschreiben um was es sich handelt. Klicke auf „Speichern“.

E-Mail neu

Jetzt müssen wir das Kontaktformular noch veröffentlichen. Kopiere dir den Shortcode des Kontaktformulars.

 

Das Kontaktformular in eine Seite einfügen

Wechsle zu Seiten > Erstellen

Gib deiner Seite einen Namen und füge den kopierten Shortcode ein.

Kontakt Seite erstellen

 

Jetzt wollen wir uns das ganze in der Vorschau ansehen. Klicke dazu unter Veröffentlichen erst auf „Speichern“ und dann auf „Vorschau

Vorschau Kontaktformular

So sieht unser Kontaktformular aus. Du kannst es jetzt gerne testen und dir selbst eine Nachricht schreiben. Das funktioniert auch wenn die Seite nicht Veröffentlicht ist.

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.