Skip to main content

Creating an Email Template

Divi Form Builder allows you to customize the content and appearance of Notification and Confirmation emails sent after form submission. You can choose to format your emails using plain text or full HTML for greater control over layout and branding.

To insert submitted values into your template, reference the form’s Field ID using double percentage signs:

%%field_id%%

For example:

My message is %%message%% and my phone number is %%phone%%.

If the Email Template field is left blank, the default layout will be used. This default simply lists all submitted fields in order.

Plain Text Templates​

Plain text templates offer a quick and simple way to control how form submission data appears in the email body.

Example​

Hello Admin,

You have received a new message from your website.

Name: %%name%%
Email: %%email%%
Phone: %%phone%%
Message: %%message%%

Thanks,
Your Website

Plain Text Email Example

HTML Templates​

For more advanced design and formatting, you can create full HTML email templates. This is useful for matching your brand or creating professional layouts.

How to Create an HTML Template​

  1. Use a free online tool like Sendune Email Designer to design your email visually.
  2. In your design, replace any placeholder text with your form’s field ID wrapped in %%, like %%email%% or %%message%%.
  3. Once your design is ready, copy the HTML code.
  4. Paste the code into the Email Template field in either the Notification or Confirmation email section of your form.
note

Ensure the field IDs match exactly with those used in your form. IDs are case-sensitive.

Example​

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f9f9f9;">
  <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="background-color: #f9f9f9;">
    <tr>
      <td align="center" style="padding: 20px;">
        <table width="600" cellpadding="0" cellspacing="0" border="0" role="presentation" style="background-color: #ffffff; border-radius: 4px; padding: 20px;">
          <tr>
            <td style="color: #333333; font-size: 18px; font-weight: bold; padding-bottom: 10px;">New Contact Form Submission</td>
          </tr>
          <tr>
            <td style="font-size: 14px; color: #333333;">
              <p style="margin: 0 0 10px;"><strong>Name:</strong> %%name%%</p>
              <p style="margin: 0 0 10px;"><strong>Email:</strong> %%email%%</p>
              <p style="margin: 0;"><strong>Message:</strong><br>%%message%%</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

HTML Email Template Example

Where to Apply Templates​

You can use templates in the following areas of the form module:

  • Notification Email – sent to site admins or designated recipients.
  • Confirmation Email – sent to the user who submitted the form (must include an email field).

Each can have its own customized template.

Form Payment Emails​

If you have enabled Form Payments on your form, there are two specific email fields you can use in your email templates:

  • %%de_fb_product_name%% - Displays the name of the product as configured under Price.
  • %%de_fb_payment_amount%% - Displays the payment amount a user has paid.

Expected Results​

Once the template is saved:

  • Your email will follow the layout you created.
  • Any placeholder like %%field_id%% will be replaced with the submitted value.
  • HTML emails will render with the applied styles and structure.

Troubleshooting​

  • Placeholders not working? Make sure the Field ID is correct and matches the form.
  • Email shows raw HTML? Ensure you're pasting valid, well-formed HTML.
  • Default layout appearing? Check that the Email Template field isn't blank and changes are saved.
note

If you are having issues with HTML email templates, AI tools like ChatGPT can be very helpful in making sure your HTML email template is formatted correctly. We actually have our own GPT which you can try - Divi Email Template Buddy.

Last updated on