Contact forms are a great way to collect useful information in a familiar and consistent format. The most downloaded and popularly used contact form plugin in Contact Form 7.
Out of the box, Contact Form 7 is very basic, and it might even be a little daunting for new WordPress users as it doesn’t have a drag-and-drop form builder. However, CF7 is extremely customizable and powerful once you know how to use it to its full potential.
One of the least used features in Contact Form 7 is Mail (2). Even though it’s underutilized, it provides a huge improvement to the experience for your website visitors. We’re here to teach you about Mail (2) and how you can use it to set up an autoresponder email to your contact form submitters.
What happens if you don’t set up Mail (2)?
Contact Form 7 does not automatically send confirmation emails to users who submit contact forms on your website.
After a user successfully submits a contact form they will get a customizable success message on their web browser, but they will not receive a confirmation email. The issue with the success message on its own is once the user refreshes or exits the page, they won’t have a record of having successfully submitted the contact form.
How Mail (2) can help?
Mail (2) allows you to set up an autoresponder email to anyone who submits that particular contact form on your website. Once you activate Mail (2), Contact Form 7 populates a boilerplate autoresponder for you, but you have a lot of control over the contents, design, and functionality of your autoresponder using HTML.
How to customize your message and subject line in Mail (2)?
1. Navigate to your WordPress admin dashboard then in the left sidebar select Contact Forms.
2. Select the specific contact form you want to add a Mail (2) autoresponder to.
3. Click the Mail tab.
4. Scroll down and click the Use Mail (2) checkbox.
5. Here you’ll see the boilerplate template Contact Form 7 automatically provides to you. You could Save and then stop here and your users would receive generic confirmation emails after submitting the contact form. However, there are several ways you can customize these emails with mail-tags and HTML.
What are mail-tags, and how can you use them?
When building your contact form, you encountered form-tags whether you knew it or not. A form-tag is a string of information enclosed by square brackets that is replaced by HTML when your form is rendered to your users. Basically, you build your contact form using form-tags and Contact Form 7 turns those form-tags into input fields, checkboxes, dropdowns, etc. on the public-facing side of your website.
Each form-tag must include two parts: the type of form-tag and the name of the form-tag (e.g. [text* first-name]). The type of form-tag ([text* first-name])will determine the type of input field you want to display to your users for that specific field (text field, checkboxes, dropdowns, etc), while the name ([text first-name]) is a unique identifier which allows you to delineate between each form-tag. You might use the same type of form tag multiple times in a single contact form, but you can use each name only once.
This is important because the names you select will correspond to mail-tags when designing your administrator email and Mail (2) autoresponders. A mail-tag is a single word (can be hyphenated) that exactly matches the name of one of your form tags that is enclosed by square brackets (e.g. [first-name]).
These mail-tags allow you to personalize both administrator and Mail (2) emails based on each individual user’s specific inputs.
You can add mail-tags in both the Subject and Message Body sections of your Mail (2) autoresponder.
1. Copy and paste (or exactly type) the desired mail-tags into the Subject or Message Body section of your Mail (2) template..
For reference, the available mail-tags are listed near the top of the Mail (2) section.
How to add HTML code to Mail (2) autoresponder emails?
Finally, Mail (2) supports HTML, so you can custom code an autoresponder to make the autoresponder look more professional or on brand.
1. Type your HTML code into the Message Body section of your Mail (2) template. Note: There are some steps you’ll need to follow with your HTML code to insure compatibility across all the major email platforms and devices.
Tick the Use HTML content type checkbox. This confirms to Contact Form 7 that you want your email to render the HTML to the user rather than send the literal code to the user.
Why do autoresponders matter?
Autoresponders are great because they confirm to the user that their contact form was submitted correctly, they open up a direct communication channel between the user and your company via email, and they allow you to provide the submitter with information about what to expect next.
Additionally, you can personalize the autoresponder with mail-tags so each user gets information related to them without having to manually send each user an email.
If you’re looking to upgrade the design or personalization of your Mail (2) autoresponders, please reach out to OG Media to see how we can help!