Sometimes it’s nice to let your customers and site visitors know you’ve received a form submission by sending them a confirmation email. This is considered good user design and can improve your website and also improve your SEO by making your site better to use.
With Elementor Pro’s built-in form widget, you can send confirmation emails to your visitor when they submit a form. You can also send one to yourself or the owner of the site.
Let’s look at how that’s done.
How do confirmation emails work with Elementor Forms?
By now, we should all know what a confirmation email is but how does it work with Elementor forms?
Simply put, when someone submits a form on your site through the Elementor Pro Form widget, you can tell the form what you want it to do with that submission after it’s submitted.
One thing you may want to do is send a confirmation email to yourself and to the person who submitted the form.
In this confirmation email, you can use the fields of the form to populate your confirmation message. This makes your confirmation email dynamic, in that it will take whatever values are placed into the form when it builds the confirmation message.
How to configure confirmation emails in Elementor
So how do you go about setting up a confirmation email with the built-in form widget in Elementor Pro?
Start by finding and editing a form on your site:
This will change the context menu on the left and show you what you can edit within your form.
Incidentally, this is a good time to give your form a name using the Form field:
Also notice the individual form fields (i.e: Name, Email, etc..).
Clicking on a tab expands it, and from there, you can flip to the Advanced menu which shows you the “shortcode” for that form field (this will come in handy later):
Editing ‘After Submit’ Actions
Now that we’ve established where to find the shortcode for our form fields, let’s look at what we can do after the form is submitted.
Scroll down and locate the ‘Actions After Submit‘ section.
Currently, Collect Submissions and Email are set up as “after submit” actions.
The 2 types of “Email” actions
There are 2 “email” actions we can select.
Typically, the first one – “Email” – is used to send a confirmation email to the site owner or whoever needs to receive form submissions.
“Email 2” is typically used to send a confirmation email to the person that submitted the form.
Both types of Email actions work the same, but in this article, we’re going to focus on sending a confirmation email to the person who submitted the form.
Clicking on the “plus” (+) sign allows us to add additional actions to our form after it is submitted. In our case, we want to select the Email 2 option:
Selecting this action will add a new context menu below:
Configuring the confirmation message
Now that we’ve added the Email 2 action, it’s time to configure it.
The first field, the To field is important, as that’s where the confirmation will be sent.
Here’s where we’ll employ our shortcode from before. So scroll back up to the Form Fields section and find the shortcode for the Email field (this will ensure that whatever value the user inputs into this field will be translated to this field in our confirmation email):
Fill out the Subject and Message of the confirmation email
The Subject and Message field is where we’ll customize our confirmation email:
Some things to note here:
- We’ve employed the Name field shortcode in the introduction to automatically populate the value of the name field in our confirmation email;
- Because the confirmation email is sent as HTML, we need to use
<br/>(break) tags to force a line break, otherwise all the text will be squished together. I’ve used 2<br/>tags back to back at times to create a full line of space between each section/paragraph (shown later); - Finally, the
[all-fields]shortcode outputs the values of all the fields that the user submitted with the form. You don’t have to include this but I opted to add it in there for convenience
Update: after a little Googling, I learned that you can also use
<p>tags for your paragraphs and that these tags will automatically add a space after each paragraph, which negates the need to use<br/>tags. Going forward, I’ll probably use<p>tags as they look a little cleaner and accomplish the same thing!
An example of using a <p> tag looks like this:<p>This is my paragraph!</p>
Sidenote: Since the form is processed with HTML, you can style the form with any HTML tags you want, like headings (<h1>, <h2>, etc..), list tags (<ul>, <ol>), or formatting tags like <strong> or <em> to make the text bold or italic.
Here’s an example of how you can use HTML to configure Email 2 confirmation messsages with Elementor.
Configuring Email Recipient Details
To finish up, we need to specify the From Email (the address from which the confirmation email will be sent from), the From Name (who it’s sent by), and the Reply-To email (which email address the recipient will reply to when they hit the ‘Reply’ button in their mailbox).
Here’s how I configured mine:
To break it down a little further:
- From Email – I like to use a no-reply@ email for automated emails as I think it looks a little more professional;
- From Name – I used my business name as the Sender Name on the email;
- Reply-To – the address that will receive replies when/if the reply to the confirmation email
Adding Meta Information to our Confirmation Email
There’s one more thing we can do to make our confirmation email better and that’s to add some meta data to the end of it.
Thankfully, Elementor has built in meta data that makes it easy to include.
In the same menu you’ve been working in, scroll down a little farther and you’ll see a “Meta Data” section. Clicking the + sign will show you your options:
Testing the Form
Now that we’ve got everything in place, let’s test out of confirmation email.
Ideally, you’ll have a secondary email address you can use to test your form. If not, it should still work.
Go to the page with your form and fill it out.
Now sign into the email account you submitted the form with and you should see your confirmation email:
Now, there might be a few things you want to adjust after you test the confirmation email. That’s easy enough to do by going back and editing your form and the values in the Email 2 section.
You can also experiment with setting up the Email action as well (if you haven’t already). This article from Elementor about sending confirmation emails will help to illustrate that.
Also, be sure to check out this video for a quick overview of setting up confirmation emails using Email 2 with Elementor Forms:
Conclusion
So I hope you learned something and are already close to configuring your own confirmation emails with Elementor forms.
To recap, Elementor Forms lets you add an additional Action After Submit, called Email 2, that lets you send a confirmation email out when a form is submitted.
Using shortcodes taken from the Advanced section of the form fields, we can auto-populate sections of our response message.
We can set where the form is sent, who receives replies, and include additional meta data, like date and time, to the confirmation email.
Confirmation emails are a nice way to let your visitors know that you got their message. They can be personalized with the submitters information, and can help with website usability which can also help with your website’s SEO.
Was this helpful? Do you have any questions about implementing Elementor Forms on your own site? Find some typos or errors?
Please leave a comment below and thanks for reading!
