Eine Umfrageseite selbst bauen in WordPress

Susan hat sich eine Umfrage ausgedacht, um herauszufinden, wo die speziellen Interessen unserer Leser liegen, wie sie unsere Website nutzen und ob und wie sie über Neuigkeiten informiert werden wollen. Mein Job war es, diese Umfrage technisch so umzusetzen, dass die Umfrage DSGVO konform ist und keine Daten irgendwohin liefert. Ziemlich schnell wurde mir klar, dass damit die Fragestellung lautete: «Wie kann ich eine Umfrageseite in WordPress selbst bauen?».

Es gibt zwar WordPress Plugins mit einfach zu erstellenden Formularen wie beispielsweise Crowdsignal, Monsterinsights, WPForms oder weformspro, aber diese sammeln Benutzerdaten und speichern sie meistens irgendwo im Ausland. Um Google Formulare DSGVO konform nutzen zu können, braucht man den Business-Account und muss einen Vertrag zur Auftragsverarbeitung unterschreiben.

Nachfolgend findet ihr eine Anleitung, wie ihr euch eine funktionierende Umfrageseite selbst in WordPress bauen könnt. Mit Hilfe des Webinspektors und einigem Nachdenken habe ich eine einfach umzusetzende Lösung gefunden.

Tipp: Bevor ihr die Umfrageseite in WordPress baut, überlegt euch noch, wo ihr die Umfrage prominent auf der Website platziert. Da viele unserer Besucher über die Suchmaschinen auf Unterseiten unseres Blogs landen, war die prominente Platzierung auf der Homepage nicht so von Erfolg gekrönt.

Anleitung – Eine Umfrageseite in WordPress selbst bauen

Elemente einer Umfrage

Wollt ihr eine Umfrageseite in WordPress selbst bauen, müsst ihr als erstes herausfinden, aus welchen Elementen sich die Umfrage zusammensetzt. Susan’s Umfrage besteht aus verschiedenen Elementen. Als Elemente identifiziere ich:

  • nur Freitext-Element,
  • Single-Choice-Frage,
  • Single-Choice-Frage mit einem Freitext-Element,
  • Multi-Choice-Frage,
  • Multi-Choice-Frage mit einem Freitext-Element

Die Umfrage braucht eine Basis

Als nächstes müsst ihr euch überlegen, wie die Ergebnisse einer ausgefüllten Umfrage zu euch kommen. Die einfachste Lösung ist es, die Antworten per E-Mail zu bekommen. Hat eure Webseite schon ein Kontaktformular, könnt ihr dieses als Basis nutzen.

Das Kontaktformular enthält im PHP-Code bereits die Funktion, dass die Eingabe aus der Website heraus an eine definierte E-Mail-Adresse gesendet wird. Da wir eine anonyme Umfrage machen, muss lediglich der Code für die Kontaktformular Felder daraus entfernen werden. Weiterhin muss ich die Prüffunktionen entfernen, die sicherstellen, dass alle Eingaben gemacht wurden. Damit ist die Basis geschaffen, um unsere Umfrageseite in WordPress selbst bauen zu können

Meine Umfragebasis sieht dann so aus.

Die Antwort-Funktion

Weiterhin lasse ich die Prüfung, ob der Senden-Button geklickt wurde, bestehen. Damit verhindere ich, dass Robots diese Umfrage absenden können.

Die Rückmeldetexte werden gesetzt
Durch diesen Code werden der Wert für die Robot Prüfung und die Ziel-E-Mail Adresse gesetzt

Die eigentlich Mail-Check- und Sendefunktion liegt im PHP-Code noch vor dem Bereich mit den Fragen.

Die Funktion zum Senden der E-Mail mit vorangehender Prüfung

Die Seitengestaltung braucht einen Rahmen

Im Kontaktformular waren bereits die Standardeinstellungen vom Theme, wie header oder die Seitenstruktur in unserem Fall mit einem Sidebar vorhanden.

Rahmencode für die Seitengestaltung enthält die Elemente des Themes

