Kontaktformulare erstellen mit Contact Form 7 für WordPress

Kontaktformulare, mit deren Hilfe die Besucher einer Webseite oder Blogs mit dessen Betreiber in Verbindung treten kann. WordPress bietet diese Funktion nicht von sich aus. Dafür kann man mit Hilfe eines Plugins die nötigen Funktionen hinzufügen.

Contact Form 7 ist in dieser Hinsicht das am weitesten verbreitete Plugin. Mit mehr als 5 Millionen aktiven Installationen ist es eines der Schwergewichte im WordPress-Universum. Mittlerweile ist die Entwicklung durch Takayuki Miyoshi bei der Versionsnummer 5.1.1 angekommen.

Hier ist der Link ins Plugin-Verzeichnis von WordPress: https://de.wordpress.org/plugins/contact-form-7/

In seiner Funktionalität ist Contact Form 7 schlicht und einfach gehalten. Du kannst damit Formulare entwerfen und diese in deine Seiten einbauen. Ein Besucher deiner Webseite kann das Formular ausfüllen und deine WordPress-Installation wird die Daten aus dem Formular übernehmen und dir in Form einer E-Mail-Adresse zuschicken.

Die Installation geht denkbar einfach. Über die Funktion „Plugin hinzufügen“ kann man im WordPress Verzeichnis gezielt danach suchen, es installieren und aktivieren. Bevor man das Plugin dann allerdings nutzen kann, muss man noch einige Einstellungen ändern. Und was da so alles machbar ist zeige ich in diesem Artikel.

Nachdem du das Plugin installiert und aktiviert hast, zeigt es sich in der Liste der installierten Plugin mit diesem Eintrag:

Klickst du jetzt auf die Option „Einstellungen“, dann öffnet sich ein Dialog, der es dir ermöglicht, das gerade installierte Plugin zu konfigurieren.

Zunächst siehst du hier die Liste der Kontaktformulare. Und obwohl du selber noch kein neues Kontaktformular erstellt hast, ist schon eines da. Dies ist ein vorkonfiguriertes Kontaktformular, mit sehr einfachen Einstellungen. Unter Shortcode siehst du eine längere Zeichenfolge, die von eckigen Klammern eingerahmt ist.

Wenn du diesen Shortcode kopierst und ihn in einen deiner eigenen Artikel hinkopierst, dann wird dir, wenn du diesen Artikel zur Ansicht aufrufst, dieses Kontaktformular an Stelle des Shortcodes angezeigt.

Also, dieser Shortcode:

Würde direkt, ohne mehr zu machen, dieses Kontaktformular erzeugen.

Ich will dir an dieser Stelle aber davon abraten, das vorinstallierte Kontaktformular einfach so zu verwenden. So wie es hier eingerichtet ist, bietet es keine Sicherheit vor Spammern, die das Formular verwenden könnten, um dich mit Werbung oder anderweitig zu belästigen.

Außerdem ist so ein Kontaktformular, so nützlich es auch sein mag, immer auch im Rahmen des Datenschutzes zu betrachten. Dazu kommmen wir gleich. Jetzt schauen wir uns zunächst einmal an, wie man dem Kontaktformular zusätzliche Funktion mitgeben kann.

Contact Form 7 – Formular erweitern

In den allermeisten Fällen reicht das vorkonfigurierte Standardformular für eine Kontaktaufnahme aus. In machen Fällen aber mag es nützlich sein das Formular zu erweitern. Solche Erweiterungen funktionieren sehr einfach. Im folgenden wollen wir dem Formular noch ein paar mehr oder weniger nützliche Felder hinzufügen, um das ganze zu veranschaulichen.

Dazu öffnest du die Liste deiner Kontaktformulare und wählst unterhalb des Formulars die Option „Bearbeiten“. Daraufhin öffnet sich ein Bearbeitungsfenster, in dem man die gewünschten Änderungen vornehmen kann.

