survey-1594962_640Anonyme Umfragen sind eine gute Methode, um Meinungen von potenziellen und bestehenden Kunden zu erhalten. So eine Umfrage lässt sich relativ leicht mit dem beliebten Plugin »Contact Form 7« einrichten.

Warum Contact Form 7?

Du wirst dich nun fragen, warum nimmt man nicht einfach eines der vielen Umfrage-Plugins, die es für WordPress ja inzwischen reichlich gibt?

Die Antwort ist recht einfach und pragmatisch: Wenn du sowieso schon Contact Form 7 für ein Kontaktformular auf deiner Seite nutzt, dann brauchst du kein weiteres Plugin. Jedes zusätzliche Plugin erhöht die Gefahr, dass Sicherheitslücken deine Site angreifbar machen. Ein neues Plugin für Umfragen muss auch erst mal gefunden werden, was liegt also näher, als ein schon vorhandenes und robustes Tool für diesen Zweck zu verwenden.

Die Umfragen werden direkt per E-Mail an dich versandt, so dass du also direkt erfährst, wenn jemand seine Meinung kundgetan hat. Willst du jedoch die Antworten später in einer Tabelle auswerten, dann musst du allerdings doch noch ein Plugin installieren, dass die Daten aus Contact Form 7 in eine Datenbanktabelle schreibt. Aber dazu später mehr.

Das anonyme Formular

Die Umfrage sollte möglichst anonym erfolgen, wir wollen also weder den Namen, noch die E-Mail des Besuchers abfragen. Daher erstellst du ein neues Formular und löschst erst einmal alle Felder aus der Registerkarte »Formular«. Das Feld für »Senden« kannst du allerdings übrig lassen, denn den Senden-Button brauchen wir später.

Für Umfragen bieten sich folgende drei Feldtypen an:

1) Radio Buttons

Damit lassen sich Optionen auflisten, von denen der Besucher genau eine auswählen kann. Also beispielsweise:

Wie bewerten Sie unserem Service?

Mit den Optionen: Sehr gut, gut, ganz okay, bescheiden und katastrophal.

2) Checkboxen

Damit lassen sich Kästchen darstellen, die der Besucher ein- und ausschalten kann. Sind hier mehrere Optionen vorhanden, können auch mehrere dieser Kästchen ausgewählt werden.

Beispiel: Würden Sie uns weiterempfehlen oder noch einmal bei uns kaufen?

Optionen: Ich würde Sie empfehlen, Ich würde wieder kaufen

3) Dropdown-Liste

Damit lässt sich ein Menü erstellen, das beim Anklicken aufklappt und mit dem sich eine Option auswählen lässt.

Beispiel: Wie können wir unseren Service verbessern?

Optionen: »Schnellere Lieferung« »Niedrigere Preise« »Mehr Sonderaktionen«

Das Einfügen der Felder.

Contact Form 7 ist nicht dafür bekannt, dass es eine hübsche Drag-and-Drop Umgebung bietet. Für mich als Programmierer ist es jedoch ideal, weil sich alle Felder bequem als Textelemente darstellen lassen. Damit ist es viel schneller möglich, ein Formular zu erstellen, als wenn man für jedes Feld erst eine ganze Serie von grafischen Elementen bedienen muss. Aber das ist natürlich immer auch eine Frage des persönlichen Geschmacks.

Dennoch bietet das Plugin auch eine ganz brauchbare Unterstützung, wenn man lieber mit Dialogen arbeitet. Zum Einfügen eines Radio-Buttons, klickst du einfach auf den Button »radio buttons« im oberern Bereich des Formular-Tabs.

Es erscheint ein Dialog, mit dem die folgenden Felder ausgefüllt werden können:

 

Radio-Button Einfügen
Radio-Button Einfügen

Name: Das ist der Name des Feldes. Vergib hier einen sinnvollen Namen, du brauchst ihn später noch einmal, um den Text der E-Mail zusammenzubauen.

Optionen: Hier trägst du die gewünschten Optionen ein, die der Besucher auswählen kann. Verwende jeweils eine Option pro Zeile.

Die erste Checkbox aktivieren: Das ist offensichtlich ein Übersetzungsfehler. In der englischen Version heißt es »Put a label first, a checkbox last« und soll die Reihenfolge von Radio-Button und dem zugehörigen Text vertauschen. Normalerweise steht der kleine Kreis vorne, der Text dahinter.

Mit einem Label-Tag umschließen: Das solltest du immer aktivieren, denn damit wird eine Verbindung zwischen dem eigentlichen Radio-Button Element und dem Text erstellt. Nur so kann der Besucher später auf den Text klicken und muss dann nicht exakt den kleinen Kreis treffen, um die Option auszuwählen.

Die Felder »ID Attribute« und »Class Attribute« kannst du leer lassen, sofern du nicht vorhast, die Felder mit speziellen CSS-Regeln besonders zu formatieren.

Die Option »default:1«, die bei Radio-Buttons automatisch eingefügt wird, kannst du manuell löschen. So vermeidest du, dass die erste Option automatisch angewählt ist.

Bei der Checkbox gibt es ähnliche Felder:

Checkbox Einfügen
Checkbox Einfügen

Feld-Typ: Hier kannst du angeben, ob die Checkbox ein Pflichtfeld sein soll.

Name und Optionen und die beiden nächsten Checkboxen: Diese verhalten sich wie bei den Radio-Buttons.

Kontrollkästchen ist exklusiv: Damit kannst du festlegen, dass nur eine Checkbox gleichzeitig aktiv sein kann. Damit verhält sich dann eine Gruppe von Optionen genauso wie eine Gruppe Radio-Buttons. Ich finde diese Option nicht wirklich sinnvoll und für den Besucher dürfte sie auch eher verwirrend sein.

