WordPress Tutorial – Formulare/Kontaktformulare mit WPForms

Du möchtest auf deiner WordPress Website ein Formular anbieten? Sei es ein WordPress Kontaktformular oder eines mit einem anderen Zweck? Dafür gibt es verschiedene Plugins. Ein empfehlenswertes Plugin ist „WPForms“, denn damit kommst du auch in der kostenlosen Version sehr weit

In diesem WordPress Tutorial  möchte ich dir zeigen, wie du mit „WPForms“ einfache Formulare erstellst. Wie werden Felder eingefügt, welche Feldarten gibt es und wie sorgt man dafür, das die abgesendeten Informationen bei dir ankommen? Und was ist überhaupt mit dem Spamschutz? Diese Fragen werde ich beantworten. Du hast Fragen oder brauchst Hilfe? Dann schreibe mir doch!

Installation von „WPForms“

Die Installation des Plugins läuft so einfach ab, wie bei vielen Plugins für WordPress. Du gehst in den Bereich Plugins>Plugin hinzufügen und gibst unter „Plugins suchen“ den Namen des Plugins ein. Wenn du es gefunden hast, klickst du auf „Jetzt installieren“ und anschließend auf „Aktivieren“

Erstellung eines WordPress Kontaktformulars

Auf der linken Seite in deinem Administrationsmenü wirst du sogleich einen neuen Unterbereich „WPForms“ bemerken. Du klickst zum Erstellen eines neuen Formulars auf den entsprechenden Menüpunkt „Add new Form“.

Du gelangst in einen Entwicklungsbereich, genannt „Form Builder“. Hier erstellst du dein Formular und kannst zu Beginn einen Namen für dein Formular angeben und entscheiden, ob du ein komplett neues Formular aufbauen willst oder mit einem Template starten möchtest. Mit dem „X“ oben rechts verlässt du den Builder wieder.

Wir wählen für dieses Tutorial „Blank Form“, also ein leeres Formular, damit wir die Möglichkeiten kennenlernen können. Auf der linken Seite werden uns nun mögliche Felder gezeigt. Die „Standard Fields“ sind die Felder, die wir in der kostenlosen Variante verwenden können. Die „Fancy Fields“ bleiben den Premium-Benutzern vorbehalten. Aber auch in der kostenlosen Variante ist schon sehr viel möglich.

Ich möchte dir gerne kurz die verfügbaren Felder erklären:

Single Line: Dies ist ein einzeiliges Textfeld, wie man es aus vielen Formularen kennt.

Paragraph Text: Passend dazu gibt es natürlich noch das mehrzeilige Textfeld, für größere Angaben, wie zum Besipiel einem ausformulieren Anliegen.

Dropdown: Das Auswahl bietet die Möglichkeit aus verschiedenen Auswahlmöglichkeiten die passende auszuwählen.

Multiple Choice: Die runden Auswahlfelder, bieten ebenfalls die Möglichkeit aus verschiedenen Auswahlmöglichkeiten zu wählen, zeigen diese aber gleichzeitig an.

Checkboxes: Hier hast du die Möglichkeit nicht nur eine Auswahl zu tätigen, sondern beliebig viele der Möglichkeiten anzukreuzen.

Numbers: Dies ist eine Sonderform des einzeiligen Textfeldes, in dem nur Zahlen erlaubt sind. (Beispielsweise für ein PLZ-Feld)

Name: Auch dies ist ein besonderes einzeiliges Textfeld, bei dem auch Vor- und Nachname zusammen abgefagt werden können.

Email: Änliches gilt für dieses Feld, das speziell zur Abfrage der Email-Adresse genutzt wird.

Number Slider: Hier handelt es sich um eine spezielle Möglichkeiteinen numerischen Wert abzufragen, in der Form eines Sliders.

Captcha: Für die SPAM Vermeidung gibt es Captcha Funktionen

