A feedback survey request email for shops, subscriptions and services, built as a real email-safe template: table layout, inline styles, MSO conditional comments and a VML button, with no frameworks, web fonts, icon fonts or JavaScript. The warm terracotta design asks one short question, lets the reader answer with a single tap on a 1 to 5 scale, invites them to the full survey and rewards them with a discount. The patterns target Outlook (Windows desktop), Gmail (web and apps) and Apple Mail.
How it works
The hidden preheader (.fsr-preheader) sets the inbox preview. table.fsr-wrapper paints the peach background, and table.fsr-container holds a 560px rounded white card; an MSO ghost table keeps the width fixed in Outlook. A round monogram cell and an italic serif wordmark form the logo without any image.
The question block uses a serif h1 ("How did we do, Sam?") and one line of context. The rating row, table.fsr-rating, contains five cells (td.fsr-num) whose backgrounds deepen from pale peach to terracotta. Each number is a block link to the survey URL with a score query value, so a click records the rating on your server and can open the survey pre-filled. Forms and JavaScript are not reliable in email, which is why plain links are used. A small table.fsr-scale labels the ends "Not great" and "Loved it".
Below a thin divider, the "Take the 2-minute survey" button is bulletproof: Outlook draws a VML v:roundrect, other clients show the pill-shaped a.fsr-btn. A dashed incentive box explains the 15% thank-you discount, and the footer gives the reason for the email, the postal address, email preferences and an unsubscribe link.
Customization
- Replace the terracotta shades (
#fdf1e8to#c2562e) on the fivetd.fsr-numcells with your own light-to-dark scale. - Change the
scorelinks to your survey tool's URL format, for example a pre-filled form field. - Turn the scale into 0 to 10 for NPS by adding cells and reducing their 52px width so the row still fits small screens.
- Edit the product name and question in the intro to match the order or visit you are asking about.
- Update the incentive box or delete its row if you do not offer a reward.
- In
style.css,.fsr-pxtightens padding below 600px,.fsr-h1shrinks the heading and.fsr-btnbecomes full width.
Accessibility
Layout tables use role="presentation". Each rating link has an aria-label such as "Rate 1 out of 5, very unhappy" plus a matching title, so the bare number is never the only label. Text meets 4.5:1 contrast and footer links are underlined. The tap targets are 52px squares, and style.css adds hover states and focus-visible outlines where supported.
Usage notes
The template uses no images, so it looks complete with images blocked. Send it a few days after delivery and limit survey emails to about one a month.
