Developer reference
Multi-option survey scale for research emails, NPS-style follow-ups, and feedback collection.
Tags: survey · feedback · research · scale
Rendering screenshot
Preview frame reflects current component rendering and real spacing proportions for production email QA.
Live preview
This preview is rendered from compiled HTML output so you can inspect the actual email structure, not a static mock-up.
Client support
Rendering support notes across major email clients.
| Client | Status | Notes |
|---|---|---|
| Gmail (Web + Mobile) | Tested | Primary spacing, stack order, and CTA rendering stay stable in Gmail web and mobile views. |
| Outlook Desktop (Windows) | Partial | Survey-button rows render acceptably, though Outlook can make the option grid feel tighter and more button-heavy. |
| Apple Mail (macOS + iOS) | Tested | No additional notes. |
| Yahoo Mail | Tested | No additional notes. |
Related blocks
These components are closely related by category or usage pattern and are useful when assembling a full email flow.
Content Blocks
Compact app-download section with platform badges for onboarding, support, and activation emails.
Content Blocks
Edge-to-edge split section combining feature copy with app download routes.
Content Blocks
Two-column editorial or feature-copy block for balanced reading sections.
Source code
The source and compiled HTML shown below map directly to the rendered preview above. This keeps preview, MJML, and HTML handoff output aligned.
Snippet assembly: place this block inside the same <mj-body> as your other snippets, then stack sections in send order.
Component block only. Use this when assembling an email from multiple reusable sections inside a project that already includes the shared MJML classes.
<mj-wrapper padding="0" full-width="full-width" />
<mj-section padding="28px 34px" />
<mj-column padding="0" />
<mj-image padding="0 0 14px 0" />
<mj-text padding="0 0 12px 0" font-size="16px" line-height="28px" color="#1a1a1a" />
<mj-button padding="0" font-size="16px" font-weight="700" border-radius="999px" inner-padding="14px 30px" />
<mj-class name="h1" font-size="42px" line-height="46px" font-weight="800" />
<mj-class name="h2" font-size="36px" line-height="40px" font-weight="800" />
<mj-class name="h3" font-size="30px" line-height="34px" font-weight="800" />
<mj-class name="h4" font-size="26px" line-height="30px" font-weight="800" />
<mj-class name="h5" font-size="22px" line-height="26px" font-weight="800" />
<mj-class name="h6" font-size="20px" line-height="24px" font-weight="800" />
<mj-class name="h1-display" font-size="56px" line-height="60px" font-weight="800" />
<mj-class name="body" font-family="'Inter', Arial, sans-serif" font-size="17px" line-height="28px" />
<mj-class name="small" font-family="'Inter', Arial, sans-serif" font-size="14px" line-height="23px" />
<mj-class name="label" font-family="'Inter', Arial, sans-serif" font-size="12px" font-weight="700" text-transform="uppercase" letter-spacing="0.12em" />
<mj-class name="bold" font-weight="700" />
<mj-class name="extrabold" font-weight="800" />
<mj-class name="white" color="#ffffff" />
<mj-class name="light" color="#94a3b8" />
<mj-class name="medium" color="#4a5568" />
<mj-class name="dark" color="#1a1a1a" />
<mj-class name="text-primary" color="#1a1a1a" />
<mj-class name="text-muted" color="#4a5568" />
<mj-class name="thblue" color="#2f67ef" />
<mj-class name="whitebg" background-color="#ffffff" />
<mj-class name="superlightbg" background-color="#f8fafc" />
<mj-class name="thbluebg" background-color="#2f67ef" />
<mj-class name="blackbg" background-color="#0f172a" />
<mj-class name="darkbg" background-color="#102447" />
<mj-class name="rocketbluebg" background-color="#183b7a" />
<mj-class name="e3bluebg" background-color="#183b7a" />
<mj-class name="transbg" background-color="transparent" />
<mj-class name="badge" font-family="'Inter', Arial, sans-serif" font-size="12px" line-height="16px" font-weight="700" letter-spacing="0.12em" text-transform="uppercase" />
<mj-class name="button" font-weight="700" />
</mj-attributes>
<mj-style>
.border-top-light { border-top: 1px solid rgba(26, 26, 26, 0.1) !important; }
.border-bottom-light { border-bottom: 1px solid rgba(26, 26, 26, 0.1) !important; }
.grayscale img { filter: grayscale(100%); }
</mj-style>
<mj-raw>
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
</mj-raw>
</mj-head>
<mj-body background-color="#f3f4f6">
<!-- #-START-# survey superlight -->
<mj-wrapper mj-class="superlightbg" full-width="full-width">
<mj-section>
<mj-column>
<mj-spacer height="20px" />
<mj-text mj-class="small dark" align="center">QUESTION 1 OF 5</mj-text>
<mj-text mj-class="body dark" align="center">To what extent do you agree or disagree with the following statement?</mj-text>
<mj-text mj-class="h2 dark" align="center">This product saves our team time on repetitive email work.</mj-text>
<mj-spacer height="20px" />
</mj-column>
</mj-section>
</mj-wrapper>
<mj-wrapper mj-class="superlightbg" full-width="full-width">
<mj-section css-class="surveywrap">
<mj-column css-class="survey">
<mj-button mj-class="body whitebg dark button" border="1px solid #dcdcdc" height="59px" width="110px" padding="0" inner-padding="0 20px" align="left">Strongly agree</mj-button>
</mj-column>
<mj-column css-class="survey">
<mj-button mj-class="body whitebg dark button" border="1px solid #dcdcdc" height="59px" width="110px" padding="0" inner-padding="0 20px" align="left">Agree</mj-button>
</mj-column>
<mj-column css-class="survey">
<mj-button mj-class="body whitebg dark button" border="1px solid #dcdcdc" height="59px" width="110px" padding="0" inner-padding="0 20px" align="left">Unsure</mj-button>
</mj-column>
<mj-column css-class="survey">
<mj-button mj-class="body whitebg dark button" border="1px solid #dcdcdc" height="59px" width="110px" padding="0" inner-padding="0 20px" align="left">Disagree</mj-button>
</mj-column>
<mj-column css-class="survey">
<mj-button mj-class="body whitebg dark button" border="1px solid #dcdcdc" height="59px" width="110px" padding="0" inner-padding="0 20px" align="left">Strongly disagree</mj-button>
</mj-column>
</mj-section>
</mj-wrapper>
<mj-wrapper mj-class="superlightbg" full-width="full-width">
<mj-section>
<mj-column>
<mj-spacer height="30px" />
</mj-column>
</mj-section>
</mj-wrapper>
<!-- #-END-# survey superlight -->Component-only compiled markup for block-level inspection and HTML assembly workflows.
<!-- #-START-# survey superlight -->
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#f8fafc;background-color:#f8fafc;width:100%;"
>
<tbody>
<tr>
<td>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" bgcolor="#f8fafc" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:640px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:640px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:28px 34px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:572px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
>
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
>
<tbody>
<tr>
<td
style="font-size:0px;word-break:break-word;"
>
<div
style="height:20px;line-height:20px;"
> </div>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:0 0 12px 0;word-break:break-word;"
>
<div
style="font-family:'Inter', Arial, sans-serif;font-size:14px;line-height:23px;text-align:center;color:#1a1a1a;"
>QUESTION 1 OF 5</div>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:0 0 12px 0;word-break:break-word;"
>
<div
style="font-family:'Inter', Arial, sans-serif;font-size:17px;line-height:28px;text-align:center;color:#1a1a1a;"
>To what extent do you agree or disagree with the following statement?</div>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:0 0 12px 0;word-break:break-word;"
>
<div
style="font-family:'Manrope', 'Inter', Arial, sans-serif;font-size:36px;font-weight:800;line-height:40px;text-align:center;color:#1a1a1a;"
>This product saves our team time on repetitive email work.</div>
</td>
</tr>
<tr>
<td
style="font-size:0px;word-break:break-word;"
>
<div
style="height:20px;line-height:20px;"
> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#f8fafc;background-color:#f8fafc;width:100%;"
>
<tbody>
<tr>
<td>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" bgcolor="#f8fafc" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:640px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="surveywrap-outlook" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="surveywrap-outlook" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="surveywrap" style="margin:0px auto;max-width:640px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:28px 34px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="survey-outlook" style="vertical-align:top;width:114.4px;" ><![endif]-->
<div
class="mj-column-per-20 mj-outlook-group-fix survey" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
>
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
>
<tbody>
<tr>
<td
align="left" style="font-size:0px;padding:0;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:110px;line-height:100%;"
>
<tbody>
<tr>
<td
align="center" bgcolor="#ffffff" role="presentation" style="border:1px solid #dcdcdc;border-radius:999px;cursor:auto;height:59px;mso-padding-alt:0 20px;background:#ffffff;" valign="middle"
>
<p
style="display:inline-block;width:68px;background:#ffffff;color:#1a1a1a;font-family:'Inter', Arial, sans-serif;font-size:17px;font-weight:700;line-height:28px;margin:0;text-decoration:none;text-transform:none;padding:0 20px;mso-padding-alt:0px;border-radius:999px;"
>
Strongly agree
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="survey-outlook" style="vertical-align:top;width:114.4px;" ><![endif]-->
<div
class="mj-column-per-20 mj-outlook-group-fix survey" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
>
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
>
<tbody>
<tr>
<td
align="left" style="font-size:0px;padding:0;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:110px;line-height:100%;"
>
<tbody>
<tr>
<td
align="center" bgcolor="#ffffff" role="presentation" style="border:1px solid #dcdcdc;border-radius:999px;cursor:auto;height:59px;mso-padding-alt:0 20px;background:#ffffff;" valign="middle"
>
<p
style="display:inline-block;width:68px;background:#ffffff;color:#1a1a1a;font-family:'Inter', Arial, sans-serif;font-size:17px;font-weight:700;line-height:28px;margin:0;text-decoration:none;text-transform:none;padding:0 20px;mso-padding-alt:0px;border-radius:999px;"
>
Agree
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="survey-outlook" style="vertical-align:top;width:114.4px;" ><![endif]-->
<div
class="mj-column-per-20 mj-outlook-group-fix survey" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
>
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
>
<tbody>
<tr>
<td
align="left" style="font-size:0px;padding:0;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:110px;line-height:100%;"
>
<tbody>
<tr>
<td
align="center" bgcolor="#ffffff" role="presentation" style="border:1px solid #dcdcdc;border-radius:999px;cursor:auto;height:59px;mso-padding-alt:0 20px;background:#ffffff;" valign="middle"
>
<p
style="display:inline-block;width:68px;background:#ffffff;color:#1a1a1a;font-family:'Inter', Arial, sans-serif;font-size:17px;font-weight:700;line-height:28px;margin:0;text-decoration:none;text-transform:none;padding:0 20px;mso-padding-alt:0px;border-radius:999px;"
>
Unsure
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="survey-outlook" style="vertical-align:top;width:114.4px;" ><![endif]-->
<div
class="mj-column-per-20 mj-outlook-group-fix survey" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
>
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
>
<tbody>
<tr>
<td
align="left" style="font-size:0px;padding:0;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:110px;line-height:100%;"
>
<tbody>
<tr>
<td
align="center" bgcolor="#ffffff" role="presentation" style="border:1px solid #dcdcdc;border-radius:999px;cursor:auto;height:59px;mso-padding-alt:0 20px;background:#ffffff;" valign="middle"
>
<p
style="display:inline-block;width:68px;background:#ffffff;color:#1a1a1a;font-family:'Inter', Arial, sans-serif;font-size:17px;font-weight:700;line-height:28px;margin:0;text-decoration:none;text-transform:none;padding:0 20px;mso-padding-alt:0px;border-radius:999px;"
>
Disagree
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="survey-outlook" style="vertical-align:top;width:114.4px;" ><![endif]-->
<div
class="mj-column-per-20 mj-outlook-group-fix survey" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
>
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
>
<tbody>
<tr>
<td
align="left" style="font-size:0px;padding:0;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:110px;line-height:100%;"
>
<tbody>
<tr>
<td
align="center" bgcolor="#ffffff" role="presentation" style="border:1px solid #dcdcdc;border-radius:999px;cursor:auto;height:59px;mso-padding-alt:0 20px;background:#ffffff;" valign="middle"
>
<p
style="display:inline-block;width:68px;background:#ffffff;color:#1a1a1a;font-family:'Inter', Arial, sans-serif;font-size:17px;font-weight:700;line-height:28px;margin:0;text-decoration:none;text-transform:none;padding:0 20px;mso-padding-alt:0px;border-radius:999px;"
>
Strongly disagree
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#f8fafc;background-color:#f8fafc;width:100%;"
>
<tbody>
<tr>
<td>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" bgcolor="#f8fafc" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:640px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:640px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:28px 34px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:572px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"
>
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"
>
<tbody>
<tr>
<td
style="font-size:0px;word-break:break-word;"
>
<div
style="height:30px;line-height:30px;"
> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
<!-- #-END-# survey superlight -->Full library
Public component pages are there for reference and one-off use. Template Hedgehog Pro is for teams that want the full archive, local source files, compiled HTML, and a quicker implementation handoff.
Why teams upgrade