BE Bonny Elangbam.
← Back to notes
snippet 1 min read WP 5.0+

Elementor Form HTML Email Template

A responsive HTML email template for Elementor Forms with name, phone, email, and message fields.

Updated Dec 3, 2025 #elementor #wordpress #html #email #snippet

Use this template as the HTML body for an Elementor Form email action. The [field id="..."] tokens are replaced by Elementor with values from the matching form fields.

The email template

elementor-email.html
<!-- Begin: Elementor Email Template -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="x-apple-disable-message-reformatting">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>New Form Submission</title>
  <style>
    @media (max-width: 620px) {
      .container { width: 100% !important; }
      .content { padding: 20px !important; }
      .field-label { width: 120px !important; }
    }
  </style>
</head>
<body style="margin:0; padding:0; background:#f5f7fb; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; color:#1f2937;">
  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background:#f5f7fb;">
    <tr>
      <td align="center" style="padding:24px;">
        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" class="container" style="width:600px; max-width:100%; background:#ffffff; border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.06);">
          <tr>
            <td style="background:#111827; padding:22px 28px;">
              <h1 style="margin:0; font-size:18px; line-height:1.3; color:#ffffff; font-weight:700;">New Form Submission</h1>
            </td>
          </tr>
          <tr>
            <td class="content" style="padding:28px;">
              <p style="margin:0 0 16px; font-size:15px; line-height:1.6;">You’ve received a new message via your website form. Details below:</p>
              <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse:separate; border-spacing:0; margin:12px 0; background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;">
                <tr>
                  <td class="field-label" width="160" style="padding:14px 16px; font-size:13px; font-weight:600; color:#374151; background:#f3f4f6; border-bottom:1px solid #e5e7eb;">Name</td>
                  <td style="padding:14px 16px; font-size:14px; color:#111827; border-bottom:1px solid #e5e7eb;">[field id="name"]</td>
                </tr>
                <tr>
                  <td class="field-label" width="160" style="padding:14px 16px; font-size:13px; font-weight:600; color:#374151; background:#f3f4f6; border-bottom:1px solid #e5e7eb;">Phone</td>
                  <td style="padding:14px 16px; font-size:14px; color:#111827; border-bottom:1px solid #e5e7eb;">[field id="phone"]</td>
                </tr>
                <tr>
                  <td class="field-label" width="160" style="padding:14px 16px; font-size:13px; font-weight:600; color:#374151; background:#f3f4f6; border-bottom:1px solid #e5e7eb;">Email</td>
                  <td style="padding:14px 16px; font-size:14px; color:#111827; border-bottom:1px solid #e5e7eb;"><a href="mailto:[field id='email']" style="color:#2563eb; text-decoration:none;">[field id="email"]</a></td>
                </tr>
                <tr>
                  <td class="field-label" width="160" style="padding:14px 16px; font-size:13px; font-weight:600; color:#374151; background:#f3f4f6;">Message</td>
                  <td style="padding:14px 16px; font-size:14px; color:#111827; line-height:1.65;">[field id="message"]</td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>
<!-- End: Elementor Email Template -->

Make sure the Elementor field IDs match name, phone, email, and message, or update the tokens before using the template.