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.

Update: Natürlich muss man hier die Methode test() nutzen, um zu sehen, ob die eingegebene PLZ mit der RegEx übereinstimmt. Die – in einer früheren Form des Artikel verwendete Methode match() gibt nämlich keine boolesche Variable zurück, sondern ein Array.

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 PLZarraycheck;

var re = /[1-2]\d{3}|3[0-2]\d{2}|3[4-7]\d{2}|7\d{3}|8[0-4]\d{2}|86\d{2}/;

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

if (PLZarraycheck == true) {
    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 PLZarraycheck;

         var re = /[1-2]\d{3}|3[0-2]\d{2}|3[4-7]\d{2}|7\d{3}|8[0-4]\d{2}|86\d{2}/;


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

         if (PLZarraycheck == true) {
           jQuery('#empfaenger').val("office.wien@test.at"); 
         }
         else  {
           jQuery('#empfaenger').val("office.linz@test.at"); 
         }

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

Das ganze funktioniert natürlich nicht nur für Contact Form 7, sondern auch für andere Formulare, die nicht oder nur ungenügende Conditional Logik haben (bsp. WPForms kann bei den Benachrichtigungen zwar eine Logik, wann eine Formular gesendet werden soll, RegEx sind dort aber nicht möglich.)

Eine englische Version dieses Artikels gibt es auf medium.com