// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
$header_image = wpforms_setting( 'email-header-image', false );
$background_color = wpforms_setting( 'email-background-color', '#e9eaec' );
$text_direction = is_rtl() ? 'rtl' : 'ltr';
<html dir="<?php echo esc_attr( $text_direction ); ?>" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo esc_html( get_bloginfo( 'name' ) ); ?></title>
border-collapse:collapse;
body,#bodyTable,#bodyCell{
-ms-interpolation-mode:bicubic;
mso-line-height-rule:exactly;
a[href^=tel],a[href^=sms]{
p,a,li,td,body,table,blockquote{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
.ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font{
a[x-apple-data-detectors]{
color:inherit !important;
text-decoration:none !important;
font-size:inherit !important;
font-family:inherit !important;
font-weight:inherit !important;
line-height:inherit !important;
max-width:600px !important;
table-layout:fixed !important;
/***** Make theme edits below if needed *****/
/* Page - Background Style */
background-color:<?php echo esc_attr( $background_color ); ?>;
font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
/* Header - Header Style */
background-color:#FFFFFF;
border: 1px solid #c1c1c1;
#templateBody .mcnTextContent,
#templateBody .mcnTextContent p{
font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
#templateBody .mcnTextContent a,
#templateBody .mcnTextContent p a{
text-decoration:underline;
/* Footer - Footer Style */
background-color:<?php echo esc_attr( $background_color ); ?>;
/* Footer - Footer Text */
#templateFooter .mcnTextContent,
#templateFooter .mcnTextContent p{
font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
/* Footer - Footer Link */
#templateFooter .mcnTextContent a,
#templateFooter .mcnTextContent p a{
text-decoration:underline;
@media only screen and (min-width:768px){
@media only screen and (max-width: 480px){
body,table,td,p,a,li,blockquote{
-webkit-text-size-adjust:none !important;
@media only screen and (max-width: 480px){
min-width:100% !important;
@media only screen and (max-width: 680px){
padding:20px 20px !important;
@media only screen and (max-width: 480px){
.mcnTextContentContainer{
max-width:100% !important;
/* Rich Text compatibility - image alignment. */
.mcnTextContentContainer p::after {
.mcnTextContentContainer p .alignleft, .mcnTextContentContainer li .alignleft {
.mcnTextContentContainer p .aligncenter, .mcnTextContentContainer li .aligncenter {
.mcnTextContentContainer p .alignright, .mcnTextContentContainer li .alignright {
/* Rich text compatibility - table */
.wpforms-iframe table th,
.wpforms-iframe table td {
border: 1px solid currentColor;
.mcnTextContentContainer li {
list-style-position: inside;
.wpforms-order-summary-container {
.wpforms-order-summary-container table.wpforms-order-summary-preview {
border-collapse: collapse;
.wpforms-order-summary-container table.wpforms-order-summary-preview tbody {
.wpforms-order-summary-container table.wpforms-order-summary-preview tr th,
.wpforms-order-summary-container table.wpforms-order-summary-preview tr td {
.wpforms-order-summary-container table.wpforms-order-summary-preview .wpforms-order-summary-item-label {
.wpforms-order-summary-container table.wpforms-order-summary-preview .wpforms-order-summary-item-quantity {
.wpforms-order-summary-container table.wpforms-order-summary-preview .wpforms-order-summary-item-price {
.wpforms-order-summary-container table.wpforms-order-summary-preview tr.wpforms-order-summary-placeholder td {
.wpforms-order-summary-container table.wpforms-order-summary-preview tr {
border-bottom-width: 1px;
border-bottom-style: solid;
.wpforms-order-summary-container table.wpforms-order-summary-preview tr th,
.wpforms-order-summary-container table.wpforms-order-summary-preview tr td {
.wpforms-order-summary-container table.wpforms-order-summary-preview tr.wpforms-order-summary-preview-subtotal td,
.wpforms-order-summary-container table.wpforms-order-summary-preview tr.wpforms-order-summary-preview-total td {
.wpforms-order-summary-container table.wpforms-order-summary-preview tr.wpforms-order-summary-preview-total {
.wpforms-order-summary-container table.wpforms-order-summary-preview caption,
.wpforms-order-summary-container table.wpforms-order-summary-preview .wpforms-order-summary-placeholder-hidden,
.wpforms-order-summary-container table.wpforms-order-summary-preview .wpforms-order-summary-item-quantity-label-short {
.wpforms-order-summary-container table.wpforms-order-summary-preview tr.wpforms-order-summary-preview-coupon-total td.wpforms-order-summary-item-price {
<body style="height: 100%;margin: 0;padding: 0;width: 100%;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: <?php echo esc_attr( $background_color ); ?>;">
<!-- Don't forget to run final template through http://templates.mailchimp.com/resources/inline-css/ -->
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;height: 100%;margin: 0;padding: 0;width: 100%;background-color: <?php echo esc_attr( $background_color ); ?>;">
<td align="center" valign="top" id="bodyCell" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;height: 100%;margin: 0;padding: 50px 50px;width: 100%;">
<!-- BEGIN TEMPLATE // -->
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
<td align="center" valign="top" width="600" style="width:600px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;border: 0;max-width: 600px !important;">
if ( ! empty( $header_image ) ) {
echo '<tr><td valign="top" align="center" id="templateHeader" style="padding-bottom:20px;text-align:center;">';
echo '<img src="' . esc_url( $header_image ) . '" alt="' . esc_attr( get_bloginfo( 'name' ) ) . '" />';
<td valign="top" id="templateBody" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #FFFFFF;border-top: 0;border: 1px solid #c1c1c1;padding-top: 0;padding-bottom: 0px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tbody class="mcnTextBlockOuter">
<td valign="top" class="mcnTextBlockInner" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" class="mcnTextContentContainer">
<td valign="top" style="padding-top: 30px;padding-right: 30px;padding-bottom: 30px;padding-left: 30px;" class="mcnTextContent">