Das Aussehen und die Funktionen deines Kontaktformulars werden durch einen an HTML angelehnten Pseudocode bestimmt. Das sieht jetzt auf den ersten Blick wilder aus, als es eigentlich ist. Die Definition für das Standardformular siehst du in der nächsten Abbildung.

Betrachten wir doch einen der Einträge etwas genauer:

<label> Dein Name (Pflichtfeld)
    [text* your-name] </label>

Ein Eintrag steht immer zwischen den Tags <label> und </label>.

„Dein Name (Pflichtfeld) “ ist die Beschriftung des Feldes.

Welche Art von Feld gemeint ist, steht in den eckigen Klammern. „text“ bedeutet, dass es sich um ein Textfeld handelt. Der Stern * verwandelt das Feld in ein Textfeld und your-name ist ein Platzhalter, der in dern Benachrichtigung die du erhältst eine Bedeutung hat.

Probieren wir doch mal was neues aus. Füge dazu in den Zwischenraum zwischen dem Eintrag für die E-Mail-Adresse und dem Eintrag für den Betreff folgenden Code ein:

<label> Wo wohnst du? 
        [text wohnort] </label>

Nach dem Speichern enthält dein Formular jetzt ein neues Textfeld in das dein Besucher seinen Wohnort, aber auch irgendwas anderes, eintragen kann. Oder sogar nichts, denn es ist ja kein Pflichtfeld.

Neben diesem einfachen Textfeld, bietet der Editor auch noch die Möglichkeit Felder für E-Mail-Adressen, URLs, Datum, Zahlen Telefonnummern oder auch komplexere Gebilde, wie etwa Auswahlboxen, Checkboxen oder Radio-Button, anzulegen.

Wir probieren mal eine Auswahlbox mit mehren Auswahlmöglichkeiten aus:

Erstelle zunächst ein <Label> </Label> Paar im Editor und klicke dann direkt zwischen die beiden Tags. Neben dem direkten Editieren kannst du nämlich auch über vorgefertigte Konfigurationsdialoge die Einträge erstellen. Dazu klickst du jetzt oben in dem Menü über dem Editor auf den Button „Dropdown-Menü“. Es öffnet sich ein neues Dialogfenster: Der Formular-Tag Generator.

Hier kannst du jetzt zunächst die Optionen für deine Auswahlbox einfügen: Berlin, München und Paradise City sind das in meinem Fall. Dann kannst du je nach gewünschter Optik noch auswählen, dass du ein leeres Objekt als erste Option einfügen willst. Ein Klick auf den Button „Tag einfügen“ kopiert den korrekten Code zwischen deine beiden „Label“-Tags.

