Replies: 1
Hi Forminator Team,
I’m facing a persistent issue where HTML email notifications sent via Forminator appear as unstyled plain text. Despite designing clean HTML templates with proper <style> blocks and layout, the actual emails arrive as follows:
- Styles are completely stripped
- Content appears unformatted
- Links turn into large blue underlined URLs
- Button designs and spacing are lost
What I’ve tried so far
Here’s everything I’ve already implemented or attempted:
1. Forminator Email Notification → Text Tab
- Pasted full HTML (starting from
<!DOCTYPE html>to</html>) into the Text tab of the email message field. - Ensured no leftover Visual tab content.
2. Added MU Plugin Snippet (From WPMUDEV Support)
- Created
forminator-html-mail.phpinside/wp-content/mu-plugins/ - Code included:
wp_mail_content_typefilterforminator_custom_form_mail_user_messageandforminator_custom_form_mail_admin_message- Correct form IDs were specified (22390 and 22843)
- Verified plugin was visible in Plugins → Must-Use
Still, the emails showed plain text rendering.
3. Tried Rendering via
[wpmu_mail_render] Shortcode
Followed your documentation that uses:
Output buffering (<code inline=””>ob_start() with return of <code inline=””>$end_result)
HTML placed between <code inline=””>[wpmu_mail_render] and <code inline=””>[/wpmu_mail_render]
Used filters like forminator_replace_variables and wpmudev_render_macros_html
Still no visual formatting in email. HTML showed as-is or broken.
4. Tried FluentSMTP Plugin
- Installed FluentSMTP to ensure reliable email sending
- SMTP was configured correctly (Hostinger/Gmail)
- Emails delivered reliably, but still stripped of HTML styling when sent from Forminator
5. Tried WPCode PHP Snippet with wp_mail()
- Used
forminator_custom_form_submit_before_set_fieldshook - Built a fully formatted HTML email
- Sent via
wp_mail()manually, bypassing Forminator’s native notification - Fields were dynamically mapped (
$entry['name-1-first-name'], etc.)
How can I definitively send a well-formatted HTML email with inline CSS and a button on form submission in Forminator?
- Is there a hidden limitation in Forminator email notifications that strips all styles?
- Can you confirm what rendering engine/Forminator hook is responsible for sanitising or altering email content?
- Is there a recommended hook or method to allow raw HTML emails using core features or MU plugin override?
I’d appreciate any help on making this work — even a direct code-based way to hook into email rendering and override sanitisation would be helpful.
The HTML code in use:
\<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>bioSEA Toolkit Download</title>
<style>
body {
background-color: #f4f5ff;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
.email-container {
max-width: 640px;
margin: auto;
background-color: #ffffff;
border-radius: 8px;
overflow: hidden;
}
.header {
padding: 20px;
text-align: center;
background-color: #f4f5ff;
}
.header img {
max-height: 60px;
height: auto;
}
.content {
padding: 30px 40px;
color: #2f1c6a;
}
.content h1 {
font-size: 24px;
margin-bottom: 20px;
font-weight: bold;
color: #2f1c6a;
}
.content p {
font-size: 16px;
line-height: 1.6;
}
.btn-wrap {
text-align: center;
margin: 30px 0;
}
.download-btn {
display: inline-block;
background-color: #000000;
color: #ffffff;
padding: 14px 22px;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border-radius: 6px;
}
.download-btn svg {
vertical-align: middle;
margin-left: 6px;
margin-bottom: 2px;
}
.footer {
padding: 20px;
text-align: center;
font-size: 12px;
color: #888888;
background-color: #f4f5ff;
}
.footer img {
max-height: 40px;
height: auto;
margin-top: 10px;
pointer-events: none;
}
</style>
</head>
<body>
<div class="email-container">
<div class="header">
<img src="https://biomimicry.biosea.sg/wp-content/uploads/2022/04/bioSEA-icon.png" alt="bioSEA logo">
</div>
<div class="content">
<p><strong>{name-1-first-name} {name-1-last-name}</strong> ,</p>
<h3>Your Biomimicry Toolkit is ready!</h3>
<p>Thank you for your interest in biomimicry. We're excited to share our exclusive toolkit to support your journey in sustainable design and innovation.</p>
<div class="btn-wrap">
<a class="download-btn" href="#" download>
Download the e-book <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="20" width="20" viewBox="0 0 24 24">
<path d="M5 20h14v-2H5v2zm7-18v12l5-5h-3V4h-4v5H7l5 5z"/>
</svg>
</a>
</div>
<p>If you have any questions or would like more resources, feel free to reach out to us at any time.</p>
</div>
<div class="footer">
© 2025 bioSEA. All rights reserved.<br>
<img src="https://biomimicry.biosea.sg/wp-content/uploads/2022/04/bioSEA-1-1-e1651082512917.png" alt="bioSEA logo">
</div>
</div>
</body>
</html>Links: This is how it should look: https://drive.google.com/file/d/1Ejvla8YgkT9NrgXFzWqiPFYlTFCyP3xJ/view?usp=sharing
This is how it ends up looking:
https://drive.google.com/file/d/1BFKZ7h1dsVy0zzhfeQ7o6D9qBgKsm4Nz/view?usp=sharing
Kindly provide solution to this at the earliest possible.