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.

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.

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:

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:

You can use that script of course not only for CF7 forms, but also with a lots of other popular form plugins like WPForms…

Related posts:

When I first started my career as a teacher as a whippersnapper at the age of twenty-three, I saw an older colleague in our lounge, fanning herself and sweating. I thought she was having a heart…

Before the advent of the Internet, students who needed extra help in their academics turned to home tutors to guide them in difficult subjects. But now with the advancement of technology, home…

Notes on Vienna from Afisha Guide, insides of gastronomic and tourist places, and tips on saving money.