Allerdings fehlt da noch die Beschriftung des Feldes, die du jetzt noch frei wählen kannst. Die kommet zwischen das erste<label> – Tag und die erste eckige Klammer “
[ „. Die neu erzeugte Zeile sieht dann so aus:

<label> Wo ist es am schönsten? Bitte wähle! [select menu-755 include_blank "Berlin" "München" "Paradise City"] </label>

Und schon hast du eine Auswahlbox in deinem Formular, die dann so aussieht:

E-Mail-Template erweitern

Falls du dein Kontaktformular jetzt schon einmal ausprobierst, wirst du feststellen, dass da was fehlt. Die E-Mail die du geschickt bekommst enthält nämlich nur die Felder des ursprünglichen Formulars. Das ändern wir aber sogleich. Klicke dazu im Editor ganz oben auf den Reiter „E-Mail“. Dadurch öffnet sich der Template-Editor für Emails. Hier siehst du, dass schon einiges an Daten, unter anderem deine E-Mail-Adresse eingetragen wurde.

Das kannst du normalerweise alles so lassen, wie es ist. Konzentriere dich stattdessen auf den Bereich „Nachrichtenkörper“.

Hier kannst du jetzt die Platzhalter-Tags, die im Formulardesigner erzeugt wurden hinzufügen. Etwa so

[your-name] wohnt in [wohnort]  
und findet es in [menu-755] am schönsten.

Und jetzt probieren wir das mal aus. Baue den Shortcode deines Formulars in eine Seite oder einen Artikel ein, speichere das ganze ab und rufe die Seite dann auf. Das sollte jetzt so aussehen:

Wenn du das jetzt ausfüllst und absendest, dann solltest du nach kurzer Zeit eine E-Mail in deinem Postfach finden, die ungefähr so aussieht, je nachdem was du reingetippt hast, natürlich.

Die Gefahr, dass ein Spammer dein Formular entdeckt ist groß. Aber wir werden dem Spam-Bot das Leben schwer machen.

Spammer abwehren

Spammer sind eine der negativen Begleiterscheinungen des Internet. Kaum hat dich so ein zumeist automatisiertes Tool ausfindig gemacht, wird es damit beginnen allen möglichen Müll in dein Formular einzutragen und dann an dich zu senden.

Es gibt aber zum Glück eine einfache Methode automatisierte Spammer abzuwehren: Wir stellen ihm eine Frage, die erst einmal beanwortet werden muss, bevor das Formular überhaupt losgeschickt wird.

Das kann eine Rechnung sein, wie 3*4=12 oder eine einfache Frage wie, welche Farbe haben Tannenbäume? Das entsprechende Tag bei Contact Form 7 heißt „Quiz“. Mit dem folgenden Code, den du in dein Formular hinein kopieren kannst, hast du schon einmal eine paar Basisrechnungen, über die sich der Spambot den Kopf zerbrechen kann. Willst du auf Nummer sicher gehen, dann kannst du auch zwei dieser Abfragen hintereinander schalten.

<label> Sicherheitsabfrage 1: Bitte berechne 
[quiz quiz-19 "3+2?|5" "7*2?|14" "8-4?|4" "10:2?|5"] 
</label>

Dabei sind die zufällig ausgewählten Fragen so aufgebaut: „3+2?|5“ Vorne die Rechnung, hinten das Ergebnis.

Genauso kannst du den Spambot nach Farben von Gegenständen fragen. Oder den Haupstädten von Ländern oder was auch immer du so fragen willst. Je einfacher desto besser, damit deine Besucher nich abgeschreckt werden, aber doch schwierig genug, dass ein automatisierter Bot keine Chance hat.

<label> Sicherheitsabfrage 2: Welche Farbe hat 
[quiz quiz-20 "ein Tannenbaum|grün" "eine blaue Rose ;-)|blau" "ein Elefant|grau" "eine Zitrone|gelb" "eine Mandarine|orange"] </label>

Du kannst jetzt die beiden Codeschnipsel oben, noch zu deinem Formular hinzufügen. Wir sind aber noch nicht ganz fertig. Bevor wir uns das fertige Formular anschauen, will ich noch ein paar Worte zum Datenschutz verlieren.

Contact Form 7 – Kontaktformulare und die DSGVO

Gleich vorne weg. Ich bin kein Rechtsanwalt und gebe dementsprechend auch keine rechtsverbindliche Auskunft. Solltest du das brauchen, dann musst du dich an einen Rechtsanwalt deines Vertrauens wenden und dort den juristischen Rat einholen. Was hier folgt ist die Meinung eines Laien.

Falls du noch gar keine DSGVO hast, empfehle ich dir das möglichst umgehend nachzuholen. Für mich war der Datenschutz-Generator der Rechtskanzlei Dr. Schwenke sehr hilfreich. Er findet sich unter dieser URL: https://datenschutz-generator.de/

Ja, dank der wohldurchdachten DSGVO müssen auch wir einfachen Webseitenbetreiber oder Blogger so einiges an technischen Klimmzügen machen und Änderungen einfügen, die vom Sinn her nicht immer nachvollziehbar sind und die sich leider selten bis nie mit dem Etikett „ästhetisch“ schmücken lassen.

Leider, denn wenn Leute auf deiner Seite ihr persönlichen Daten loswerden, quasi ihr Innerstes nach Außen kehren, dir ihre Hosengröße oder Lieblingsfarbe verraten, dann greift die DSGVO, falls es sich dabei um personenbezogenen Daten handelt, was meistens der Fall sein dürfte.

So muss man also die Benutzer des Kontaktformulars auf jeden Fall dazu zwingen vor dem Absenden der Daten ein Häkchen in eine Zustimmungsbox zu setzen, womit sie bestätigen, dass sie der Datenschutzerklärung der Webseite zustimmen.

Das geht zum Glück leicht, indem du den Code hier drunter am besten direkt oberhalb des „Senden“-Buttons in dein Formular einfügst. Du musst da natürlich noch den Link zu deiner Datenschutzerklärung korrekt einfügen. Und! Nicht vergessen! Deine Datenschutzerklärung braucht jetzt auch einen Abschnitt, der den Gebrauch von Kontaktformularen erläutert!!! …falls sie es nicht schon hat.

Mit diesem Stück Code, den du einfach in dein Formular hinein kopieren kannst, bist schon mal auf der sicheren Seite, aber lies bitte noch einmal den Satz weiter oben. Alles ohne Gewähr!

<br />
<b>Datenschutz:</b>
Bevor du dieses Formular absendest, musst du noch der <a title="Datenschutzerklärung" href="https://www.deinewebeite.de/datenschutzerklärung" target="_blank">Datenschutzerklärung</a> zustimmen!
<br />

<label> Ja!! Ich stimme zu [acceptance* datenschutz-zustimmen] </label>

Durch das hinzufügen dieser Checkbox, lässt sich das Formular jetzt nur noch abschicken, wenn die Checkbox auch angekreuzt wurde.

So, wir haben alles zusammen und deshalb bringe ich jetzt an dieser Stelle mal den gesamten, bisher erstellten Code:

<label> Dein Name (Pflichtfeld)
    [text* your-name] </label>

<label> Deine E-Mail-Adresse (Pflichtfeld)
    [email* your-email] </label>

<label> Wo wohnst du? [text wohnort] </label>

<label> Wo ist es am schönsten? Bitte wähle! [select menu-755 include_blank "Berlin" "München" "Paradise City"] </label>

<label> Betreff
    [text your-subject] </label>

<label> Deine Nachricht
    [textarea your-message] </label>

<br />
<label> Sicherheitsabfrage 1 
Bitte rechne: [quiz quiz-19 "3+2?|5" "7*2?|14" "8-4?|4" "10:2?|5"]</label>

<label> Sicherheitsabfrage 2
Welche Farbe hat [quiz quiz-20 "ein Tannenbaum|grün" "eine blaue Rose ;-)|blau" "ein Elefant|grau" "eine Zitrone|gelb" "eine Mandarine|orange"]</label>
<br />

<b>Datenschutz: Bevor du dieses Formular absendest musst du noch der <a title="Datenschutzerklärung" href="https://www.deinewebeite.de/datenschutzerklärung" target="_blank">Datenschutzerklärung</a> zustimmen!
<br />
<label> Ich stimme zu [acceptance acceptance-1] </label>


[submit "Senden"]

Wenn du alles von oben in deinen Kontaktformularentwurf hinein kopierst und das Kontakformular dann in einen Beitrag oder eine Seite einfügst, dann erhältst du dieses Monsterformular:

Fazit

Mit Contact Form 7 kannst du leicht und schnell ein Kontaktformular anlegen, das es den Besuchern deiner Webseite ermöglicht mit dir in Verbindung zu treten. Die abgesendeten Formulardaten erhältst du vom Webserver an deine E-Mail-Adresse geschickt. Durch die Verwendung eines Quiz kannst du dich vor Spam-Bots schützen. Die korrekte Anwendung der DSGVO musst du natürlich berücksichtigen.