Html & tables compared to MJML
建立於 差異永不過期
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Forms.Core.Models.FormsHtmlModel>
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Forms.Core.Models.FormsHtmlModel>
@{
@{
//This is an example email template where you can use Razor Views to send HTML emails
//This is an example email template where you can use Razor Views to send HTML emails
//You can use Umbraco.TypedContent & Umbraco.TypedMedia etc to use Images & content from your site
//You can use Umbraco.TypedContent & Umbraco.TypedMedia etc to use Images & content from your site
//directly in your email templates too
//directly in your email templates too
//Strongly Typed
//Strongly Typed
//@Model.GetValue("aliasFormField")
//@Model.GetValue("aliasFormField")
//@foreach (var color in Model.GetValues("checkboxField")){}
//@foreach (var color in Model.GetValues("checkboxField")){}
//Dynamics
//Dynamics
//@Model.DynamicFields.aliasFormField
//@Model.DynamicFields.aliasFormField
//@foreach(var color in Model.DynamicFields.checkboxField
//@foreach(var color in Model.DynamicFields.checkboxField
//Images need to be absolute - so fetching domain to prefix with images
//Images need to be absolute - so fetching domain to prefix with images
var siteDomain = Context.Request.Scheme + "://" + Context.Request.Host;
var siteDomain = Context.Request.Scheme + "://" + Context.Request.Host;
var assetUrl = siteDomain + "/App_plugins/UmbracoForms/Assets/Email-Example";
var assetUrl = siteDomain + "/App_plugins/UmbracoForms/Assets/Email-Example";
}
}
<!DOCTYPE html>
<mjml>
<html>
<mj-head>
<head>
<mj-preview>Umbraco Forms Email</mj-preview>
<title></title>
<mj-style inline="inline">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
h1 { font-size: 32px !important; line-height: 32px !important; }
<meta name="viewport" content="width=device-width, initial-scale=1">
</mj-style>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</mj-head>
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
<mj-body background-color="#f4f4f4">
<style type="text/css">
<!-- LOGO -->
/* CLIENT-SPECIFIC STYLES */
<mj-section background-color="#413659">
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
<mj-column>
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
<mj-image width="40px" src="@assetUrl/umbraco-logo.png" alt="Logo" />
img { -ms-interpolation-mode: bicubic; }
</mj-column>
</mj-section>
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
<!-- HERO -->
table { border-collapse: collapse !important; }
<mj-section background-color="#ffffff">
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
<mj-column>
<mj-text font-size="36px" font-weight="900" color="#000000" align="center">Umbraco Forms</mj-text>
/* iOS BLUE LINKS */
</mj-column>
a[x-apple-data-detectors] {
</mj-section>
color: inherit !important;
text-decoration: none !important;
<!-- COPY BLOCK -->
font-size: inherit !important;
<mj-section background-color="#F3F3F5">
font-family: inherit !important;
<mj-column background-color="#ffffff">
font-weight: inherit !important;
<mj-text font-size="18px" font-weight="400" color="#303033" line-height="1.6">
line-height: inherit !important;
This is an example email template from Umbraco Forms Razor based email templates. You can build forms using any HTML markup you wish.
}
</mj-text>
<mj-image width="600px" src="@assetUrl/sample-image.jpg" alt="CodeGarden16 Attendees" />
/* MOBILE STYLES */
</mj-column>
@@media screen and (max-width:600px){
</mj-section>
h1 {
font-size: 32px !important;
<!-- FORM RESULTS -->
line-height: 32px !important;
<mj-section background-color="#ffffff">
}
<mj-column>
}
<mj-text font-size="24px" font-weight="700" color="#000000">Form Results</mj-text>
/* ANDROID CENTER FIX */
<!-- Looping through form fields -->
div[style*="margin: 16px 0;"] { margin: 0 !important; }
<mj-raw>
</style>
@foreach (var field in Model.Fields) {
</head>
<h4 style="font-weight: 700; margin: 0; color: #000000;">@field.Name</h4>
<body style="background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;">
switch (field.FieldType) {
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom: 40px;">
case "FieldType.FileUpload.cshtml":
<!-- LOGO -->
<p style="margin-top: 0;"><a href="@siteDomain/@field.GetValue()" target="_blank" style="color: #00AEA2;">@field.GetValue()</a></p>
<tr>
break;
<td bgcolor="#413659" align="center">
case "FieldType.DatePicker.cshtml":
<!--[if (gte mso 9)|(IE)]>
DateTime dt;
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
var fieldValue = field.GetValue();
<tr>
var dateValid = DateTime.TryParse(fieldValue != null ? fieldValue.ToString() : string.Empty, out dt);
<td align="center" valign="top" width="600">
var dateStr = dateValid ? dt.ToString("f") : "";
<![endif]-->
<p style="margin-top: 0;">@dateStr</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
break;
<tr>
case "FieldType.CheckBoxList.cshtml":
<td align="center" valign="top" style="padding: 40px 10px 40px 10px;">
<p style="margin-top: 0;">
<a href="http://umbraco.com" target="_blank">
@foreach (var color in field.GetValues()) {
<img alt="Logo" src="@assetUrl/umbraco-logo.png" width="40" height="40" style="display: block; width: 40px; max-width: 40px; min-width: 40px; font-family: 'Lato', Helvetica, Arial, sans-serif; color: #ffffff; font-size: 18px;" border="0">
@color<br/>
</a>
}
</td>
</p>
</tr>
break;
</table>
default:
<!--[if (gte mso 9)|(IE)]>
<p style="margin-top: 0;">@field.GetValue()</p>
</td>
break;
</tr>
}
</table>
}
<![endif]-->
</mj-raw>
</td>
</mj-column>
</tr>
</mj-section>
<!-- HERO -->
<!-- SUPPORT CALLOUT -->
<tr>
<mj-section background-color="#03BFB3">
<td bgcolor="#413659" align="center" style="padding: 0px 10px 0px 10px;">
<mj-column>
<!--[if (gte mso 9)|(IE)]>
<mj-text font-size="20px" font-weight="700" color="#ffffff">Need more help?</mj-text>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<mj-text font-size="18px" font-weight="400" color="#ffffff">
<tr>
<a href="https://our.umbraco.org/Documentation/Add-ons/UmbracoForms/" style="color: #ffffff;">Find our documentation here</a>
<td align="center" valign="top" width="600">
</mj-text>
<![endif]-->
</mj-column>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
</mj-section>
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding: 40px 20px 20px 20px; color: #000000; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 36px; font-weight: 900; line-height: 48px;">
</mj-body>
<h1 style="font-size: 36px; font-weight: 900; margin: 0;">Umbraco Forms</h1>
</mjml>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- COPY BLOCK -->
<tr>
<td bgcolor="#F3F3F5" align="center" style="padding: 0px 10px 0px 10px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<!-- COPY -->
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #303033; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 1.6em;">
This is an example email template from Umbraco Forms Razor based email templates. You can build forms using any HTML markup you wish.
</td>
</tr>
<!-- IMAGE -->
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 0;">
<a href="http://umbraco.com" target="_blank">
<img alt="CodeGarden16 Attendees" src="@assetUrl/sample-image.jpg" width="600" style="display: block; width: 100%; max-width: 100%; min-width: 100px;" border="0" />
</a>
</td>
</tr>
<!-- COPY HEADING -->
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 40px 30px 0px 30px; color: #000000; font-family: 'Lato', Helvetica, Arial, sans-serif; line-height: 25px;">
<h2 style="font-size: 24px; font-weight: 700; margin: 0;">Form Results</h2>
</td>
</tr>
<!-- COPY -->
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #303033; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
@foreach (var field in Model.Fields)
{
<h4 style="font-weight: 700; margin: 0; color: #000000;">@field.Name</h4>
switch (field.FieldType)
{
case "FieldType.FileUpload.cshtml":
<p style="margin-top: 0;"><a href="@siteDomain/@field.GetValue()" target="_blank" style="color: #00AEA2;">@field.GetValue()</a></p>
break;
case "FieldType.DatePicker.cshtml":
DateTime dt;
var fieldValue = field.GetValue();
var dateValid = DateTime.TryParse(fieldValue != null ? fieldValue.ToString() : string.Empty, out dt);
var dateStr = dateValid ? dt.ToString("f") : "";
<p style="margin-top: 0;">@dateStr</p>
break;
case "FieldType.CheckBoxList.cshtml":
<p style="margin-top: 0;">
@foreach (var color in field.GetValues())
{
@color<br/>
}
</p>
break;
default:
<p style="margin-top: 0;">@field.GetValue()</p>
break;
}
}
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- SUPPORT CALLOUT -->
<tr>
<td bgcolor="#F3F3F5" align="center" style="padding: 30px 10px 0px 10px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<!-- HEADLINE -->
<tr>
<td bgcolor="#03BFB3" align="center" style="padding: 30px 30px 30px 30px; color: #ffffff; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<h2 style="font-size: 20px; font-weight: 700; color: #ffffff; margin: 0; margin-bottom: 5px;">Need more help?</h2>
<p style="margin: 0;"><a href="https://our.umbraco.org/Documentation/Add-ons/UmbracoForms/" target="_blank" style="color: #ffffff;">Find our documentation here</a></p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>