Wir erstellen jetzt ein etwas umfangreicheres Kontaktformular mit den folgenden Elementen (In Klammern schreibe ich die Feldart dazu, die sich eignet):

• Anrede: (Multiple Choice)
• Vorname (Single Line Text)
• Nachname (Single Line Text)
• Email-Adresse (Email)
• Telefonnummer (Number)
• Adresse (Paragraph Text)
• Land (Dropdown)
• Interessen (Checkboxes)
• Anliegen (Paragraph Text)

Das Ergebnis sieht etwa so aus.

Der nächste Schritt wäre die Beschriftung der Felder anzupassen. Das machst du, indem du ein Feld anklickst und den Wert „Label“ auf der linken Seite in den Eigenschaften des Feldes änderst. Darunter findes du entsprechend andere Einstellungsmöglichkeiten, wie Auf Auswahlmöglichkeiten eines Mupltiple Choice Feldes. Wir ändern ersteinmal die Feldnamen.

Als nächstes müssen noch die Feldeigenschaften geändert werden, wir beginnen mit dem Multiple Choice Feld. Dort sind natürlich die drei Auswahlmöglichkeiten wichtig. Um eine Auswahlmöglichkeit zu entfernen klickst du einfach auf das kleine Plus oder Minus. Für die dritte Anredemöglichkeit nutzen wir einfach die Option „Add Other Choice“ und geben dem Formularbenutzer so die Möglichkeit eine egene Anrede einzugeben, wenn die zwei ersten Möglichkeiten nicht zutreffend sind. Wenn diese Möglichkeit ausgewählt wird, erscheint darunter ein Textfeld, um eine eigene Angabe machen zu können. Dieses Textfeld stellen wir noch auf eine kleine Größe (Field Size: Small)

Wenn du dich fragst, warum ich nicht das Feld „Name“ verwende und dafür zwei Textfelder „Vorname“ und „Nachname“ gewählt habe, so gibt es eine praktische Erklärung dafür. Wenn du dich bei dem Feld „Name“ für die Form „Vor- und Nahname“ entscheidest, gibt es keine direkte Möglichkeit, die Sublabels, also die Beschriftung der einzelnen Textfelder für Vor- und Nachnamen zu ändern. Diese werden im Standard immer „First“ und „Last“ benannt. Und das zu ändern, müsstest du in deinem ganzen Formular die Labels ausblenden und die Feldnamen über den Platzhaltertext innerhalb des Feldes setzen. Um diese eine Unflexibilität zu umgehen, kannst du den Namen einfach durch simple Textfelder abfragen.

Anhand der Einstellungsmöglichkeiten des Feldes „Vorname“ zeige ich dir welche Eigenschaften zu verändern kannst, viele davon wirst du bei anderen Feldarten wiedersehen.

Unter „General“ kannst du, wie du bereits weist den Feldnamen ändern. Zudem kannst du eine Beschreibung eingeben, die unter dem Feld angezeigt wird. „Required“ mach das Feld zum Pflichtfeld – Es muss also ausgefüllt werden, damit das Formular abgeschickt werden kann. Im Formular erkennt man dies an dem roten Sternchen nach dem Feldnamen.

Unter „Advanced“ kannst du weitere Einstellung vegeben. Hier sind die wichtigsten:

Field Size:
Hier kannst du dir Größe des Feldes angeben.

Placeholder Text:
Im unausgefüllten Feld kannst du einen Text anzeigen lassen. Dies kannst du als alternative Beschriftung nutzen, wenn du zusätzlich dazu „Hide Label“ weiter unten auswählst.

Limit Length:
Du kannst die maximale Menge an Zeichen, die hier eingegeben werden können begrenzen.

Default Value:
Gebe hier einen Text ein, der als Voreintrag angezeigt werden soll un vom Benutzer ggf. überschrieben werden kann.

