[AEM Forms]{class="badge positive" title="Applies to AEM Forms)."}
Email Templates in Adaptive Forms
Adaptive Forms allows you use HTML and plain-text email templates. HTML email templates enable you to send rich, personalized, and visually appealing emails when a form is submitted. These emails can be customized with form data and enhanced using various email tags, such as images and links. With Adaptive Forms, you can either upload a file containing an HTML template or use a plain-text editor to create these templates.
This article helps you configure and use email templates in Adaptive Forms. By the end, you will be able to:
Here is a quick overview of the steps involved:
- Open the Adaptive Form for editing.
- Configure the Send Email submit action.
- Select or upload an HTML template, or manually enter the email template.
- Test your email configuration.
Configure an HTML template for an adaptive form
You can set up an Adaptive Form to send an email upon submission using the Send email submit action. The action provides two methods for configuring an HTML template:
Option 1: Select a File Containing the HTML Template
Before proceeding, ensure that you have uploaded the HTML template to your AEM Forms environment.
-
Open the Adaptive Form for editing.
-
Go to the Content Browser, select the Guide Container, and tap the properties icon. A dialog box with title
Adaptive Form Containerappears. -
Go to the Submission tab and select the Send email submit action.
-
Enable the Use external template option.
-
Enable the Use HTML template option.
-
Click the folder icon for the External Template Path option and browse to select your HTML template.
-
Click Done to save the configuration.
Your HTML template is now configured for the Adaptive Form.
Option 2: Manually Enter or Paste an HTML Template
- Open the Adaptive Form for editing.
- Go to the Content Browser, select the Guide Container, and tap the properties icon. A dialog box with title
Adaptive Form Containerappears. - Go to the Submission tab and select the Send email submit action.
- Enable the Use HTML template option.
- Type or paste your HTML code directly into the provided Email Template box.
Configure a plain-text template for an adaptive form
You can set up an Adaptive Form to send an email upon submission using the Send email submit action. The action provides two methods for configuring a plain-text template:
Option 1: Select a File Containing the Template
Before proceeding, ensure that you have uploaded the HTML template to your AEM Forms environment.
- Open the Adaptive Form for editing.
- Go to the Content Browser, select the Guide Container, and tap the properties icon. A dialog box with title
Adaptive Form Containerappears. - Go to the Submission tab and select the Send email submit action.
- Enable the Use external template option.
- Click the folder icon for the External Template Path option and browse to select your plain-text template.
- Click Done to save the configuration.
Your template is now configured for the Adaptive Form.
Option 2: Manually Enter or Paste an HTML Template
- Open the Adaptive Form for editing.
- Go to the Content Browser, select the Guide Container, and tap the properties icon. A dialog box with title
Adaptive Form Containerappears. - Go to the Submission tab and select the Send email submit action.
- Type or paste your plain-text template code directly into the provided Email Template box.
Use Form Data in Your Email Templates
You can include form data in your email templates by using placeholders. These placeholders are dynamically replaced with actual form field values when the email is sent. For example:
- ${name}: The value of the field named “name.”
- ${email}: The value of the field named “email.”
- ${message}: The value of the field named “message.”
Sample HTML Email Template
Here’s an example of an HTML email template that uses form data placeholders:
<!DOCTYPE html>
<html>
<head>
<title>Form Submission</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
h2 {
color: #0056b3;
}
</style>
</head>
<body>
<h2>Thank You for Your Submission</h2>
<p>Dear ${name},</p>
<p>We have received your submission with the following details:</p>
<ul>
<li><strong>Email:</strong> ${email}</li>
<li><strong>Phone Number:</strong> ${phone_number}</li>
<li><strong>Message:</strong> ${message}</li>
</ul>
<p>We will get back to you soon!</p>
<p>Best regards,</p>
<p>Your Team</p>
</body>
</html>
Sample Plain-Text Email Template
Here’s an example of a plain-text email template:
Subject: Thank You for Your Submission
Dear ${name},
We have received your submission with the following details:
- Email: ${email}
- Phone Number: ${phone_number}
- Message: ${message}
We will get back to you soon!
Best regards,
Your Team
Best Practices for HTML Email Templates
- Ensure your styles are inline for better compatibility with email clients.
- Make your template responsive for a better experience on mobile devices.
- Use tools like Litmus or Email on Acid to preview your email across various email clients.
- Ensure the placeholder names match the form field names exactly.
- Check for missing or incorrect tags in your HTML template.
- Verify that the Send Email submit action is correctly configured.