In this tutorial we learn how to set up automated and personalized email confirmations form submissions.
The tutorial will cover:
✔︎ Creating automated email confirmations from form submission
✔︎ Personalizing email confirmations
✔︎ Using HTML and CSS to design styled email confirmations
✔︎ Previewing your message while you work
✔︎ And much more!
See Also:
Form widget
Multi step forms
Form submissions
Yoga studio kit
Hi everyone! This is Shiri from Elementor.
Today we’ll learn how to send automated emails from our Elementor website to reassure our visitors that their forms have been successfully submitted. But we won’t stop there, we’ll also learn how to personalize and even style these emails to make them more effective.
This tutorial uses the form widget, so if you’re not yet familiar with Elementor Forms, we recommend you first watch our dedicated form widget tutorial.
Let’s begin by creating an automatic email after a form has been submitted. I already have this form here, which will be sent directly to our inbox whenever visitors submit it. Now we need to add an automated response, to let them know we received their message.
To start, click the form widget, and under Content, Expand the Action After Submit tab. Add Email 2 by clicking the plus icon. This allows us to send two separate emails with every form submission.
We’ll see a new tab added to our content options, so let’s head over to Email 2 and set up our email. We want the Email Recipient to be populated by whichever email address our visitor typed in the email field. To achieve this, go to Form Fields, and under Email, choose Advanced. This will provide us with extra information about this field and the option to give our fields a specific name. We recommend giving your fields a recognizable name to make it easier for yourself in the future .
Once we’ve given our field a name, we’ll copy the shortcode, go back to the Email 2 tab, and paste the Shortcode into the recipient field.
Then add a Subject and Message to the email. I’ll leave the default Message field, which has been prepopulated. We can personalize their experience further, by adding the variable name field ID shortcode, which will display the name our visitor has entered in the Name field.
To do this, we’ll go up to Form Fields, click the First Name field, and in Advanced, copy the Shortcode. Then we’ll go back to Email 2, and paste the Shortcode, where we’d like our visitor’s name to display in the Subject Line.
Now all we need to do is Update the page, and test our form.
Perfect! As you can see, the confirmation message was successfully received. .
This message is perfectly fine, but we can jazz it up a bit.
In this example, we’ll create a customized message using a bit of HTML and CSS, for a more engaging experience, while still keeping true to our brand.
Email clients like Outlook and Gmail support basic code like the one provided in the description. It’s straightforward, so even if you’re not used to using code, you’ll be able to implement it without much effort. And of course, if you prefer, you can use your own code.
By the way, If you’ve found this video helpful, hit the thumbs up to let us know the type of content we should create more of!
Okay, back to our form.
We’ll use the Message field to add the code.
Now we’ll make sure the shortcodes in our message match our form shortcodes.
In order to see how the styled message will look, here’s a handy tip we can use to preview it:
We’ll temporarily drag in an HTML widget to give us more room to work with, as well as show us the message a visitor will receive in real-time.
Keep in mind our preview can be affected by existing typography settings on our website.
We can change the colors of the message to match our website’s style. For example, I’ll change this color to my website’s primary color, and add a cool emoji before the message.
We’re going with a branded message, so let’s go all-in, shall we? This email is a great opportunity to let a new potential customer get to know us. I’ll add this short “About” text, to warm up the customer while they’re waiting to be contacted.
Once we’re satisfied with our message, we’ll copy the HTML and CSS code and paste it in the Email 2 Message field.
Looks good to me!
Now we’ll go ahead and delete this HTML widget.
Update the page, and let’s check this out by clicking Preview.
I’ll write a short message… and go to my inbox to see the final result.
Okay, I don’t want to brag, but this. Looks. Great!
And there you have it, Elementors!
A simple, nifty way to add an email confirmation message after a form submission. Let’s recap what we did…
First, we set our form to send automated emails to our visitors upon submission. Then, we added a simple personalized email response message to it..
And finally, we added some style to our message by using a few lines of HTML and CSS codes.
The learning doesn’t stop here! Check out our other videos to learn more about form creation and submission management.
Until next time,
Keep creating!
