Using your email campaigns to collect subscriber feedback doesn’t necessarily have to involve the rigmarole of creating lengthy surveys. Instead, you can try adding a simple star rating to gauge satisfaction on anything – from recent purchases, to customer service experiences.
After a customer suggested that we look into how to collect user reviews, we thought we’d experiment with star ratings – by linking up a rating “form” in an HTML email with a service for collecting such reviews, like NiceReply. Star ratings seem to work best, as they’re simpler to implement than forms, don’t require any text input and can be adapted to use your iconography (eg. smiley faces or hearts instead of stars). They’re also fairly frictionless – all a subscriber has to do is click on a star in an email and confirm their selection on a pre-filled form.
After checking out a couple of lightweight, CSS-only options for the star ratings, we found one that did the job, adapted it for email, then got it working with two popular services.
Just as the concept is pretty simple, thankfully so is the code that we came up with – and you don’t need serious hacker skills to make it work in your email campaigns. But first, we’ll need to find a way to collect and measure your star ratings, before they start rolling in.
Choosing a service for collecting feedback
The first step is to choose a service for gathering ratings. As we already use an adapted version of NiceReply for collecting feedback on our support team, we know we can count on their simple star rating forms and reporting. But you can also use five-star rating fields in a Wufoo form to do the same thing. Both services make it possible to pre-fill their forms by appending a URL, so all a subscriber has to do is click a link, then confirm that they’re happy with the rating.
To keep things simple, we’ll use NiceReply. Here’s what one of their stock-standard star rating pages looks like:
Once you have an account with them, you should be able to setup a page like this and start collecting feedback. To pre-fill the star rating, all you need to do is append the page’s URL with /?s= and your rating. For example, to link to the page and assign a rating of 5/10 stars, the url would be something like:
Hang on to this URL, as we’ll need this for later.
Adding star ratings to your email
The most suitable star ratings form we could find was Chris Coyier’s “Star ratings with very little CSS“. Not only is the CSS used fairly straightforward, but it doesn’t require images, or any other external assets – making it very lightweight, too. Plus, they just look darn cool. Here’s the code and an example, adapted for email.
If you take a look at the code, you’ll see that each star is linked to the NiceReply form and appended with a pre-filled value. Clicking on a star predictably opens up the form in the default browser, where the subscriber can submit their rating.
How about email client support?
Once added to your email campaign, these star ratings simply work across all email clients. However where there is variation is in how the stars are highlighted, either when you hover over them, or tap your star rating of choice.
While in many email clients, selecting the 4th star from the left results in 4 stars lighting up, webmail clients are particularly problematic. In Yahoo! Mail and Gmail, no stars light up at all, however in Outlook.com, only the selected star is highlighted.
On the upside, selected ratings are persistent in iOS Mail, meaning that when you tap the 4th star in, 4 stars will be highlighted until you make another selection. Pretty cool!
This variation comes down to each email client’s support for CSS properties and attribute selectors – in particular, :hover. So caveat emptor – be sure to check what email clients your subscribers are using primarily, before you apply this technique.
Many thanks to cool customer Ben Carver for inspiring these star ratings – we hope to see them being used in email campaigns, such as post-purchase autoresponders. As for you, how do you collect customer feedback? Let us know in the comments below.