Thanks Graffx Design. I like to make use of chunks myself to keep the formlister call a little bit more tidy.
Also I don't like plain looking emails, so i use this as a boilerplate for my &ccSenderTpl
and &formTpl
. I hope it is usefull for someone. HTML emails are my worst nightmare.
Just change the /assets/images/svg/logo.svg to your logo, change the details in the 'footer', and if you want to change the font just do a find and replace on lato,arial
Nice to see a English forum BTW, cheers! 😃
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, shrink-to-fit=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="date=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="email=no" />
<meta name="x-apple-disable-message-reformatting" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!--<![endif]-->
<style type="text/css">
.kop1 span, .kop3 span{text-transform:lowercase;}
/****** EMAIL CLIENT BUG FIXES - BEST NOT TO CHANGE THESE ********/
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
}
body {
padding: 0 !important;
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
h2,h3{line-height:22px;}
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
.gmailfix {
width: 0 !important;
display: none !important;
}
img {
display: block;
line-height: 100%;
border: 0;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
table, td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
table td {
padding: 0;
border-collapse: collapse;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
}
table table table {
table-layout: auto;
}
*[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
}
.x-gmail-data-detectors, .x-gmail-data-detectors *, .aBn {
border-bottom: 0 !important;
cursor: default !important;
}
.a6S {
display: none !important;
opacity: 0.01 !important;
}
img.g-img+div {
display: none !important;
}
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
.button-link {
text-decoration: none !important;
}
.show-image {
display: none;
width: 0;
visibility: hidden;
}
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
/* iPhone 6 and 6+ */
.center-on-narrow {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.button-text {
font-size: 20px !important;
line-height: 24px !important;
}
}
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
.center-on-narrow {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
.social {
width: 40px !important;
}
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.hidegmailfix {
width: 0 !important;
display: none !important;
}
}
@media screen and (max-width: 695px) {
/* custom */
.mobileHide{display:none;}
.kop1{
font-size:36px!important;
line-height:36px!important;
}
.bmw-mini{
display:block!important;
text-align:center!important;
width:100%!important;
}
.hidegmailfix {
width: 0 !important;
display: none !important;
}
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.button {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.button-text {
font-size: 18px !important;
line-height: 22px !important;
}
.text-size {
font-size: 16px !important;
line-height: 21px !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
.column, .column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
.column-center {
text-align: center !important;
}
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
.hide {
display: none !important;
}
.show-image {
display: block !important;
width: 100% !important;
visibility: visible !important;
}
table.center-on-narrow {
display: inline-block !important;
} /****** Add client specific media queries styles here ********/
}
</style>
<!--[if !mso]><!-->
<style type="text/css">
* {
font-family:lato,sans-serif!important; font-weight:400;
}
</style>
<!--<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
/* Your Outlook-specific CSS goes here. */
table {border-collapse: collapse !important}
</style>
<![endif]-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="margin: 0; padding-top:0;padding-bottom:0;padding-right:0;padding-left:0; mso-line-height-rule: exactly; background-color:white;" width="100%" yahoo="yahoo">
<!-- logo -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#FFFFFF" style="width:680px;max-width:680px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="padding:5px 40px 15px 40px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="vertical-align:top;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;">
<tbody>
<tr>
<td>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="270" style="display:inline-block;vertical-align:top;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="left" style="padding:0;" valign="top">
<img src="/assets/images/svg/logo.svg" width="270" alt="Logo" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- end logo -->
<!-- message tekst -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#FFFFFF" style="width:680px; max-width:680px;">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="vertical-align:top; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; mso-table-lspace:0pt; mso-table-rspace: 0pt;">
<tbody>
<tr>
<td style="font-family: lato,arial!important;mso-line-height-rule:exactly;font-size:14px;line-height:18px;color:#262626;padding:0 40px 0;">
<br><br>
<h3 style="font-family: lato,arial!important;mso-line-height-rule:exactly;font-size:20px;line-height:32px;color:black;margin:0;padding-bottom:20px;">You received a new message from [+name.value+].</h3>
<span style="font-family: lato,arial!important;mso-line-height-rule:exactly;font-size:14px;line-height:18px;color:#262626;padding:0;" class="text-size">
<label style="font-weight:800;min-width:200px;display:inline-block;">Name:</label><span> [+name.value+]</span><br>
<label style="font-weight:800;min-width:200px;display:inline-block;">Email:</label><span> [+email.value+]</span><br>
<label style="font-weight:800;min-width:200px;display:inline-block;">Phonenumber:</label><span> [+tel.value+]</span><br>
<label style="font-weight:800;min-width:200px;display:inline-block;">Subject</label><span> [+subject.value+]</span><br>
<br>
<p>[+msg.value+]</p>
<br>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--end message tekst -->
<!-- footer -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#FFFFFF" style="color:black; font-family: lato,arial!important; font-size:12px; line-height:18px; width:680px;max-width:680px; background: #fff;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="padding:0 40px 0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="vertical-align:top;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;">
<tbody>
<tr>
<td>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="display:inline-block;vertical-align:top;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0pt;mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="left" style="padding:0;" valign="top">
<span style="font-weight:600;">ACME</span> company<br>
+31 (0) 101 234 567 <span class="mobileHide"> | </span> <span><a href="mailto:acme@company.com" style="text-decoration:none!important;color:black!important">acme@company.com</a></span> <span class="mobileHide"> | </span> Streetname <span class="mobileHide"> | </span> Adress <br><br>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- end footer -->
<!--Gmail Iphone Fix -->
<table border="0" cellpadding="0" cellspacing="0"><tr><td class="hidegmailfix" style="min-width:500px;"><div class="gmailfix" style="white-space:nowrap; font:15px courier; line-height:0;"> </div></td></tr></table>
</body>
</html>