Accessible Quick Start template
Accessible Quick Start template has a single column, a header image, and the Quick Start survey.
Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Medallia HTML Template</title>
<style type="text/css">
/* Take care of image borders and formatting */
img { max-width:600px !important; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; }
a img { border:none; }
/* Responsive Styles*/
@media only screen and (max-width:600px){
/* set column image maximum width for mobile screens */
img[class="columnImage"]{ height:auto !important; max-width:280px !important; width:100% !important; }
table[id="emailContainer"]{ width:100% !important; }
table[class="columnContainer"]{ width:100% !important; }
table[class="mobileButton"] { width:60% !important; }
td[class="columnSingle"] { display:block !important; width:100% !important; }
}
</style>
</head>
<body bgcolor="#efefef" style="background-color:#efefef; -webkit-text-size-adjust: none; padding:0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" id="emailContainer" style="display:block; max-width:600px; background-color:#ffffff; width:100%!important;">
<tr><!-- START EMAIL HEADER -->
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!--HEADER IMAGE
Images need to have the width and height specified. The style property "display:block" is necessary to get rid of unwanted margins in some older email clients. Remember that email clients have images turned off by default, alternate text ("alt-text") is necessary, The color, background-color and font styles are for the alt-text in case images are turned off. It is best to reference the image through the images set in the LNF instead of hard-coding the image URL -->
<img src="http://placehold.it/600x150" width="600" height="150" border="0" alt="some text" style="display:block; color:#efefef; text-align:center; font-family:Arial; font-size:28px; font-weight:bold; background-color:#888888;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr><!-- END EMAIL HEADER -->
<tr><!-- START EMAIL BODY -->
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top">
<br />
<span style="font-family:Arial; font-size:16px; color:#888888;"><b>Dear $FIRSTNAME$,</b><br /><br />Thank you for choosing Some Company</span>
<br />
<br />
<span style="font-family:Arial; font-size:16px; color:#666666;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum dolor sed dolor ultrices, a viverra nulla ullamcorper. Quisque tortor ligula, molestie et enim sit amet, vehicula ornare purus. Aliquam a libero mi. Nunc sem orci, ullamcorper nec ipsum sit amet, pellentesque vestibulum velit. Curabitur condimentum orci a erat dapibus vestibulum.
</span>
<br />
<br />
</td>
</tr>
<tr>
<td align="left" valign="top"><!-- Set main horizontal and vertical alignment. Horizontal: left, center, right; Vertical: top, middle, bottom -->
<span style="font-family:Arial; font-size:13px; font-weight:bold; color:#000000;">
Overall, how satisfied were you with your most recent experience at Some Company?
</span>
<br />
<br />
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left">
<span style="font-family:Arial, Verdana, Helvetica, sans-serif; font-size:13px; color: #000000;">0 Not at all Satisfied</span>
<br />
</td>
<td align="right">
<span style="font-family:Arial, Verdana, Helvetica, sans-serif; font-size:13px; color: #000000;">10 Extremely Satisfied</span>
<br />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<table class="number-scale" width="100%" border="1" cellspacing="0" cellpadding="5" style="border-style:solid;border-color:#ffffff;">
<tr>
$[0,1,2,3,4,5,6,7,8,9]:{
<td align="center" style="background-color: #000000; text-align:center;" bgcolor="#000000">
<a style="display:block; padding:5px; font-family:Arial, Verdana, Helvetica, sans-serif; text-decoration: none; color: #eeeeee; font-weight:bold; font-size: 13px;" href="$SECURE_SURVEY_URL$&_score=$it$">
<span style="font-family:Arial, Verdana, Helvetica, sans-serif; text-decoration: none; color: #eeeeee; font-weight:bold; font-size: 13px;">$it$</span>
</a>
</td>
}$
<td align="center" style="background-color: #000000; text-align:center;" bgcolor="#000000">
<a style="display:block; padding:3px; word-break:normal; font-family:Arial, Verdana, Helvetica, sans-serif; text-decoration: none; color: #eeeeee; font-weight:bold; font-size: 13px;" href="$SECURE_SURVEY_URL$&_score=10">
<span style="word-break:normal; font-family:Arial, Verdana, Helvetica, sans-serif; text-decoration: none; color: #eeeeee; font-weight:bold; font-size: 13px;">10</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
</td>
</tr>
<tr>
<td align="left" valign="top">
<span style="font-family:Arial; font-size:16px; color:#888888;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum dolor sed dolor ultrices, a viverra nulla ullamcorper. Quisque tortor ligula.
<br />
<br />
Thank you!<br />
John Doe<br />
VP, Customer Experience<br />
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr><!-- END EMAIL BODY -->
<tr><!-- START EMAIL FOOTER -->
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px; background-color:#F6F6F6; border-top-color:#EEEEEE; border-top-style:solid; border-top-width:1px;">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top" style="line-height:12px;">
<span style="font-family:Arial; font-size:12px; color:#888888;">
Please do not "Reply" to this invitation.<br /><br />
This survey invitation will expire on $EXPIRATIONDATE_PRETTY$.<br /><br />
Should you have any problems accessing or completing the survey, please visit <a href="http://surveysupport.medallia.com/s/?id=$SECURE_SURVEY_URL$" style="font-family:Arial; color:#9999ff; text-decoration:none;">surveysupport.medallia.com</a>. You received this email because you provided your email address to $COMPANY_NAME$. If you would like to opt out from receiving future surveys, please click <a href="$OPT_OUT_URL$" style="font-family:Arial; color:#9999ff; text-decoration:none;"><span style="font-family:Arial; color:#9999ff; text-decoration:none;">here</span></a>.<br /><br />
<a href="" style="font-family:Arial; color:#9999ff; text-decoration:none;">$COMPANY_NAME$ Privacy Policy</a><br /><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr><!-- END EMAIL FOOTER -->
</table>
</td>
</tr>
</table>
$TRACK_INVITE_EMAIL_OPEN$
</body>
</html>