Setting Recipient Email Address Dynamically in Contact Form 7
Contact Form 7 is a popular, reliable and free plugin to create forms in WordPress. Working with [tags] forms can be put together easily and embedded on any page. Additionally there are lots of extensions available to build even more advanced forms with Contact Form 7.
However, I came across the limits of the CF7 plugin and could not find a solution with additional plugins. So I ended up writing my own little script.
Recipient Email dependent on other fields
Depending on the user’s input — specifically the address — the form should be sent to either Branch A or Branch B. The idea here was simply to use the ZIP code which the user enters to distinguish which branch the form should be sent to.
I first tried to get it done with the Conditional Fields Plugin and the Contact Form 7 — Dynamic Text Extension. These make it possible to display additional fields depending on the input on other fields.
However, I could not pass these values as mail recipients. Because for the mail template it does not matter if conditional fields in the frontend have been displayed or not.
In addition, CF7 only allows 2 different types of tags in the recipient field: Either a (mandatory) e-mail tag or a selection option (dropdown or radio buttons), where user can select the recipient for himself. (With the pipe character “|” you can choose not to display the address in the frontend).
For all other tags in the recipient field you will get an error:
In my case that means, it would be possible to make a dropdown with all ZIP codes of Austria, let the user select and to pass the assigned email address to the mail template:
1010 | office.wien@test.at
1020 | office.wien@test.at
….
9992 | office.linz@test.at
But I did not want to list all of Austria’s ZIP codes — from Vienna’s Inner City 1010 to Iselsberg-Stronach 9992, so I tried to build my own little script.
Use jQuery to fill email field
In my form I gave my existing ZIP code field the ID postalCode, made it mandatory and added another mandatory email field with the ID recipient:
…
<label>Postal Code [number * ZIP id:postalCode min:1000 max: 9999] </label>
<label>City [text * city] </label>
…[email * to-recipient id:recipient]
With CSS, I hid this email field for the normal user, as it is to be populated automatically by jQuery.
Now jQuery listens for changes to the #postalCode field and gets the input. With a regular expression, I try to distinct whether the postal code is located within the service area of the Vienna branch or not. If it matches the RegEx, the hidden #recipient email field will be populated via jQuery with the Vienna branch’s email address. If the postal code is not within the defined range, jQuery fills in the field with the email address of the Upper Austrian branch.
Update: Of course you have to use the test() method to check if the postal code matches the range defined with the RegEx. The match() method returns an array and not a boolean variable.
The code snippet looks like this:
<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('#recipient').val("office.vienna@test.at");
}else {
jQuery('#recipient').val("office.linz@test.at");
}});</script>
You can use that script of course not only for CF7 forms, but also with a lots of other popular form plugins like WPForms…
Find the German version of this post on: https://www.daniel-marx.com/dynamische-empfaenger-fuer-contact-form-7/