Ebenfalls vorhanden sind die Formatierungsangaben wie der Benutzer nach Absenden der Mail seine Antwort erhält.

Das Styling für die Rückmeldung an den Benutzer über das Versenden der E-Mail

Daran anschliessend, eröffne ich nun den Rahmen für die zu beantwortenden Elemente.

Der Rahmen für den Fragebereich

Hier schliessen sich die Frage-Elemente an. Bevor ich den Rahmen beende, setze ich noch die Variable für den «human-check» mit dem Wert (2), der bleibt, falls keine «menschliche» Eingabe den Sendebefehl gibt. Das Anklicken des «Senden» Buttons setzt dann den «submitted» Wert auf 1.

Der Senden Button und die Variable für die Robot Prüfung werden gesetzt

Als Letztes muss noch der darstellende Seitenbereich beendet werden. Damit hat unsere Umfrage nun einen Rahmen.

Schliessen des Seitenrahmens

Die Struktur der E-Mail definieren

Wenn ihr eine Umfrageseite in WordPress selbst baut, müsst ihr sie ja auch selbst auswerten. Für jede Frage definiere ich dafür zu Beginn, also vor der Mail-Check- und Sende-Funktion, die Variablen. Diese nehmen die Antwort vom entsprechenden input-Element auf, zum Beispiel von «q1_1». Das sieht dann beispielsweise so aus.

Antwort Variablen für multi radio button mit Freitextfeld - Umfrageseite selbst bauen in WordPress
Antwort Variablen für multi checkbox mit Freitextfeld - Umfrageseite selbst bauen in WordPress
Antwort Variable für reine Freitextantwort - Umfrageseite selbst bauen in WordPress
Antwort Variable für reine multi radio button Frage - Umfrageseite selbst bauen in WordPress
Antwort Variablen für reine Multi-checkbox-Frage - Umfrageseite selbst bauen in WordPress

Dann füge ich die Antwort-Strings in der Reihenfolge der Fragen zu einem String in der Variable $message zusammen. Dabei trenne ich sie mit einem ausgewählten Trennzeichen, welches mir den einfachen Import in eine Excel-Datei erlaubt. In unserem Fall habe ich den Backslash ¨/¨ gewählt und ein vor- und ein nachgestelltes Leerzeichen benutzt. Im PHP code sieht das dann so aus.

Zusammenfügen der einzelnen Antwort Variablen zum Antwort String für die E-Mail - Umfrageseite selbst bauen in WordPress

Generelle Struktur des Frageblocks

Bevor ich nun die einzelnen Frageelemente baue, unterteile ich den darzustellenden Frageblock durch <div> Blöcke je Frage. Eine Frage besteht dann wieder aus je einem <div> Block für die Frage und einem für den Antwortbereich. Alle Fragetypen, ausgenommen die Freitextantwort, stellen die möglichen Antworten in einer HTML Tabelle dar, eingerahmt durch den <table> und <tbody> tag. Jede Antwort ist in einer Tabellenzeile <tr> angeordnet mit einer Zelle <td> für Radio Button oder Checkbox und einer Zelle für den Text.

Der Name des Input-Elements wird im <input> tag durch die Anweisung « name=¨q1_1¨ » definiert, wobei ¨q1_1¨ ein Beispiel ist.

Definition eines input Elements mit Namen q1_1 - Umfrageseite selbst bauen in WordPress

Frage mit einfacher Textantwort

Die einfachste Frageform für eine Umfrage ist die mit einem Freitextfeld, in dem der Benutzer frei antworten kann.

Code für eine Frage mit reiner Freitexteingabe - Umfrageseite selbst bauen in WordPress

Auf der Seite stellt sich das dann so dar:

Darstellung der Frage mit reiner Freitexteingabe auf der Website

Single Choice Frage – der Radion Button

Der HTML-Code, der eine Tabelle für eins aus mehreren möglichen Antworten generiert, benutzt Radio Buttons als Element. Diese haben genau die Eigenschaft, dass nur eine Antwort ausgewählt werden kann.