Show/Hide Layouts:
Hier kannst du eine Auswahl treffen, wenn du mehrere Felder nebeneinander anzeigen lassen möchtest. Genau das haben wir für den Vor- und Nachnamen vor. Daher wählen wir hier das erste Layout aus, also zweispaltig und wählen im Anschluss die linke Zeile aus, da der Vorname auf der linken Seite angezeigt werden soll.

Hide Label:
Aktivierst du diese Option, verschwindet der Feldname über dem Feld.

Read-Only:
Diese Option bewirkt, das der Inhalt des Feldes im Formular nicht verändert werden kann.

Um unser Ziel den Vor- und Nachnamen in einer Zeile anzeigen zu lassen zu erreichen, muss das Layout für den Nachnamen auch noch angepasst werden. Auch hier wird „zweispaltig“ gewählt, aber dann die rechte Spalte angeklickt.

Anschauen können wir uns unseren Erfolg nur in der „Preview“, da die mehrspaltige Anzeige von Formularfeldern nicht im Editor angezeigt wird. Dafür müssen wir die Änderungen zuerst speichern und dann auf „Preview“ klicken.

So sieht unser Kontaktformular zurzeit aus:

Nun sollen auch die übrigen Felder eingestellt werden. Das Feld der E-Mail Adresse bietet noch einmal ein paar besondere Einstellungsmöglichkeiten, zumindest unter „Advanced„. Die wichtigsten erkläre ich jetzt.

Unter „Allowlist/Denylist“ hast du die Möglichkeit Listen von E-Mail Adressen (Mit Komma getrennt) zu hinterlegen. Hierbei ist eine Allowlist die Liste mit E-Mail-Adressen, die eingegeben werden dürfen und die Disallowlist die Liste mit Adressen, die nicht eingegeben werden dürfen.

„Disable Suggestions“ deaktiviert die Hinweise die bei Eingabe einer E-Mail Adresse mit falschem Format oder als Vorschlag bei einer ungewöhnlichen E-Mail Adresse angegeben werden.

Für das Feld „Telefon“ fügen wir nur noch einen entsprechenden Hinweis hinzu, das nur Zahlen eingegeben werden dürfen.

Das Feld Adresse und Anliegen hat keine Einstellungsmöglichkeiten, die wir noch nicht bei anderen Feldern besprochen hätten. Ggf. könnten wir noch eine „Description“ hinzufügen.

Das Feld „Land“ wünscht sich noch Auswahlmöglichkeiten, diese fügen wir jetzt hinzu. Das läuft nahezu analog zu der „Anrede„.

Auch die „Interessen“ werden auf eine sehr ähnliche Weise hinzugefügt. Alternativ können auch Bilder (User Image Choices) oder Icons (Use Icon Choices) zur Auswahl hinzugefügt werden.

Danach ist unser Kontaktformular soweit fertig. So sieht es nun aus:

Etwas, das gleich auffällt ist die Beschriftung des Buttons. Diese uns noch einige andere Einstellungen sollten noch geändert werden. Wir schauen uns also jetzt die „Einstellungen“ an.

Einstellungen

Wähle auf der linken Seite „Einstellungen“. In der kostenlosen Version haben wir 5 Bereiche zur Verfügung, in denen wir uns umschauen können:

•  Allgemein
• Spamschutz und Sicherheit
• Bestätigungen
• Benachrichtigungen
• Themes

Wir starten mit „Allgemein„.

Folgende Einstellungsmöglichkeiten sind für dich und dein Kontaktformular wichtig:

Formularname: Hier änderst du den Namen deines Formulars

Formularbeschreibung: Die angezeigte Beschreibung zu deinem Formular kannst du hier anpassen.

Text für Absende-Button: Natürlich möchtest du deinen Absende-Button personalisieren. Wähle hier deinen Wunschtext.

Text für Absenden-Button während der Verarbeitung: Sobald der Button geklickt wurde erscheint dieser Text.

Nun wechseln wir auf den Unterbereich „Spamschutz und Sicherheit„.

