Customizing design and implementation
To help with setup, we've provided an example of how you can add to the code to include the survey question, "very likely" and "very unlikely" labels, and responsive design to show the scores vertically on mobile.
This particular example comes directly from the code we use for our own emails
Code to be placed in body tag:
<table border="0" cellpadding="0" cellspacing="0" class="q1" width="540">
<tbody>
<tr>
<td align="center" class="q11" style="font-size:22px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:normal;line-height:30px;color:#111111;">How likely are you to recommend Zenloop to a friend or colleague?</td>
</tr>
<tr>
<td height="30"> </td>
</tr>
<tr>
<td align="center">
<table bgcolor="#f4f4f4" border="0" cellpadding="0" cellspacing="0" class="q1" dir="rtl" style="direction:rtl;">
<tbody>
<tr>
<th align="center" class="button" dir="ltr" height="40" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/10" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">10 <span class="b010" style="display: none;">- Very likely</span></a></th>
<th bgcolor="#ffffff" class="h" width="2"> </th>
<th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/9" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">9</a></th>
<th bgcolor="#ffffff" class="h" width="2"> </th>
<th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/8" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">8</a></th>
<th bgcolor="#ffffff" class="h" width="2"> </th>
<th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/7" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">7</a></th>
<th bgcolor="#ffffff" class="h" width="2"> </th>
<th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/6" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">6</a></th>
<th bgcolor="#ffffff" class="h" width="2"> </th>
<th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/5" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">5</a></th>
<th bgcolor="#ffffff" class="h" width="2"> </th>
<th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/4" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">4</a></th>
<th bgcolor="#ffffff" class="h" width="2"> </th>
<th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/3" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">3</a></th>
<th bgcolor="#ffffff" class="h" width="2"> </th>
<th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/2" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">2</a></th>
<th bgcolor="#ffffff" class="h" width="2"> </th>
<th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/1" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">1</a></th>
<th bgcolor="#ffffff" class="h" width="2"> </th>
<th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/0" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">0 <span class="b010" style="display: none;">- Very unlikely</span></a></th>
</tr>
</tbody>
</table>
<img src="https://responses.zenloop.com/web/surveys/<survey_public_hash_id>/opened" height="1" width="1">
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr class="h">
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:12px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">Very unlikely</td>
<td align="right" style="font-size:12px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">Very likely</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Code to be placed in head tag:
<style type="text/css">
@media only screen and (max-width:400px) {
.q1 { width:100% !important; min-width:0 !important; }
.q11 { font-size:18px !important;line-height:26px !important;}
.button { display:block !important; width:100% !important;border-bottom:2px solid #ffffff; padding:10px; height:auto !important;}
.h { display:none !important; }
.b010 {display: inline-block !important; }
}
</style>
<!--[if gte mso 9]>
<style type="text/css">
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0; }
table td, table th { border-collapse:collapse; font-size:1px; line-height:1px; }
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</style>
<![endif]-->
Result:
Updated almost 5 years ago