Did you ever wanted to create a form in Elementor which when submitted by user sends out a notification to you as well as a thank you message to your user? If that is your requirement, this post will explain how to do that step by step.
First step : Create an Elementor Pop up form with required form fields
Second step : Create the Notification email for yourself
Third step : Create Auto Responder for your user with Thank you message
Fourth step : Adding the pop up form triggers to your page
Fifth step : Enjoy your new pop-up form automation
In order to create an Elementor Pop Up form, you have to go to Elementor Templates and find "Popups"
When you click on the Popups, you will be taken to your Elementor Popup templates. You will find your previous popup templates there, if you have already created some.
You have to click on "Add New" to start creating your new Elementor Popup.
Click 'Create Template' to get started.
This will first take you to Elementor Popup template library and most of them are 'pro' feature, which means they are not free and won't be available if you don't have a pro version of elementor.
But we will be creating our own free to create form. So we will close this window without selecting any beautiful options available out of the box. So click close and get ready to create your own.
When you close the popup library, a screen like above will show up. Click on the plus button to start adding elements. We will first add a row with 2 columns.
We will select the layout as shown above. In the smaller column, we will add an image and on the bigger one, we will add a form.
When you select the layout, it will be ready to accept the individual elements of the form. Click on the plus sign to add the elements.
We are going to drag and drop Image and Form elements on left and right columns respectively.
By default the Form element of Elementor adds Name, Email and Message along with Send button.
You can add more elements by clicking on Add Items on the left panel.
From the dropdown you can select a range of items to add into the form. This is where you can add reCaptcha element as well. We will go ahead and add a reCaptcha v2 element.
With this we have created our basic form. Now it is time to look into autoresponder part.
Now we need to get a notification when someone fills out this form. In order to set that up, we need to look into "Actions after submit" section of the form settings.
By default what we have are "Collect Submission" and "Email". This means when someone submits the form, it gets saved into Elementor form submission database and a notification email is sent to the the admin email. We can also add another extra email to be sent to the user.
We don't have to do anything with the Elementor form submission.
But we can customise the notification email being sent to admin email. We can change the email addresses, add more to it, change the content of the email and more.
This is going to be the notification email, which means, the email you or anyone who you want to receive a notification regarding a new form entry.
TO : So in the "To" field you can add your email address or your team's email address, so whenever there is a new entry, a notification is sent to this email.
Subject :Give a proper subject. This will be the subject line of your notification email. You can add dynamic texts to your email subject, such as the name or email of the person who submitted the new entry.
Message: This is the part where you can get all the details from the from entry. By using the shortcode [all-fields], you will receive all the details of the form entry.
From Email : This will be the from address of the email you receive. Ideally, it will be your email address.
From Name : Same as above. It will be your name or brand name.
Reply-To : This will be the address present in the reply email field. Ideally it will be your email address. You can also add Cc and Bcc emails as well.
Before we go into how to set up an auto-responder to those who submits your form, let's learn more about Dynamic fields that you can add to your email.
If you are wondering what is a dynamic field, it is those values that changes dynamically when you send out an automated email. For example when you get an email with your own name like "Hi Name, " the name field is populated by a dynamic merge field.
When you used [all-fields] earlier, it is also a dynamic merge field.
So let's see how and where to find dynamic fields to use in Elementor forms.
You have to go back to Form Fields where you have added Name, email, message and extra items.
From the above images you can see, you have to go to Form Fields >>Name >> Advanced >> And look for the short code.
The shortcode follows this syntax [field id="ID"]
You can see that for name the ID is "name" and for email it is "email". So wherever we need to replace with the Form Submitter's name and email we use [field id="name "] and [field id="email"] respectively.
You can bring the data value of almost all the fields and use it in an email if you want. But most of the time our requirements are just for name and email.
Now let's see how to use these dynamic merge fields in an automated email.
We will be setting up Email 2 as the auto responder.
Now, we want to send it to the person who submitted the form. We will have to use the email dynamic merge field to get that info.
So in the To field we will add
[field id="email"]
Subject: Something in the line of "We received your message".
Now comes the fun part. Message! This is the actual auto responder.
Message: We need to say
Hi Name,
We received your message. We will get back to you soon.
To get the name we will add
[field id="name"]
One thing you need remember is that, if you want to add extra lines, you will have to use a bit of html code. You can use <br> to add a new break. So it will look like this.
Hi [field id="name"],
<br>
We received your message.
Rest everything is same as before. From email, from name and reply to are all the same. It has to come from you and show your name and when they try to reply, it has to come to you. So you give your email and name as from and reply fields and your name in the appropriate fields.
Once you finish these, you are ready to publish the form.
Click on the green publish button to finish the form. It will give you some more options to have even more control on your form visibility.
It will take you to the next screen where you can add conditions. You don't have to set any conditions for this popup form to work. But if you want more control such as if you don't want to show the popup on your home page or something similar, you can set it here. You can skip this step and click next.
Then you will get to the Triggers.
This is the screen where we will be setting our Triggers. What we want is to be able to click on a button and activate the popup. If you want any other options, such as popup on page load, or while exiting, you can turn those on here as well. For our purpose, we will be activating "On Click" trigger only.
Click Next to reach Advanced Rules.
This is also optional unless you want to implement advanced rules and have more control on how your popup shows. You can simply "Save and Close" and finish the Popup setup.
If you have added picture and everything else and included a new section with Heading, your finished form will look something like this.
Now it is time to connect the popup to a button.
Go to the page where you are planning to add this popup and select the button that should trigger this popup.
Click on the button and on the left side you will see more settings. From there select "Popup" from the dropdown under "Link" field. Action will be to "Open Popup" and you have to select which popup from the field below. Start typing the name you have given for your popup and it will show there.
Select your popup and click save and publish the page. Now you are ready to test it.
Test, test, test before you make it really public. Check if the button is triggering the popup. If it is triggering the popup, check if form submissions are working as expected. You may come across reCaptcha issues if you have multiple forms. If that happens, this post can help you.
If forms gets submitted properly, check if you are receiving the notification and if the email address added in the form gets a Thank you message. You can also check Elementor submission in the dashboard to see if elementor is receiving the submissions.
If everything is working as expected, you are ready to make your page for your audience. Hope this helps.