Hier kannst du deine Einstellungen zur Vermeidung von SPAM-Nachrichten hinterlegen. Beachte hierbei auch immer die aktuellen Anforderungen seitens des Datenschutzes (DSGVO), denn manche Anti-Spammethoden sind beachten den Datenschutz aus deutscher Sicht nicht ausreichend.

Aktiviere den modernen Anti-SPAM-Schutz: Hierbei handelt es sich wahrscheinlich um den aus Datenschutzsicht besten SPAM-Schutz.

Mindestzeit bis zum Absenden aktivieren: Wenn du verhinderst, das ein Formular in den ersten Sekunden nach dem Aufrufen der Webseite abgeschickt werden kann, ist das auch bereits ein wirksamer SPAM-Schutz.

reCAPTCHA, hCaptcha, Cloudflare Turnstile und Akismet: Dies sind weitere Methoden der SPAM Vermeidung, jeweils mit unterschiedlichen Verhältnis zum Thema Datenschutz.

Im Unterbereich „Bestätigungen“ können wir dann beeinflussen, welche Bestätigung einem Benutzer nach Absenden des Formulars angezeigt wird.

Damit der Absender deines Formulars weiß, dass die Nachricht abgeschickt wurde, hast du verschiedene Möglichkeiten, um dies zu signalisieren. Dies geschieht durch das Auswahlfeld „Art der Bestätigung„:

Nachricht: An der Stelle deines Kontakt-Formulars wird eine von dir hinterlegte und formatierte Nachricht ausgegeben

Seite anzeigen: Es wird der Inhalt der Seite angezeigt, die du ausgewählt und deren Inhalt du vorher in der WordPress-Administration unter „Seiten“ eingestellt hast.

Weiterleitung: Auch hier wird nach Absenden eine andere Seite angezeigt. Diese wird aber durch eine Weiterleitung auf eine URL angesteuert, kann also auch eine externe Seite außerhalb deiner Website sein.

Im Unterbereich „Benachrichtigungen“ geht es dann darum, wie du als Administrator über neue Nachrichten informiert wirst.

Um die Formatierung und den Inhalt der E-Mail-Benachrichtigung zu verändern gibt es allerlei Felder, die ausgefüllt werden müssen/können. Über den kleinen Anhänger auf der rechten Seite der Felder kommst du übrigens in eine Auswahlmöglichkeit für dynamische Inhalte. Beispielsweise kannst du so beispielsweise die von dem Benutzer eingegebenen Werte ausgeben lassen oder die eingestellte Admin E-Mail-Adresse.

E-Mail des Empfängers: An welche E-Mail-Adresse soll die Benachrichtigung gehen?

E-Mail-Betreffzeile: Der Betreff der E-Mail.

Absendername / E-Mail-Adresse des Absenders: Dieser Name und diese E-Mail-Adresse wird als Absender angezeigt. Hinweis: Wenn die Domain der E-Mail-Adresse des Absenders nicht mit der Domain deiner Website übereinstimmt, kann es sein, das die Benachrichtigung nicht ankommt oder von deinem E-Mail-Programm als SPAM eingestuft wird. In diesem Fall wäre es von Vorteil SMTP (Andere Art intern E-Mails zu versenden) zu nutzen.

Antwort-an: An diese E-Mail-Adresse erfolgt eine Antwort, wenn du den „Antworten“-Button deines E-Mail-Programms klickst.

E-Mail-Nachricht: Dies ist nun die Nachricht selber, die dich erreicht, wenn das Formular abgeschickt wurde. Sie sollte möglichst alle abgeschickten Daten enthalten.

E-Mail-Template: Hier kannst du noch eine Erscheinungsform für deine Benachrichtigung  wählen, probiere sie ggf. einmal aus um zu entscheiden, welche am besten passt. „Zeige Templates an“ kann dir bei der Entscheidung helfen.

Im Unterbereich „Benachrichtigungen“ geht es dann darum, wie du als Administrator über neue Nachrichten informiert wirst.