Contact Form 7

text und textarea

Diese beiden Tags sind für die Eingabe von Texten gedacht; text ist hier ein Textfeld, in das ein kurzer, überschaubarer Text eingegeben wird (beispielsweise ein Name oder eine Anschrift), textarea ist für längere Texte gedacht, beispielsweise für Anmerkungungen oder eine Nachricht; für beide kann eine bestimmte Zeichenanzahl festgelegt werden, die auch nicht überschritten werden darf. Dies sollte man aber für den Benutzer auch im begleitenden Text anmerken (z. B.: “Ihre Nachricht (bis zu 500 Zeichen)”).

email

Dieses Tag erkennt das Format des eingegebenen Texts und gibt eine Fehlermeldung, wenn es sich nicht um eine E-Mail-Adresse handelt.

URL

Hier kann ein URL eingegeben werden.

tel

In diesem Feld für Telefonnummern können Ziffern, + und – eingegeben werden.

date

Hier wird ein Datum angegeben. Achtung: Es ist nur das amerikanische Datumsformat (JJJJ-MM-TT) möglich. Auch dies sollte dem Benutzer unbedingt mitgeteilt werden.

drop-down menu

Hier gibt es zwei Möglichkeiten: Wenn man die Auswahl nur eines Elements zuläßt, bekommt man tatsächlich ein Dropdown-Menü.

Läßt man die Auswahl meherer Elemente zu, so hat man eine Textbox in fester Größe, die bei mehr Inhalt einen Scrollbalken aufweist. Hier kann man dann mit Hilfe der Strg-Taste mehrere Elemente auswählen.

checkboxes

Die Checkboxen sind Kästchen, in denen man eine Auswahl abhaken kann; sie sind beispielsweise sehr beliebt bei Pizzalieferdiensten, die hier die Möglichkeiten des zusätzlichen Belags zum Abhaken anbieten. Auch hier besteht die Möglichkeit, die Auswahl auf nur ein Element aus dem Satz an Checkboxen anzubieten.

radio buttons

Dies sind nicht direkt Schaltflächen, obwohl die Bezeichnung das vermuten ließe, sondern ebenfalls Elemente, die eine Auswahl zulassen. Im Gegensatz zu den Checkboxen sind sie rund. Hier kann immer nur ein einziges Element ausgewählt werden.

acceptance

Dieses Tag erzeugt eine einzelne Checkbox, die – je nachdem, welche Parameter man ihr mitgibt – das Absenden des Formulars nur bei gesetztem oder nicht gesetztem Haken zuläßt. Dies wird oft genutzt, wenn beispielsweise AGB akzeptiert werden müssen, damit eine Bestellung gültig ist.

quiz

Mit dem Quiz kann man eine Auswahl von Fragen und Antworten zusammenstellen. Jeweils eine dieser Fragen wird dem Benutzer nach dem Zufallsprinzip gestellt, um sicherzustellen, dass tatsächlich ein Mensch das Formular ausgefüllt hat und nicht etwa ein Programm, das über diesen Weg Spam versendet. Zwischen Quiz und Absendebutton müssen mindestens zwei leere Absätze eingefügt werden, um zu vermeiden, dass das Eingabefeld den Absendebutton überlagert.

file

Wenn Sie möchten, dass eine Datei mitgeschickt werden kann (beispielsweise Bewerbungsunterlagen), können Sie das mit diesem Tag anbieten. Es ist möglich, die Dateigröße und den Dateityp Ihren Bedürfnissen gerecht einzuschränken.

submit

Dies erzeugt den Absendebutton.

Die Daten kommen zu Ihnen – die E-Mail

E-Mail Sendeverhalten konfigurieren

Sobald Ihr Formular definiert ist, müssen Sie sich noch um die E-Mail kümmern, die Ihnen als Antwort gesendet wird. Dazu wählen Sie den Reiter E-Mail aus.

Dann wird Ihnen das Formular angezeigt, mit dessen Hilfe Sie die E-Mail erstellen, die die Angaben Ihrer Besucher enthält.

Sie finden hier zunächst die Tags, die in Ihrem Formular enthalten sind. Diese können Sie später per copy & paste in das Feld mit dem Message Body eintragen.

In das To-Feld tragen Sie Ihre eigene E-Mail-Adresse ein. From, Betreff, Additional Headers lassen Sie am Besten stehen, wie sie sind.

Im Feld Message Body tragen Sie dann die Tags ein, die Sie Ihrem Formular hinzugefügt haben. Hier brauchen Sie keinerlei Formatierung vorzunehmen; es ist aber sinnvoll, entsprechende Absätze einzufügen, damit die Mail, die Sie später erhalten, übersichtlich wird.

Wenn Sie zulassen, dass Anhänge mitgeschickt werden, also das file-Tag nutzen, müssen Sie das entsprechende Tag im Feld “File Attachments” angeben.

Ganz unten finden Sie noch E-Mail (2). Damit können Sie eine zweite Mail entwerfen, die beispielsweise dem Absender als Bestätigung für das erfolgreich versandte Formular zugesandt wird. Das kann dann beispielsweise so aussehen:

