Stylish Email Confirmations with Elementor Pro

With Elementor Pro, you can quickly and easily create beautiful contact forms. No coding is required, and you can link various actions to each form. These actions can include newsletter sign-ups, email notifications, or simply collecting form submissions.

You can send two different emails—for example, one to the website administrator and one to the person who filled out the form. You might think that’s enough, and in many cases, it is. However, Elementor forms’ email actions are quite basic, and if you don’t want to send a plain text email, you’ll need to create a template.

What other options are available?

In theory, you could also connect the form to your email marketing system and send the confirmation email via an automated campaign. However, this means the visitor will be stored in your email marketing provider’s database, increasing the chance that your email confirmation will be marked as promotional or end up in the spam folder.

A better solution is to send these types of emails through a transactional email provider. These providers optimize their mail servers so that email confirmations, orders, and invoices have the best chance of landing in the recipient’s inbox.

Sending email confirmations with Maileroo

For our websites and those of our clients, we send “website” emails via Maileroo. This service is not only fast and reliable but also incredibly affordable. The free version includes all the features typically found only with major providers.

This guide will show you how to quickly and easily send professional email confirmations using a Maileroo email template, Elementor forms, and our Elementor extension.

Don’t have a Maileroo account yet? You can create a free account via this link. Also, check out our guide on configuring Maileroo for WordPress.

Installing the Maileroo plugin(s)

To send emails, you need to install the “Simple SMTP” plugin from Maileroo. In the plugin settings, choose the “Maileroo API” option instead of SMTP. You can generate an API key through your Maileroo account.

Our Elementor extension can be downloaded via the form below. The installation of the extension is simple, no further configuration is required.

Building a contact form with Elementor Pro

Create your form in Elementor Pro with all the necessary fields. Make sure to assign clear IDs to the fields (under the “Advanced” tab). The names you use here will be sent via the Maileroo API. I’ll explain how this works in the next step.

Setting up the Maileroo template action

In addition to other actions, select the “Maileroo template” option under “Actions after submit.” The “Maileroo template” tab looks very similar to the “Mail2” tab, but we’ve removed some fields and added a “Template ID” field.

In the “To:” field, insert the shortcode for your email field (this can be found below the ID in the “Advanced” tab). Fill in the other fields as desired, then click “Publish” in Elementor.

Creating your email confirmation template in Maileroo

The form fields you used earlier determine which variables you can use in your Maileroo template.

1. In Maileroo, go to Email API > Templates > Create Template and enter a name for your template.
2. When the template box appears, click “Edit.”
3. In the new window, design your template and enter your confirmation email text.
4. In places like the greeting, insert “variables” such as {{name}} and {{message}}. These will be replaced by the visitor’s form input when sending.
5. Once your email template looks perfect, click Save Changes and Go Back.

Testing your new function

Are your form and template ready? Time to test! Fill out your form as if you were a visitor. Do you receive the confirmation email as expected?

Frequently asked questions

Gepubliceerd in: Tutorials