Sometimes, while designing a Contact Form 7 (CF7) form on your website, you may need to use selectable email addresses in your Contact Form 7 form.
For example, assume that you are designing a suggestion form where users can select a specific department of your company to send the suggestion. Here, you can create a drop-down menu with the email addresses of the CEO, the Support department, and the Sales team of your company.
Then, the users can select an email address from the drop-down menu and directly send the suggestion to the concerned email.
Tip: You also need to configure the Mail template to send the email on every form submission.
Problem with this approach
However, using email addresses on the drop-down menu exposes your company emails to the public.
Therefore, anyone on the internet can access your private email addresses easily. If you do this, hackers might find it easy to perform spam, phishing, and spear-phishing attacks on your employees.
Tip: One of the main reasons that many people use forms is to avoid showing email addresses on their website.
You can make sure that your private emails are hidden from the public by displaying only the name or title of the department in the form and store the corresponding email addresses internally. Then, retrieve the email addresses based on the selection of the user while sending the final email.
Securely adding selectable email addresses using pipes
In Linux and other UNIX-based systems, the pipe (|) character is used to connect two different commands. When it is used, the system executes the first command, computes an output, and sends the output to the next command.
You can use the pipe character in Contact Form 7 in a similar way. When you add the pipe character between two values, CF7 displays only the previous value on the website. However, while processing the form and sending an email, it sends the second value as the final output.
Therefore, if you use CEO|ceo@yourdomain.com as an option of the drop-down menu, the form only displays CEO. However, when you add the corresponding Mail Tag in the To field of the mail templateTemplate CF7 Skins Templates are the structure of your form, providing the content and layout. They act as an easy to follow guide that can be adjusted to your particular needs., it sends the email to ceo@yourdomain.com.
Using this method, you can display a desired text in the form and hide the corresponding email address.
In this article, we show you how to create selectable email addresses in Contact Form 7 forms. Additionally, we provide methods on preventing spam and improving security while doing so.
Before you begin
But before we get started, there are a few things you need to know.
Adding selectable email addresses
We cover the following methods of adding selectable email addresses in your forms:
Tip: Use whichever method you prefer – all the methods achieve the same result.
1. Using the CF7 Form Tab
To add selectable email addresses from the CF7 form tab:
1. Go to your Contact >> Contact Forms >> Form.
2. Enter the items to be displayed and their corresponding email addresses separated by a pipe (|) character in the Select tag.
[select recipient-re "CEO|ceo@yourdomain.com" "Support|support@yourdomain.com" "Sales|sales@yourdomain.com"]
3. Click Save.
Tip: You also need to add the selected drop-down values in the Mail tab
2. Using CF7 Form-tag Generator
To add selectable email addresses using the CF7 form tag generator:
1. Go to your Contact >> Contact Forms >> Form. Click the drop-down menu tag.
2. In the Options field, enter the following values per line.
"CEO|ceo@yourdomain.com" "Support|support@yourdomain.com" "Sales|sales@yourdomain.com"
3. Fill all the other fields.
4. Click Insert Tag.
5. Click Save.
Tip: You also need to add the selected drop-down values in the Mail tab
3. Using CF7 Skins Visual Editor
To add selectable email addresses using CF7 Skins Visual Editor:
1. Go to your Contact >> Contact Forms >> Form. Scroll down to the CF7 Skins Visual Editor.
2. Drag and drop a Select (dropdown) field from the FIELDS (CF7 TAGS) section.
3. Edit the newly added item.
4. Enter the items to be displayed and their corresponding email addresses separated by a pipe (|) character in the Options fields.
Tip: You can click Done to close the Edit dialog box if you want, but you don’t need to do this – your changes are updated in the CF7 Skins Visual Form tab as you type.
5. Click Save Visual.
Tip: You also need to add the selected drop-down values in the Mail tab
4. Using the drop-down values in the Mail tab
Once you have designed the form to include selectable email addresses using pipes, you can define the mail template to send the form submission details to the email address selected by the user.
1. Go to your Contact >> Contact Forms >> Form.
2. Select the Mail tab.
3. Enter the mail tagMail Tag Mail Tags are used in Contact Form 7 (CF7) (in the Mail Tab) to show information collected from CF7 form fields (in the Form Tab) in emails sent by CF7. of the drop-down form field in the To text box.
Doing this adds the value present after the pipe in the selected option of the drop-down menu.
Tip: To add the value present before the pipe, use [_raw_your-recipient].
4. Click Save.
5. Use with checkboxes & radio buttons
Although the instructions show how to add selectable email addresses only in a drop-down menu, you can use the same method to add them in radio buttons as well.
Further reading