Meldungen: Was den Besuchern mitgeteilt wird

Meldungen personalisieren

Sicherlich möchten Sie Ihren Besuchern vom Formular Rückmeldung geben lassen, damit sie wissen, dass sie entweder das Formular erfogreich verschickt haben oder einen Fehler gemacht haben. Im Reiter “Meldungen” sind bereits einige solcher Feedbackmeldungen vorformuliert; wenn Sie das möchten, können Sie diese Meldungen auch Ihren persönlichen Bedürfnissen anpassen.

Bitte vergessen Sie auch hier nicht das Speichern nach dem Ändern der Meldungen.

Zusätzliche Einstellungen

Hier finden Sie ein Freitextfeld vor, in dem Sie kleine (Javascript-) Codeschnipsel (Snippets) eingeben können, die zusätzlich Einfluß auf das Formular nehmen.

Die Snippets, die Sie hier einfügen können, sind folgende:

demo_mode: on

Damit sorgen Sie dafür, dass das Formular im Demomodus arbeitet; der Mailversand wird unterdrückt, alle anderen Funktionen aber ausgeführt.

acceptance_as_validation: on

In der Grundeinstellung verhält sich die Akzeptanz-Checkbox anders als andere Feldtypen; sie zeigt keine Meldung an, obwohl sie das weitere Ausführen (beispielsweise das Absenden des Formulars) verhindert. Wenn Sie “acceptance_as_validation: on” setzen, werden die Akzeptanz-Checkboxen ebenfalls eine Fehlermeldung zurückgeben, falls sie nicht so ausgefüllt sind, wie es verlangt ist.

Javascript Code

on_sent_ok: “alert(‘Senden erfolgreich’);”

Damit melden Sie dem Besucher in einem kleinen Popup-Fenster, dass sein Formular erfolgreich versendet wurde.

on_submit: “alert( ‘Alle Angaben akzeptiert’);”

Damit melden Sie dem Besucher zurück, dass alle seine Angaben vom Server angenommen wurden und weiterverarbeitet werden können; das Versenden der E-Mail wird damit nicht bestätigt.

Die beiden Meldungen zwischen den einzelnen Hochkommas (‘Senden erfolgreich’ bzw. ‘Alle Angaben akzeptiert’) können Sie so formulieren, wie Sie das möchten. Für das verarbeitende Programm sind das einfache Zeichenketten, die so ausgegeben werden, wie sie dastehen.

Formular, wie es aus dem Generator kommt:

<p>Ihr Name (Pflichtfeld)<br />
[text* your-name] </p>
<p>Ihre E-Mail-Adresse (Pflichtfeld)<br />
[email* your-email] </p>
<p>Betreff<br />
[text your-subject] </p>
<p>Ihre Nachricht<br />
[textarea your-message] </p>
<p>[submit "Senden"]</p>

Ergänzungen, die Sie vornehmen sollten, um Barrierefreiheit zu gewährleisten:

<fieldset>
<legend>Kontaktformular</legend>
<p>
<label for="your-name">Ihr Name (Pflichtfeld)</label><br />
[text* your-name] </p>
<p>
<label for="your-email">Ihre E-Mail-Adresse (Pflichtfeld)</label><br />
[email* your-email] </p>
<p>
<label for="your-subject">Betreff</label><br />
[text your-subject] </p>
<p>
<label for="your-message">Ihre Nachricht</label><br />
[textarea your-message] </p>
<p>[submit "Senden"]</p>
</fieldset>

Mit dem Tag <fieldset></fieldset> bekommt das Ausgabegerät die Mitteilung, dass es sich hier um eine Gruppe von Formularelementen handelt. <legend></legend> definiert zusätzlich eine Überschrift, die eben auch vorgelesen wird.

<label></label> mit den entsprechenden Attributen sorgt dafür, dass die Informationen korrekt durch das Ausgabegerät wiedergegeben werden können.

Eine Auswahl aus mehreren Empfängern definieren

Manchmal hat man ja die Situation, dass mit demselben Formular Informationen an unterschiedliche Empfänger gesandt werden sollen. Um hier eine Auswahl zu ermöglichen, notieren Sie wie folgt:

<p>
<label for="empfaenger">Empfänger:</label><br />
[select empfaenger "Empfänger1|empfaenger1@example.org"
"Empfänger2|empfaenger2@example.org"
"Empfänger3|empfaenger3@example.org"]
</p>
Sie setzen also zunächst wieder das Label für die Barrierefreiheit, danach definieren Sie eine Auswahlliste mit dem Namen des Labels und danach notieren Sie den Namen des Empfängers, einen Längsstrich (auf Windows-Tastaturen normalerweise mit ‘alt gr’ und der Taste für die spitzen Klammern) und dann die Mailadresse des Empfängers, eingeschlossen in “. Vergessen Sie nicht, das Label-Tag und das Absatz-Tag zu schließen.