Das Dropdown Menu hat zunächst die gleichen Felder wie die Checkbox.

Dropdown-Menu Einfügen
Dropdown-Menu Einfügen

Feld-Typ, Name und Optionen verhalten sich hier praktisch identisch.

Mehrfachauswahl erlaubt: Damit ist es möglich, mehr als eine Option aus der Liste zu wählen. Allerdings ist es dann keine Dropdown-Liste mehr, weil alle Optionen direkt angezeigt werden. Der Besucher kann dann auf eine Option klicken, um sie auszuwählen. Weitere Optionen können dann bei gedrückter Strg-Taste hinzugefügt werden.

Fügen Sie ein leeres Element als erste Option ein: Damit wird sichergestellt, dass auch »nichts« ausgewählt werden kann, wenn es sich um eine echte Dropdown-Liste handelt. Es ist daher nicht unbedingt sinnvoll, beide Möglichkeiten gleichzeitig zu nutzen.

Und so könnte dann dein Umfrage-Formular aussehen:

Wie bewerten Sie unseren Serivce?
[radio radio-bewertung use_label_element "Sehr gut" "Gut" "ganz okay" "bescheiden" "katastrophal"]

Würden Sie uns weiterempfehlen oder noch einmal bei uns kaufen?
[checkbox checkbox-empfehlung use_label_element exclusive "Ich würde Sie empfehlen" "Ich würde wieder kaufen"]

Wie können wir unseren Service verbessern?
[select menu-verbesserung multiple "Schnellere Lieferung" "Niedrigere Preise" "Mehr Sonderaktionen"]

[submit "Senden"]

Screenshot fertiges Formular
Screenshot fertiges Formular

Nun musst du allerdings noch in der Registerkarte »E-Mail« die neuen Felder eintragen und einige Anpassungen machen.

Im Feld »Von« hast du ja nun keinen Besuchernamen verfügbar, lösche also den Platzhalter [your-name]. Ebenso löschst du den Platzhalter [your-subject] bei »Betreff«.

Das Feld »Zusätzliche Header« kannst du komplett leer lassen.

In »Message Body« löschst du auch erst einmal alles. Danach fügst du die neuen Felder beispielsweise so ein:

Bewertung: [radio-bewertung]

Empfehlung: [checkbox-empfehlung]

Verbesserungsvorschläge: [menu-verbesserung]
Screenshot Email-Tab
Screenshot Email-Tab

Wenn du nun das Formular speicherst, und den Shortcode dieses Formular in eine deiner Seiten einfügst, kannst du die Umfrage bereits verwenden.

Aber, wie bekomme ich die Daten jetzt nach Excel?

Anfangs hatte ich ja angekündigt, dass die Daten auch in der Datenbank gespeichert werden können. Dazu gibt es ein kleines, kostenloses Plugin: »Contact Form DB«.

Damit es mit dem Umfrageformular funktioniert, musst du es installiert haben, bevor die ersten Umfrageformulare ausgefüllt wurden. Erst nach der Aktivierung, werden die Daten aus Contact Form 7 in der Datenbank gespeichert.

Du musst nichts weiter einstellen. Das Plugin erkennt automatisch, dass du Contact Form 7 verwendest. Versuche es einfach einmal. Fülle das Umfrageformular aus und sende es ab. Du bekommst die Umfragewerte natürlich sofort in dein E-Mail Postfach, aber du kannst nun auch in den Bereich »Contact Form DB« gehen, und dir die Daten dort ansehen.

Gespeicherte Einträge in der Datenbank ansehen.
Gespeicherte Einträge in der Datenbank ansehen.

Solltest du die Ergebnisse in deiner Tabellenverarbeitung benötigen, exportiere die Daten einfach. Das Plugin bietet die Möglichkeit, direkt nach Excel zu exportieren. Es werden aber auch OpenOffice, CSV und Google Spreadsheet als Exportoption angeboten.

Aber das Formular ist so hässlich!

Wer jetzt mit dem Argument kommt, das Umfrageformular könnte etwas ansprechender aussehen: Ja das stimmt. Sowohl die Radio-Buttons als auch die Checkboxen werden nebeneinander in einer Zeile dargestellt. Das ist nicht immer erwünscht, gerade wenn mehr Optionen existieren, als in die Zeile passen.

Hier kann man mit einem kleinen CSS-Trick nachhelfen:

Die Elemente für die Optionen sind bei Contact Form 7 immer in ein <span> Element eingebunden. Da span zu den inline-Elementen gehört, wird es standardmäßig auch »inline« angezeigt, also innerhalb der Zeile.

Wenn du aber in dem Formular die folgende CSS-Regel anwendest:

.wpcf7-list-item { display: block !important; }

Dann werden die Optionen als Block-Element dargestellt, erscheinen also jeweils in einer eigenen Zeile.
Die CSS-Regel kannst du entweder in die style.css deines child-themes einfügen, oder, wenn du kein child-Theme verwendest, kannst du es auch direkt im Formular vor die Formularfelder schreiben:

<style>
.wpcf7-list-item { display: block !important; }
</style>

Diese Methode ist zwar nicht so elegant, funktioniert aber einwandfrei.

Screenshot der Ansicht im Front-End
Screenshot der Ansicht im Front-End

Fazit

Nicht immer wird für ein einfaches Umfrageformular ein spezielles Plugin benötigt. Das populäre Contact Form 7 erledigt diese Aufgabe ebenfalls. Und mit ein wenig Kenntnissen in CSS, lässt sich das Formular sogar individuell formatieren.

Wie erstellt man eine anonyme Umfrage mit Contact Form 7?