Dynamische Empfänger für Contact Form 7

Contact Form 7 ist ein beliebtes, weil zuverlässiges und kostenloses Formular Plugin für WordPress. Per Tag System lassen sich schnell und einfach Formulare zusammenbasteln und in die eigene Website einbinden. Durch zahlreiche Extention-Plugins können auch kompliziertere Formulare gebastelt werden.

Bei einem Kundenprojekt bin ich allerdings an die Grenzen des Plugins gestoßen und konnte auch mit Erweiterungen und Zusatz-Plugins keine Lösung finden.

Problem: Empfänger abhängig von anderen Feldern

Abhängig von den Eingaben des Users – konkret der Adresse – sollte das Formular entweder an Filiale A oder an Filiale B geschickt werden.  Die Idee war hier einfach anhand der Postleitzahl, die der User eingeben muss zu unterscheiden, an welche Filiale das Formular gesendet werden soll.

Ich habe mich zuerst mit dem Conditional Fields Plugin und der Contact Form 7 – Dynamic Text Extension gespielt. Damit ist es möglich abhängig von bereits ausgefüllten Feldern weitere Felder erscheinen zu lassen.

Jedoch konnte ich diese Werte nicht als Empfänger übergeben. Denn für das Mail Template ist es egal, ob Conditional Fields im Frontend nun dargestellt wurden, oder nicht.

Dazu kommt, dass das CF7 nur 2 verschiedene Arten von Tags im Empfänger Feld erlaubt: Entweder ein (verpflichtendes) Email Tag oder eine Auswahlmöglichkeit, wobei hier mittels Pipes im Frontend ein anderer Text angezeigt werden kann. Bei allen anderen Tags im Emfänger Feld bekommt man einen Fehler ausgeworfen:

Es wäre also möglich hier alle PLZ Österreichs zu hinterlegen, den User per Dropdown auswählen zu lassen und dem Mail Template die zugeordnete Email Adresse zu übergeben:

1010 | office.wien@test.at
1020 | office.wien@test.at
….
9992 | office.linz@test.at

Da ich nicht alle Postleitzahlen Österreichs vom ersten Wiener Bezirk bis Iselsberg-Stronach hinterlegen wollte und das auch nicht so nutzerfreundlich ist, habe ich mir schlussendlich ein eigenes kleines Script gebastelt.

jQuery füllt Email Feld aus

In meinem Formular habe ich dem Eingabefeld für die PLZ die ID postalCode gegeben, es verpflichtend gemacht und außerdem ganz am Ende ein weiteres verpflichtendes Email-Feld mit der ID empfaenger hinzugefügt:

...
<label>PLZ [number* PLZ id:postalCode min:1000 max:9999]</label>
<label>Ort [text* ort]</label>
....
[email* recipient id:empfaenger]

Per CSS habe ich dieses Email Feld dann aber für den normalen User versteckt. Ausgefüllt werden soll das nämlich automatisch per jQuery.

Damit frage ich zunächst Änderungen des PLZ-Feld ab. Mittels einer Regular Expression wird dann unterschieden, ob die Postleitzahl im Einzugsgebiet der Wiener Filiale liegt oder nicht. Falls sie mit den hinterlegten Postleitzahlen des Einzugsgebiets der Wiener Filiale übereinstimmt, wird jetzt das versteckte Email Feld per jQuery mit der E-Mail der Wiener Filiale befüllt. Liegt die PLZ nicht im definierten Bereich, füllt jQuery das Feld mit der E-Mail der Linzer Filiale aus.

Das Code Snippet sieht dann so aus:

<script text="text/javascript">
var postalCode;

var re = new RegExp('^[1-2][000-999]|[3][000-299]|[3][400-799]|[7][000-999]|[8][000-499]|[8][600-699]$');

jQuery('#postalCode').on('change', function() {
  postalCode = this.value;

if (postalCode.match(re)) {
    jQuery('#empfaenger').val("office.wien@test.at"); 
}
else  {
   jQuery('#empfaenger').val("office.linz@test.at"); 
}

});
</script>

Dieses ganze Skript kann man jetzt entweder direkt in das php-Template der Formularseite, über einen Codeblock oder per functions.php des Child-Themes einfügen. Hier nutze ich die if ( is_page (ID)) Funktion, um das Snippet auch nur auf der Seite mit dem Formular auszuspielen:

add_action( 'wp_footer', 'myform', 20 );
function myform(){
 if( is_page( ID ) ) {	 
	?>
	<script text="text/javascript">
         var postalCode;

         var re = new RegExp('^[1-2][000-999]|[3][000-299]|[3][400-799]|[7][000-999]|[8][000-499]|[8][600-699]$');

         jQuery('#postalCode').on('change', function() {
         postalCode = this.value;

         if (postalCode.match(re)) {
           jQuery('#empfaenger').val("office.wien@test.at"); 
         }
         else  {
           jQuery('#empfaenger').val("office.linz@test.at"); 
         }

         });
        </script>
 <?php
 }
}

Eine englische Version dieses Artikels gibt es auf medium.com