Code für eine Frage mit single choice Antwort. Dieser benutzt Radio Buttons - Umfrageseite selbst bauen in WordPress

Auf der Webseite sieht es so aus:

Frage mit Single Choice Antwort unter Verwendung von radio buttons, wie sie auf der Website aussieht

Da nur eine Wahl möglich ist, liefert der Code genau einen Text in der Variablen q5_1. Er enthält einfach eine laufende Nummer entsprechend der gewählten Antwort, also 1., 2. oder 3. Diese sind im Code in der Zeile des <input> tag definiert, beispielsweise über den Eintrag « value=¨3¨ ».

Single Choice Frage – kombiniert mit Freitext Antwort

Manchmal möchtest du dem Benutzer zusätzlich zu den vorgegebenen Antworten die Möglichkeit einer eigenen Antwort geben, wenn du eine Umfrage selbst baust. Dies ist meist die «Sonstige» Option. Dazu fügst du der Tabelle mit Radio Buttons eine Zeile hinzu, in der die Antwortzelle ein Freitextfeld enthält. Der Code für diese Zelle ist im folgenden Beispiel rot umrandet.

Code für eine Frage mit Single Choice Antwort und in einem Fall der Option, Freitext einzugeben - Umfrageseite selbst bauen in WordPress

Auf der Webseite sieht diese dann Frage so aus:

Single Choice Frage mit Freitext Option wie sie auf der Website dargestellt wird

Multi-Choice-Fragen – check boxes kombiniert mit Freitext Antwort

Der HTML-Code, der eine Tabelle für mehrere mögliche Antworten generiert, benutzt check boxes als Element. Diese haben genau die Eigenschaft, dass mehrere von ihnen ausgewählt werden können. Der Einfachheit halber stelle ich hier gleich die Variante mit einer Freitext Option vor. Der Freitext Code ist immer der gleiche, egal ob du ihn mit einer single-choice- oder einer multi-choice-Frage kombinierst. Im Bild ist er durch den roten Rahmen markiert.

Code für eine Multiple Choice Frage mit Freitext Option - Umfrageseite selbst bauen in WordPress

Diese Frage sieht dann in der Realität so aus:

multiple-choice Frage mit Freitext Option auf der Website

Auswertung der Umfrage mit Excel

Habt ihr nun eine Umfrageseite selbst in WordPress gebaut, ist der wesentliche Teil der Arbeit erledigt. Zuletzt gehört eine eigene Auswertung dazu.

Die Mail, welche eine ausgefüllte Umfrageseite erzeugt, enthält genau eine Textzeile. In dieser sind alle Antworten aneinandergereiht und durch das definierte Trennzeichen separiert. Ein typischer Mailtext aus unserer Umfrageseite sieht dann so aus:

1 /  /  /  / 1 /  /  /  /  / 1 / Ich suche Reiseziele / 1 /  / Seidenstrasse / 2 / Nein, gut so / 3 /  /  / 1 /  /  /  /  /  /  / 1 /  /  /

Jedes ¨/¨ ist ein Feldtrennzeichen. «Leere» Felder entsprechen nicht markierten Radiobuttons oder Checkboxen. Wenn man beim Einlesen in eine Excel-Tabelle das ¨/¨ als Feldtrennzeichen definiert, werden alle Feldinhalte einer Antwortmail in aufeinanderfolgende Zellen derselben Zeile geschrieben. Auf diese Weise entsteht dann eine Tabelle in deren Spalten die Antworten auf die einzelnen Fragen und deren Antwortoptionen stehen. Diese kann dann einfach ausgewertet werden.

Dir hat der Beitrag gefallen? Dann würden wir uns freuen, wenn Du ihn teilst.

Wir freuen uns über Kommentare, Anregungen und Diskussionen zu unseren Beiträgen

Wenn euch die Seite gefällt oder ihr Ergänzungen, Aktualisierungen oder sonstige Hinweise habt, helft uns, die Seite aktuell zu halten.