Tutorial: Contact Form 7 – auswählbare Empfänger

[toc]

Stell dir vor, du benötigst auf deiner Website ein Kontaktformular welches es dem Absender ermöglicht, den Empfänger selbst auszuwählen. Das können zum Beispiel verschiedene Abteilungen in deinem Unternehmen sein oder auch verschiedene Filialen oder Zweigstellen. Im aktuellen Fall ging es um ein Formular für unseren gemeinnützigen Verein, genauer gesagt um das Bewerbungsformular für neue Helping Touch Botschafter. Bisher gingen alle Bewerbungen an einer zentralen Stelle ein. Weil jeder Botschafter jedoch von einem bestimmten Vereinsmitglied direkt betreut wird, mussten die Bewerbungen handisch weitergeleitet werden. Eine Menge Aufwand für unseren gemeinnützigen Verein. Das Ziel war es also, die Daten aus dem Kontaktfoermular direkt an das Vereinsmitglied weiterzuleiten, welches den Bewerber später auch betreuen wird. So können wir eine Menge Zeit einsparen. Wie wie das umgesetzt habe, erfährst du jetzt.

Die techischen Voraussetzungen

Unsere Vereins-Website basiert auf WordPress und meinem Lieblings-Theme DIVI. DIVI selbst bietet bereits ein eigenes Kontaktformular an. Dieses verwende ich selbst auch regelmäßig für klassische Kontaktformulare auf verschiedenen Websites. Leider genügt dieses unseren jetzigen Voraussetzungen nicht, so dass ein zusätzliches Plugin her musste. Ich habe mich für das “Contact Form 7” Plugin Plugin entschieden.

Das Contact Form 5 Plugin

Contact Form 7  gehört mit zu den ältesten Formular Plugins für WordPress. Du kannst es dir direkt aus dem Backend der WordPress Website downloaden oder findest es im offiziellen Verzeichnis von WordPress. Nachdem du das Plugin aktiviert hast, findest du links in deinem Backend einen neuen Reiter “Formulare”. Hier legst du dir eine neues Formular an oder passt das vorhandene Musterformular “Kontaktformular 1” an deine Wünsche an. Dieses wird dann später per Shortcode auf der gewünschten Seite ausgegeben. Das Standardformular sollte auch bei dir so aussehen:

Nachdem du deine gewünschten Formular-Felder angelegt hast, geht es nur darum das Auswahlfeld für die Empfänger zu erstellen.

Schritt 1: Auswahlfeld im Reiter “Formular” erstellen

Um ein Auswahlfeld zu erstellen findest du im Reiter “Formular”  drei Möglichkeiten:

• Dropdown
• Radio-Button
• Checkboxen

Das Prinzip funktioniert mit allen drei. Ich habe mich für “Checkboxen entschieden. Nach einem Klick auf “Checkboxen” öffnet sich folgendes Popup:

Pflichtfeld

Als erstes kannst du auswählen, ob dein Feld ein Pflichtfeld sein soll oder nicht. Da dieses Feld später für den korrekten Email-Versand zuständig sein wird, solltes du hier einen Haken setzen.

Name

Als nächstes benötigt das Feld einen eindeutigen Namen. Mir wurde “checkbox-381” vorgeschlagen. Du kannst diesen Namen beibehalten oder in einen eigenen ändern. Der Name dient letztlich nur deinem eigenen Verständnis.

Optionen

Im dritten Feld werden nun die einzelnen Optionen, also die zukünftigen Empfänger denes Kontaktformulares eingetragen. Da wir mit dieser Auswahl den Email-Versand steuern möchten, gehören hier die einzelnen Empfänger Email-Adressen hin. Trage jede Email-Adresse in eine Zeile ein.

  Das (vorläufige) Ergebnis sieht dann im Formular so aus:

Vielleicht denkst du jetzt auch: “Wie blöd, dass die Emailadessen öffentlich zu sehen sind.” Du hast recht, denn das sieht zum einen nicht besonders schön aus und könnte zum anderen zu einer Menge ungewollter SPAM-Mails führen. Deshalb “verstecken” wir als nächstes die Email-Adressen und geben stattdessen die Namen der Empfänger aus.

Email-Adressen im Auswahlfeld verbergen

Um die Email Adressen der Empfänger zu verbergen und stattsessen Namen auszugeben, verwenden wir einen Pipe. Die entsprechenden Zeilen im Optionsfeld sehen dann wie folgt aus:

Das sorgt dafür, dass deine User lediglich den Empfänger sehen, nicht aber die dazu gehörige Email Adresse. Hast du alle Empfänger eingetragen, klickst du auf  “Tag einfügen” und hast das Meiste bereits geschafft. Im letzten Schritt müssen im Reiter “Email” noch die entsprechenden Einstellungen vorgenommen werden.

Schritt 2: Einstellungen im Reiter “Email” vornehmen

Damit der Emfänger deines Kontaktformulares nicht standartmäßig eine bestimme Email Adresse, sondern die Auswahl unseres erstellten Auswahlfeldes ist, muss wir im Reiter “Email” einen Eintrag vornehmen.

Das erste Feld im Reiter “Email” lautet “An”.

Genau hier trägst du den Namen deines Feldes in eckigen Klammern ein. Im obigen Beispiel wäre dies [checkbox-381].

Hinweis: Alle Felder, die du im Reiter “Formular” angelegt hast, werden dir angezeigt, so dass du das entsprechende Feld einfach kopieren und einfügen kannst.

Jetzt einfach noch abspeichern und fertig ist dein Kontaktformular mit einem Aufwahlfeld für unterschiedliche Empfänger.

So sieht übrigens das fertige Formular für helping touch aus:  Formular für unsere Bewerber sieht übrigens so aus