Surveys Inside Email
How to create surveys within HTML email.
Very often, email developers are faced with the task of creating an email containing a survey for their subscribers. For example, you can use Google Forms or third-party services like Survey Monkey for this. But not many people realize that the survey can be added to the email itself. In this case, the recipient will not have to go to a new page to answer the questions. Given that the user does not need to perform unnecessary actions to answer the questions asked, the chances that the survey will be completed are significantly increased.
The problem is that not all email clients transmit data from forms and some of the information components will disappear without a trace. Let’s take a look at this table which specifies the mail service providers that can implement what we want.
| Email Client | The form is displayed | The form is sent |
|---|---|---|
| Outlook | ||
| Outlook.com (web) | ||
| Outlook.com (iOS) | ||
| Outlook.com (Android) | ||
| Yahoo! (web) | ||
| Yahoo! (iOS) | 1 | |
| Yahoo! (Android) | ||
| Gmail (web) | ||
| Gmail (iOS) | ||
| Gmail (Android) | ||
| Apple Mail (macOS) | ||
| Apple Mail (iOS) |
1 The button can be pressed, but there is no transition.
There is a possibility that not all recipients of your newsletter use the same email clients and applications that support sending forms. In this case, I recommend that you select a segment of recipients with the providers that do support it and send them an email with the form inside. For the others that don’t, you can send a link to Google Forms.
Next, we go to the most expected. We have prepared a sample code for you that you can use to create a survey. We created it in the Email2Go HTML email template builder. Of course, this is just the basis for it. You will need to work with styles to make the letter attractive and meet the requirements of your corporate style. You may want to use backgrounds and images. In this case, do not forget about the unique features of Email2Go, such as the ability to conveniently work with embedded images and store images in absolutely free cloud storage.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Survey Email2Go</title>
<style type="text/css">
html {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
}
@media only screen and (min-device-width: 600px) {
.table600 {
width: 600px !important;
}
}
@media only screen and (max-device-width: 600px), only screen and(max-width: 600px) {
table[class="table600"] {
width: 100% !important;
}
}
.table600 {
width: 600px;
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" style="background: #ffffff; min-width: 340px; font-size: 1px; line-height: normal;"
width="100%">
<tr>
<td align="center" valign="top">
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" width="600"><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" class="table600" style="width: 100%; max-width: 600px; min-width:340px; background: #ffffff;"
width="600">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="width: 90% !important; min-width: 90%; max-width: 90%;"
width="90%">
<tr>
<td align="center" valign="top">
<div style="height: 30px; line-height: 30px; font-size: 28px;">
</div>
<span style="font-family: Tahoma, Arial, Geneva, sans-serif; color:#333333; font-size: 26px; line-height: 30px;">Survey for Email2Go customers</span>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="width: 90% !important; min-width: 90%; max-width: 90%;"
width="90%">
<tr>
<td align="left" valign="top">
<div style="height: 30px; line-height: 30px; font-size: 28px;">
</div>
<form action="#" method="post" style="width: 100%;">
<span style="font-family: Tahoma, Arial, Geneva, sans-serif; color:#333333; font-size: 16px; line-height: 24px;">How do you love us?</span>
<div style="height: 12px; line-height: 12px; font-size: 10px;">
</div>
<label style="font-family: Tahoma, Arial, Geneva, sans-serif; color:#333333; font-size: 16px; line-height: 24px;"><input
type="checkbox"/>So much!</label>
<div style="height: 12px; line-height: 12px; font-size: 10px;">
</div>
<label style="font-family: Tahoma, Arial, Geneva, sans-serif; color:#333333; font-size: 16px; line-height: 24px;"><input
type="checkbox"/>Very much!</label>
<div style="height: 12px; line-height: 12px; font-size: 10px;"> </div>
<label style="font-family: Tahoma, Arial, Geneva, sans-serif; color:#333333; font-size: 16px; line-height: 24px;"><input
type="checkbox"/>So very much!</label>
<div style="height: 12px; line-height: 12px; font-size: 10px;"> </div>
<label style="font-family: Tahoma, Arial, Geneva, sans-serif; color:#333333; font-size: 16px; line-height: 24px;"><input
type="checkbox"/>XoXoXo</label>
<div style="height: 23px; line-height: 23px; font-size: 21px;"> </div>
<span style="font-family: Tahoma, Arial, Geneva, sans-serif; color:#333333; font-size: 16px; line-height: 24px;">Do we love you?</span>
<div style="height: 12px; line-height: 12px; font-size: 10px;"> </div>
<label style="font-family: Tahoma, Arial, Geneva, sans-serif; color:#333333; font-size: 16px; line-height: 24px;"><input
type="checkbox"/>Sure</label>
<div style="height: 12px; line-height: 12px; font-size: 10px;"> </div>
<label style="font-family: Tahoma, Arial, Geneva, sans-serif; color:#333333; font-size: 16px; line-height: 24px;"><input
type="checkbox"/>Oh Yes!</label>
<div style="height: 12px; line-height: 12px; font-size: 10px;"> </div>
<label style="font-family: Tahoma, Arial, Geneva, sans-serif; color:#333333; font-size: 16px; line-height: 24px;"><input
type="checkbox"/>Definitely</label>
</form>
<div style="height: 30px; line-height: 30px; font-size: 28px;"> </div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]> </td></tr> </table><![endif]-->
</td>
</tr>
</table>
</body>
</html>
I hope this article will be useful. A survey that is included in your email significantly increases the likelihood that the user will answer the questions asked, plus beautifully made surveys will increase the chances even further and many times over. Therefore, create, fantasize, and surprise!
