Beschreibung: Contact Form 7 erlaubt Ihnen das einfache Erstellen von Kontaktformularen mit spezifischen Angabefeldern (z.B. E-Mail, Betreff, Auswahlfeldern, etc.)
Suche im Plugin-Verzeichnis im Backend: Contact Form 7
Download: https://de.wordpress.org/plugins/contact-form-7/
Nachdem Sie das Plugin erfolgreich installiert und aktiviert haben, können Sie mit der Formularerstellung auch schon loslegen!
Videotutorial
Schritt-für-Schritt Anleitung: Bearbeiten eines Formulars
1) Formularübersicht
Sie können mit Contact Form 7 nicht nur ein einziges, sondern mehrere Formulare für unterschiedliche Zwecke gestalten.
Klicken Sie im linken Menü auf „Formulare“, um zur Übersicht zu gelangen.
Wie Sie sehen werden, gibt es bereits ein Standard-Formular, welches viele von Ihnen so vielleicht schon übernehmen werden. Mit einem Klick auf das Formular mit dem einfachen Namen „Kontaktformular 1“ können Sie es bearbeiten.
2) Formular bearbeiten
2.1) Der Editor
Lassen Sie sich nicht von diesem „Codehaufen“ abschrecken. Es sieht erst einmal schlimmer aus als es letztlich ist.
HTML-Code kurz erklärt
Grundsätzlich können Sie in den Editor jeglichen HTML-Code eingeben. Viel werden Sie allerdings nicht benötigen, wenn Sie nicht ein ultra-komplexes Formular bauen möchten. Wie Sie unten sehen werden, kommt das Einstiegsbeispiel mit dem p- und dem br-Code aus.
Mit p-Elementen erzeugen Sie Absätze. Alles was sich also innerhalb des öffnenden (<p>) und schließenden (</p>) p-Code befindet, wird im Frontend als Absatz dargestellt.
Ein einfaches <br /> steht für einen einfachen Zeilenumbruch. Verständlicherweise gibt es hier keinen sich öffnenden und schließenden Tag, weil sich innerhalb eines Zeilenumbruchs nichts (also z.B. kein Text) befinden kann und darf.
Im bereits vorhandenen Beispiel von Contact Form 7 können Sie also erkennen, dass bereits fünf Absätze eingefügt wurden. Wie das Ganze aussieht, sehen Sie in Schritt 2.e.
Felder einfügen
Es gibt aktuell 15 verschiedene Formularfelder, die Ihnen das Plugin bereitstellt:
-
text
Ergibt im Frontend ein einfaches/einzeiliges Textfeld. -
email
Ergibt im Frontend ein einfaches/einzeiliges Textfeld. Im Gegensatz zum Textfeld erkennt ein Mechanismus, ob eine richtige E-Mail-Adresse eingegeben wurde. -
URL
Ergibt im Frontend ein einfaches/einzeiliges Textfeld. Im Gegensatz zum Textfeld erkennt ein Mechanismus, ob eine richtige URL eingegeben wurde. -
tel
Ergibt im Frontend ein einfaches/einzeiliges Textfeld. Im Gegensatz zum Textfeld erkennt ein Mechanismus, ob eine richtige Telefonnummer (bzw. eine Zahl) eingegeben wurde. -
number (dt. Zahl)
Ergibt im Frontend ein einfaches/einzeiliges Textfeld. Im Gegensatz zum Textfeld erkennt ein Mechanismus, ob eine gültige Zahl (und nicht etwa Text) eingegeben wurde. -
date (dt. Datum)
Ergibt im Frontend ein einfaches/einzeiliges Textfeld. Im Gegensatz zum Textfeld erkennt ein Mechanismus, ob ein gültiges Datum eingegeben wurde. -
textarea
Ergibt im Frontend ein mehrzeiliges Freitextfeld. -
drop-down menu
Ergibt im Frontend ein Aufklappmenü. -
checkboxes
Erzeugt im Frontend ein Feld, welches durch einen Haken aktiviert/deaktiviert werden kann. Dies kann z.B. für Ja/Nein-Antworten genutzt werden. -
radio buttons
Erzeugt im Frontend runde Auswahlfelder. Der Unterschied zu Checkboxen ist, dass Radio-Buttons gruppiert sind. Das heißt, es kann jeweils nur ein Radio-Button vom Benutzer ausgewählt werden. Bei Checkboxen hingegen kann jede Checkbox selbst ein- oder ausgeschaltet werden (Mehrfachauswahl). -
acceptance (dt. Akzeptieren)
Erzeugt im Frontend eine Checkbox. -
quiz
Erzeugt im Frontend eine Frage/Antwort Kombination. Gut im Falle gegen Spam. -
reCAPTCHA
Erzeugt im Frontend eine willkürliche und verschnörkelte Zeichenfolge (auch bekannt als Captcha-Code). Hilft oft gegen Spam. Benötigt aber das installierte und aktivierte reCAPTCHA Plugin. -
file (dt. Datei)
Erzeugt ein Feld zum Hochladen von Dateien. -
submit (dt. Absenden)
Erzeugt im Frontend einen „Absenden“-Button, der letztlich dafür sorgt, dass die Formulardaten abgeschickt werden.
Um ein neues Feld einzufügen, klicken Sie auf den entsprechenden Button. In unserem Beispiel ist das der Button für ein Textfeld.
Popup zum Einfügen eines Textfelds
-
Name
Der Name sollte nur in Kleinbuchstaben ohne Sonderzeichen (außer Bindestrich und Unterstrich) und ohne Umlaute angegeben werden. -
Standardwert
Geben Sie einen Wert ein, falls Sie das Feld schon im Voraus belegen wollen. -
Verwenden Sie diesen Text als Platzhalter
Wenn Sie keinen Standardwert, sondern nur die Möglichkeit einer Eingabe anzeigen lassen wollen, können Sie diese Checkbox auswählen. -
Akismet
Akismet ist ein Spam-Plugin von Automattic (dem Unternehmen, welches hinter WordPress steckt). Wir empfehlen den Einsatz des Plugins nicht, weil es in der EU zu Datenschutzproblemen kommen könnte. Damit wird der Haken obsolet. -
ID Attribute (Fortgeschrittene)
Falls Sie eine eindeutige ID vergeben wollen (für Fortgeschrittene, falls benötigt). Der Name sollte ebenfalls nur aus Kleinbuchstaben bestehen und keine Umlaute oder Sonderzeichen enthalten. - Class Attribut (Fortgeschrittene)Falls Sie eine CSS-Klasse vergeben möchten, können Sie die Namen durch Leerzeichen getrennt hier eingeben.
Im unteren Rand des Fensters sehen Sie, wie der so genannte Shortcode aussehen wird. Er verändert sich, je nachdem, welche Daten Sie in die oben genannten Felder eingeben:
Durch einen Klick auf den Button „Tag einfügen“ wird der Shortcode in den Editor eingefügt. Sie können ihn dann noch mit <p>-Elementen umrahmen, wenn Sie einen Absatz erzeugen möchten:
<p>[text erfahren placeholder "Wie haben Sie von uns erfahren?"]</p>So können Sie Schritt-für-Schritt Ihr eigenes Formular aufbauen. Vergessen Sie am Ende nicht, den Submit-Button zu ergänzen, sonst kann der Benutzer das Formular später nicht absenden.
2.2) E-Mail Einstellungen
Natürlich muss das Script, welches für das Absenden der Daten zuständig ist, auch wissen, wohin es beispielsweise die E-Mail verschicken soll. Dafür gibt es den Reiter E-Mail, den wir uns nun näher anschauen.
- Pflichtfeld Wie der Name schon sagt, können Sie durch Setzen des Hakens den Benutzer dazu zwingen, etwas in das Feld einzugeben. Tut er dies nicht, kann das Formular nicht verschickt werden.
- An Dieses Feld beschreibt, an welche E-Mail-Adresse die Daten geschickt werden sollen. Im Regelfall ist das Ihre eigene E-Mail-Adresse.
- Von In dieses Feld geben Sie ein, von wem die E-Mail geschickt werden soll. Sie können hier zwar jede beliebige E-Mail-Adresse eingeben, aber der Webserver wird Ihre E-Mail nicht verschicken, wenn Sie nicht von der gleichen Domain kommt. Das heißt: Sie können keine E-Mail von [email protected] verschicken, wenn Ihre Domain mein-reiseblog.de lautet. Sie sollten also eine E-Mail-Adresse wie z.B. [email protected] verwenden. Wenn Sie einen Namen angeben wollen, der beim Empfänger angezeigt werden soll, dann können Sie hier auch einen Freitext eingeben. Dann muss die „Von-E-Mail-Adresse“ in spitzen Klammern stehen. Zum Beispiel so: WP-Kurs <[email protected]>
- Betreff Geben Sie ein, welche Betreffzeile die E-Mail erhalten soll.
- Zusätzliche Header (Fortgeschrittene) Sie können zusätzliche so genannte Kopfzeilen angeben, die mit der E-Mail verarbeitet werden sollen. Das kann zum Beispiel ein CC-Feld sein. Welche Header-Felder im einzelnen möglich sind, können Sie bei Wikipedia nachlesen.
- Message Body Dies ist das Nachrichtenfeld. Hier können Sie angeben, wie der Text in der E-Mail aussehen und welche Daten sie enthalten soll. Sie können hier einen Freitext, aber auch die Daten des Formulars übergeben. Dazu benötigen Sie Platzhalter (siehe unten).
- Dateianhänge Wenn Sie im Editor ein Datei-Feld hinzugefügt haben, müssen Sie hier den entsprechenden Platzhalter eingeben (siehe unten).
- E-Mail (2) Contact Form 7 erlaubt es Ihnen, zwei E-Mails zu verschicken. Sie haben dann die gleichen Optionen wie in E-Mail 1. Dies ist dann praktisch, wenn Sie dem Benutzer ebenfalls eine E-Mail zuschicken möchten.
Arbeiten mit Platzhaltern
In (fast) allen Feldern von Contact Form 7 können Sie Platzhalter
eingeben. Die Platzhalter werden während des Verarbeitens des Formulars
mit dem Inhalt der Benutzereingabe gefüllt. Wie der Platzhalter
aussieht, hängt davon ab, welchen Namen Sie einem Feld geben. Sehen Sie
sich dazu einfach das vorinstallierte Beispiel an. Im Editor befindet
sich ein Textfeld, welches so ausgezeichnet wurde: [text* your-name]. Der Name, der hier vergeben wurde, ist „your-name“. Diese Bezeichnung können Sie mit vorangestellten, eckigen Klammern direkt als Platzhalter nutzen: [your-name]. Im Feld „Message Body“ können Sie dann Beispielsweise folgendes eingeben:
Die E-Mail wurde vom Benutzer mit dem Namen [your-name] verschickt.Beispielhaft wird [your-name] dann durch „Charlie“ ersetzt, wenn der Benutzer diesen Namen eingegeben hat.
2.3) Meldungen
Über den Registerreiter „Meldungen“ gibt es nicht viel zu sagen. Er enthält alle Meldungen, die sich während des Verarbeitens ergeben können und die dem Benutzer angezeigt werden. Das sind Fehler-, Hinweis- oder Erfolgsmeldungen, die Sie selbst individualisieren können.
2.4) Zusätzliche Einstellungen
Hinter dem Reiter „Zusätzliche Einstellungen“ finden Sie lediglich ein großes Textfeld. Hier erlaubt es der Hersteller des Plugins, diverse Einstellungen zu verändern. In der Regel benötigen Sie dieses Feld nur, wenn Sie komplexe Formulare erstellen möchten. Darauf wollen wir aber in unserem Grundkurs nicht näher eingehen.
Welche Optionen möglich sind, können Sie auf der Herstellerseite nachlesen. Leider nur in englischer Sprache.
Formular auf einer Seite einbinden
1) Shortcode kopieren
Klicken Sie im linken Menü auf „Formulare“ > „Kontaktformulare“.
Sie sehen dann eine Übersicht über Ihre bereits erstellten Formulare. In der Spalte „Kurzcode“ finden Sie den so genannten Shortcode, den Sie kopieren müssen. Wählen Sie dazu den Text aus und klicken Sie mit der rechten Maustaste. Wählen Sie dann „Kopieren“.
Erstellen Sie dann eine neue (oder öffnen Sie eine bereits bestehende) Seite, in der Sie das Formular einfügen möchten. Wie Sie eine Seite erstellen, haben Sie im Kapitel So erstellen Sie eine Seite gelernt.
Klicken Sie mit der rechten Maustaste in den Editor und wählen Sie aus dem Dialogfeld „Einfügen“ aus. Der Shortcode wird eingefügt und es sollte ungefähr so aussehen:
Klicken Sie auf „Vorschau“ oder „Vorschau der Änderungen“, um den Inhalt im Frontend anzusehen. Je nach Theme kann die Ansicht variieren. Beim aktivierten Standardtheme (TwentySixteen) sieht es so aus:
