Hi there - I’ve set up a Bricks form and it’s working great, but when I select “html” for the confirmation email content, and paste my html inside the content block, it still just sends an inline plain text email. Am I doing something wrong?
My set-up:
My full html:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“https://www.w3.org/1999/xhtml”>
<head>
<title>Test Email Sample</title>
<meta http–equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<meta http–equiv=“X-UA-Compatible” content=“IE=edge” />
<meta name=“viewport” content=“width=device-width, initial-scale=1.0 “ />
<style>
body {
font-family: sans-serif;
font-size: 13px;
line-height: 150%;
}
a:link {
color: #000000;
background: none;
}
a: :active {
color: #000000;
background: none;
}
a: :visited {
color: #000000;
background: none;
}
a:hover {
color: #000000;
background: #faf028;
}
</style>
</head>
<body style=“margin:0px; padding:0px;”>
<p>Hi {{df1cee}}!</p>
<p>We've received your message below and will get back you in two shakes of a lamb's tail ♥</p>
<p style="font-style: italic;">"{{97d229}}"</p>
<span color="#000000">Thanks,</span><br>
<span color="#000000"><b>Leigh Hunter</b></span><br>
<span color="#000000" face="Times New Roman"><i>Company Director</i></fspanont><br><br>
<span style="caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0);"><b>mobile</b> <a style="text-decoration: none;" href="tel:+27824274334">+27(82) 427 4334 </a></span><br>
<span style="caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0);"><b>email</b> <a style="text-decoration: none;"href="https://mailto:leigh@milcdesign.co.za">leigh@milcdesign.co.za </a></span><br><br>
<span color="#000000"><a href="https://milcdesign.co.za"><img src="https://milcdesign.co.za/wp-content/uploads/2024/02/milc-email-logo.png" width="100"></a></span><br>
<table style="margin: 5px 0 10px 0; display: block; width: 100% !important; height: 10px; background: #000000;"></table>
<span style="font-size: 10px;" color="#747474">This email and any attachments are confidential and may contain privileged information. If you are not the intended recipient, please notify the sender immediately and delete this email and any attachments. Any unauthorized use, disclosure, or copying of this email is strictly prohibited. The information in this email is not intended to be a legally binding offer or contract. It is for informational purposes only. The sender reserves the right to change the information in this email at any time without notice. The information in this email is protected by copyright. All rights reserved.</span>
</body>
</html>
I have used some other email template as confirmation email html which works great, the problem im experiencing is that I cannot use the same format to send html email to the main receiver, as it is breaking the email. I probably must report it as a bug. feel free to see the original content of the html email which you can adapt or compare with your email:
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title>Confirm Your Email</title>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<style>
table {border-collapse: collapse;}
.spacer,.divider {mso-line-height-rule:exactly;}
td,th,div,p,a {font-size: 13px; line-height: 22px;}
td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family:"Segoe UI",Helvetica,Arial,sans-serif;}
</style>
<![endif]-->
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans');
@media only screen {
.col, td, th, div, p {font-family: "Open Sans",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;}
.webfont {font-family: "Lato",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;}
}
img {border: 0; line-height: 100%; vertical-align: middle;}
#outlook a, .links-inherit-color a {padding: 0; color: inherit;}
.col {font-size: 13px; line-height: 22px; vertical-align: top;}
.hover-scale:hover {transform: scale(1.2);}
.star:hover a, .star:hover ~ .star a {color: #FFCF0F!important;}
@media only screen and (max-width: 600px) {
u ~ div .wrapper {min-width: 100vw;}
.wrapper img {width: 100%!important; height: auto!important;}
.container {width: 100%!important; -webkit-text-size-adjust: 100%;}
}
@media only screen and (max-width: 480px) {
.col {
box-sizing: border-box;
display: inline-block!important;
line-height: 20px;
width: 100%!important;
}
.col-sm-1 {max-width: 25%;}
.col-sm-2 {max-width: 50%;}
.col-sm-3 {max-width: 75%;}
.col-sm-third {max-width: 33.33333%;}
.col-sm-auto {width: auto!important;}
.col-sm-push-1 {margin-left: 25%;}
.col-sm-push-2 {margin-left: 50%;}
.col-sm-push-3 {margin-left: 75%;}
.col-sm-push-third {margin-left: 33.33333%;}
.full-width-sm {display: table!important; width: 100%!important;}
.stack-sm-first {display: table-header-group!important;}
.stack-sm-last {display: table-footer-group!important;}
.stack-sm-top {display: table-caption!important; max-width: 100%; padding-left: 0!important;}
.toggle-content {
max-height: 0;
overflow: auto;
transition: max-height .4s linear;
-webkit-transition: max-height .4s linear;
}
.toggle-trigger:hover + .toggle-content,
.toggle-content:hover {max-height: 999px!important;}
.show-sm {
display: inherit!important;
font-size: inherit!important;
line-height: inherit!important;
max-height: none!important;
}
.hide-sm {display: none!important;}
.align-sm-center {
display: table!important;
float: none;
margin-left: auto!important;
margin-right: auto!important;
}
.align-sm-left {float: left;}
.align-sm-right {float: right;}
.text-sm-center {text-align: center!important;}
.text-sm-left {text-align: left!important;}
.text-sm-right {text-align: right!important;}
.nav-sm-vertical .nav-item {display: block!important;}
.nav-sm-vertical .nav-item a {display: inline-block; padding: 5px 0!important;}
.h1 {font-size: 32px !important;}
.h2 {font-size: 24px !important;}
.h3 {font-size: 16px !important;}
.borderless-sm {border: none!important;}
.height-sm-auto {height: auto!important;}
.line-height-sm-0 {line-height: 0!important;}
.overlay-sm-bg {background: #232323; background: rgba(0,0,0,0.4);}
.p-sm-0 {padding: 0!important;}
.p-sm-8 {padding: 8px!important;}
.p-sm-16 {padding: 16px!important;}
.p-sm-24 {padding: 24px!important;}
.pt-sm-0 {padding-top: 0!important;}
.pt-sm-8 {padding-top: 8px!important;}
.pt-sm-16 {padding-top: 16px!important;}
.pt-sm-24 {padding-top: 24px!important;}
.pr-sm-0 {padding-right: 0!important;}
.pr-sm-8 {padding-right: 8px!important;}
.pr-sm-16 {padding-right: 16px!important;}
.pr-sm-24 {padding-right: 24px!important;}
.pb-sm-0 {padding-bottom: 0!important;}
.pb-sm-8 {padding-bottom: 8px!important;}
.pb-sm-16 {padding-bottom: 16px!important;}
.pb-sm-24 {padding-bottom: 24px!important;}
.pl-sm-0 {padding-left: 0!important;}
.pl-sm-8 {padding-left: 8px!important;}
.pl-sm-16 {padding-left: 16px!important;}
.pl-sm-24 {padding-left: 24px!important;}
.px-sm-0 {padding-right: 0!important; padding-left: 0!important;}
.px-sm-8 {padding-right: 8px!important; padding-left: 8px!important;}
.px-sm-16 {padding-right: 16px!important; padding-left: 16px!important;}
.px-sm-24 {padding-right: 24px!important; padding-left: 24px!important;}
.py-sm-0 {padding-top: 0!important; padding-bottom: 0!important;}
.py-sm-8 {padding-top: 8px!important; padding-bottom: 8px!important;}
.py-sm-16 {padding-top: 16px!important; padding-bottom: 16px!important;}
.py-sm-24 {padding-top: 24px!important; padding-bottom: 24px!important;}
}
</style>
</head>
<body style="box-sizing:border-box;margin:0;padding:0;width:100%;word-break:break-word;-webkit-font-smoothing:antialiased;">
<div style="display:none;font-size:0;line-height:0;"><!-- Add your inbox preview text here --></div>
<table class="wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="px-sm-16" align="center" bgcolor="#EEEEEE">
<table class="container" cellpadding="0" cellspacing="0" role="presentation" width="600">
<tr>
<td class="px-sm-8" align="left" bgcolor="#EEEEEE">
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">‌</div>
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col" align="center" width="100%">
<a href="https://example.com">
<img src="https://dummyimage.com/188x84/0CBACF/FFFFFF" alt="Header Logo" width="94">
</a>
</td>
</tr>
</table>
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">‌</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" bgcolor="#EEEEEE" class="px-sm-16">
<table class="container" cellpadding="0" cellspacing="0" role="presentation" width="600">
<tr>
<td bgcolor="#0072FF" style="background: linear-gradient(to right, #00C6FF, #0072FF);">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
<v:fill type="gradient" color="#0072FF" color2="#00C6FF" angle="90" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<div><![endif]-->
<div class="spacer line-height-sm-0 py-sm-16" style="line-height: 32px;">‌</div>
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" class="px-sm-16" style="padding: 0 96px;">
<h1 class="webfont h1" style="color: #FFFFFF; font-size: 36px; font-weight: 300; line-height: 100%; margin: 0;">Confirm your email</h1>
</td>
</tr>
</table>
<div class="spacer line-height-sm-0 py-sm-16" style="line-height: 40px;">‌</div>
<!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="px-sm-16" align="center" bgcolor="#EEEEEE">
<table class="container" cellpadding="0" cellspacing="0" role="presentation" width="600">
<tr>
<td class="px-sm-8" align="left" bgcolor="#FFFFFF" style="padding: 0 24px;">
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">‌</div>
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col px-sm-16" align="center" width="100%" style="padding: 0 64px;">
<h2 style="color: #000; font-size: 20px; font-weight: 300; line-height: 28px; margin: 0 0 24px;">Hi John,</h2>
<p style="color: #888888; font-size: 16px; line-height: 24px; margin: 0;">You just created a new customer account at Sartre Store. All you have to do now is activate it:</p>
<div class="spacer" style="line-height: 32px;">‌</div>
<table cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="webfont hover-scale" bgcolor="#0072FF" style="border-radius: 3px; transition: all 0.3s ease-in-out 0s; mso-padding-alt: 6px 32px 12px;">
<a href="https://example.com" style="color: #FFFFFF; display: inline-block; font-size: 14px; font-weight: 700; padding: 12px 32px; text-decoration: none;">Activate my account</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">‌</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="px-sm-16" align="center" bgcolor="#EEEEEE">
<table class="container" cellpadding="0" cellspacing="0" role="presentation" width="600">
<tr>
<td class="divider py-sm-16 px-sm-16" bgcolor="#FFFFFF" style="padding: 24px 32px;">
<div style="background: #EEEEEE; height: 1px; line-height: 1px;">‌</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="px-sm-16" align="center" bgcolor="#EEEEEE">
<table class="container" cellpadding="0" cellspacing="0" role="presentation" width="600">
<tr>
<td class="px-sm-8" bgcolor="#FFFFFF" style="padding: 0 24px;">
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">‌</div>
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col" align="center" width="100%" style="padding: 0 8px;">
<div>
<img src="https://dummyimage.com/188x42" alt="Footer logo" width="94">
</div>
<div class="spacer" style="line-height: 12px;">‌</div>
<p style="color: #888888; margin: 0;">
© 2018 Sartre Email. All Rights Reserved.
</p>
<p class="links-inherit-color" style="color: #888888; margin: 0;">
126-130 Crosby Street, Soho New York City, NY 10012, U.S.
</p>
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">‌</div>
<div>
<a href="https://example.com" style="text-decoration: none;">
<img src="pinterest-light.png" alt="Pinterest" width="32">
</a>
<a href="https://example.com" style="text-decoration: none;">
<img src="twitter-light.png" alt="Twitter" width="32">
</a>
<a href="https://example.com" style="text-decoration: none;">
<img src="instagram-light.png" alt="YouTube" width="32">
</a>
</div>
<div class="spacer" style="line-height: 16px;">‌</div>
</td>
</tr>
</table>
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">‌</div>
</td>
</tr>
<tr>
<td class="px-sm-8" bgcolor="#EEEEEE" style="padding: 0 24px;">
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">‌</div>
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col" align="center" width="100%" style="padding: 0 8px;">
<p style="color: #888888; margin: 0;">
Questions? Reply to this email or contact us at <a href="https://example.com" style="color: #888888; text-decoration: underline;">store@sartreapp.com</a>
</p>
</td>
</tr>
</table>
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">‌</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="wrapper" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="px-sm-16" align="center" bgcolor="#EEEEEE">
<table class="container" cellpadding="0" cellspacing="0" role="presentation" width="600">
<tr>
<td class="spacer height-sm-auto py-sm-8" bgcolor="#EEEEEE" height="24"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
also, on another look at your email you seen to be using curly quote marks and they should be straight ones, just a thought - maybe this is breaking your email??
Thanks so much for this will df try it out 
