Embed a survey in an email

by Stephanie Rewis on December 7, 2014

While implementing the trial automation flows at Contatta, one of my goals was to create an exit survey email for people who did the 30-day trial but had decided not to move to the paid plan. I wanted to send a simple, multiple choice question with the final option being “other,” so trial users could freeform an answer if it wasn’t offered. I don’t know about you, but I rarely want to click a “Take our poll” button in an email. But if it’s super easy, I’m willing to give feedback. So I wanted to make it as simple as possible to give feedback — so I could get the data I needed.

I know I can’t be the first person who’s wanted to do this. But I also know the overwhelming limitations of HTML email. I guess you could say, as I started my research, I was a hopeful skeptic. We had both a Survey Monkey and MailChimp subscription, so I started looking at the integration between them. But whether you create the integration from MailChimp to SurveyMonkey or from SurveyMonkey to MailChimp, you end up with the same thing. A button in an HTML email that basically says “Take the Survey” and then moves the user to the survey page. Nada.

After digging around on the internet a bit, I was beginning to become less hopeful. I’m a huge proponent of “needs to work everywhere.” So a Google form integration was out of the question.

Somewhere in my research, I found an idea that showed promise. (Sadly, I haven’t been able to come up with the article in subsequent searches to give the author credit.) The article talked about “faking the poll” by putting images of radio buttons along with the questions in your email. The link placed on the image of the question is a custom URL with a different variable appended to auto-submit the answer to the form (access to this required me to upgrade our account level). This works great for a yes/no question or even for a “rate this” question. But mine was a little more complex. I needed anyone selecting the answer “other” to be able to submit further information.

I started testing the theory. Maybe I could put a further question on the thank you page. The answer to that turned out to be, nope. But I found, if I upgraded my subscription, I could use a custom redirect on my thank you page. I decided to create a second form that appeared to be a thank you page, with an area that could be used to leave further info. Though in the end, I would have two forms, it would still meet our needs giving the user the easiest method to interact with us.

I rolled up my sleeves and got to work. I upgraded our account to Gold level ($300 per year). I immediately got the redirect working. That’s when I discovered that though it appeared upgrading to Gold would get me both the redirect and custom variables, in reality it only got me the redirect. I was going to have to upgrade to Platinum level ($780 per year) for that. Being a startup with a purposely lean budget, that wasn’t happening. (I found through a later Support conversation that there was a bug on their website that didn’t make clear what level you needed to upgrade to if you are a paying customer. I’m sure they’ll fix that soon.)

Round Two

Time to see if I can get the custom variables and the thank you page redirect I needed — at a more reasonable cost. The other survey integration I’d seen while perusing MailChimp integrations was SurveyGizmo. I was unfamiliar with SurveyGizmo, but I figured they’d probably be similar to SurveyMonkey — perhaps with even less features. I signed up for the 7-day trial and started poking around.

I very quickly got a redirect of the thank you page working (their knowledge base section is quite good). I had to get a little help from their Support folks (also really awesome) to get my custom variable working, but I was shocked at how quickly I was able to implement the process I had designed.

Then I had a horrible thought. Now that everything was working and I was ready to pay, what if during trial they enable ALL THE POSSIBLE THINGS and it’s actually more expensive than Survey Monkey? I called them. (I hate using the phone, so this was clearly a desperate situation.) They confirmed that everything I had accomplished was at the lowest Solo level ($162 per year). I have to admit, I was flabbergasted—as well as super excited. Credit card engaged — Subscription unlocked!

If you’d like to embed a survey in an HTML email, read on. I’ll list step by step what I did to make this work.

Add an actionable survey question into an HTML email with SurveGizmo and MailChimp

1) At SurveyGizmo, create a form with your one question (multiple choice). Tip: Be aware that if you choose radio buttons, they will only be allowed one answer. If you choose checkboxes, they can choose multiple answers. (Though they have to return to their email to choose a second option, my experience has shown that some users will do that.) The form doesn’t need any styling since it will never be seen by the user.

Note: If you already have a SurveyMonkey Platinum account, you can create the same functionality — I’m just not listing the steps here.

2) Create a second form with a question that allows an “essay/long answer” so they can leave you further feedback. I also added a way for someone to request to be contacted and leave their name and contact information. Style this form as if it’s a thank you page for the first form. Click on the “Share” tab at the top and copy the link for this form. You’ll need it shortly. (You may want to customize the name of the first form since people may see it in their browser when they click your links.)
Find your survey link

3) Let’s create the URL variables for the first multiple choice form—the one that’s included in the email. Click edit and open your question. To the right of the “Answer Options,” click Advanced options and choose Custom.

The reporting values are what you will use to customize the URL in your email. I played around with this a bit. What I landed on was simply giving them the values of one, two, three, etc. — due to the fact that my team was changing what those questions were and the reports area of SurveyGizmo will show you the actual answers. (This is their help page.)reporting value

4) The second half of creating the URL variable is the merge value. While editing the question, click on the layout option. Scroll down to the Advanced area and add whatever you’d like to use for the URL variable. (I used the term answer.) This is the format: [url("yourtermhere")] variable value

5) Move down to the bottom half of the page of your first form. This is where you’ll redirect the thank you page to the URL you saved for your second form. Create a new Action. Redirect it to the second form you’ve created with a 0 second redirect: redirect the thank you page
(SurveyGizmo’s instructions are here.)

6) Now we’re ready to add the link to our HTML email in MailChimp. First, you’ll need to create an image that appears to be a radio button. I did it in a super highly advanced way — I went to a real form on my website and did a little screenshot. ;)

I’m a huge accessibility advocate. Also, I know that some people open email with images turned off by default. For that reason, I chose not to include the words of the question into the image of the radio button. I want them to be real words. The radio button and the words/option next to it should both be linked to the same place. I put inline CSS onto the linked words to remove the underline from the link on the question — that way, it appears that the radio button and option next to it are associated, just like a regular form. Put a the radio button and linked words into a table in your email so that no matter what device your user is on, they’ll remain together.

7) Go to your first multiple choice form and copy the URL you’ve chosen to use. Then, add the merge value along with the reporting value. So for example, since I chose to use “answer” as my merge value and one, two, three, etc for my reporting values, my URL would look something like this:

http://www.surveygizmo.com/data/nameofform?answer=one http://www.surveygizmo.com/data/nameofform?answer=three

You get the picture. Essentially, you’re letting the image of the radio button and the words of the linked option automatically submit their answer to your first form — then quickly roll to your second form — the “fake” thank you page. If they choose to give you further information, you’ll get that in the second form report.

There are a couple other little tricks I’ll share in a follow up post. You can pass more data to SurveyGizmo from MailChimp (like first name, email, etc) and even customize your thank you page/form with that data. But this has gotten long…

Cheers! And please share your tricks in the comments.


Life is a journey, not a destination

by Stephanie Rewis on November 16, 2014

I’ve been quiet lately. Startup life is busy… and exhausting. Blogging for me has pretty much gone the way of the Dodo. I’m planning to change that.

Since technology is increasingly involved in a modern company’s marketing department, it’s become quite common for those of us who are developers to find ourselves deeply involved with our marketing team. Almost two years ago, I took on the role of “Director, Web Strategy and Marketing Technologies” at Contatta. As a small startup, it means I personally handle a whole host of technology decisions and implementations — and I do it within a limited budget. Sometimes that requires me to get creative instead of going for a big all-in-one solution.

Though early in my career (building small business web sites) I regularly provided clients with organic SEO and analytics, the techniques I knew have changed. We now use schema and OG markup. Google Analytics has been upgraded to Universal analytics. There are additional analytics tools available like Mixpanel and Kissmetrics. There are also a whole host of things that I didn’t regularly offer back then — like A/B testing, heat mapping, multiple landing pages, and very few clients used email marketing. Through a lot of trial, and some error too, I’ve been creating a system that gives us the ability to test, analyze and iterate quickly.

I still do all the front-end development for Contatta’s website and blog — and I’ll continue to blog about web techniques and technology. But I’ll also start sharing posts with marketing technology-related information. Tips and techniques, and creative ways I’ve found to make things work on a budget. (I’m probably posting these as much for me as for you. More than once, I’ve done a search for how to do something and found the answer in one of my own, older blog posts. It’s one of the best reasons to blog—I can’t remember everything—even when I once figured it out.)

I’m enjoying this journey. I hope you’ll share things you’ve learned with me as well. Cheers.


Font Smoothing — It’s not just for Webkit anymore

by Stephanie Rewis on April 24, 2014

I ran into a very frustrating bug while using icon fonts on our site at Contatta. A bug I filed last April, and nurtured through the process of getting fixed, didn’t make the Mozilla release notes (though it was included in Firefox 28). Because I feel it’s a very useful solution, I wanted to bring some attention to it.

Font Smoothing for [most] Everyone

In a nutshell, if you’re using antialiasing for icon fonts and headings using -webkit-font-smoothing, you’ll want to be aware of -moz-osx-font-smoothing. I won’t take the time to go into the finer details of sub-pixel or grayscale antialiasing. If you’re interested, you can read this article about type rendering on different operating systems for more info. And though I initially filed the bug on Firefox, the issue is actually OSX. Here’s a summary from Jonathan Kew (a Mozilla engineer):

The “problem” in Firefox is simply how OS X renders the font when “LCD font smoothing” is enabled (which I think is the default). AIUI, it’s widely known among the font-design community that OS X tends to fatten glyphs somewhat compared to other rasterizers. For the usual case of black-on-white text, this works OK (though some people like it more than others); however, for white-on-black, the effect can be much too heavy-handed.

Aral Balkan posted an excellent example of light icon fonts on a dark background — one with -webkit-font-smoothing, one on Firefox. The web has been full of people trying to come up with creative ideas for making their fonts render consistently — opacity tricks, text-shadow tricks, etc. But those only work in some situations. In the end, many people have simply thrown their hands up in frustration—and changed to a different heading font/color scheme or moved away from icon fonts and back to sprites.

A while back, the Webkit team gave us a way to counteract the issue — -webkit-font-smoothing. It should be used responsibly and shouldn’t be used on everything. Certain fonts become too thin and less legible when it’s applied. But when needed, it’s a fontsaver (yeah, yeah, I know). This non-standard property got a lot of attention and caused many of us to accuse Firefox of being fat. I was one of them.

Jump forward to the bug I filed. After much passionate discussion, the exceptional Mozilla engineer David Baron agreed to grant us a property that provides a similar fix — -moz-osx-font-smoothing. While it has the similar effect of slimming fonts, instead of using the “antialiased” value Webkit uses, FFOX has chosen to use “grayscale”. (You can read the bug for the reasons why and the methods used.) It also appears from viewing in the FFOX Inspector that you can use the inherit | unset | auto values as well. (Though I haven’t experimented with those.) So far, anywhere I need the -webkit-font-smoothing:antialiased I now use -moz-osx-font-smoothing:grayscale with great results.

If you use Sass, you’re in luck. Maximilliano Firtman has created a [Sass mixin to turn the font-smoothing property on and off] (http://maximilianhoffmann.com/posts/better-font-rendering-on-osx).

So spread the news — FFOX is thin again!

A Sidenote on Bug Filing

Maybe it’s all the beta testing I’ve done over the years, but I come from the “don’t accept sub-optimal behavior” camp. If something in a browser doesn’t behave as expected, I believe it’s more productive for the Web and my end result to file a bug and help get it fixed.

For those of you that haven’t yet filed a bug or made a feature request for a browser, I’d like to offer a few suggestions I’ve found helpful:

  1. Be very clear in your initial report. Use the most accurate terms you can to illustrate what causes the bug (does it have a trigger, can it be affected by other interactions, etc). Create one or two simple demos that illustrate the bug so the engineers can test it more easily.
  2. Remember that you’re dealing with people—engineers have feelings (I swear, they do!). Yelling at them, in general, gets you no where fast. Clarity and politeness are the order of the day.
  3. Engineers are dealing with massive amounts of work and they have to prioritize. If they feel your bug is a small edge case, it will receive a lower priority. If your bug is one that affects a myriad of people, but the engineers don’t understand that, rally the troops to come vote for it and comment on it. Have them show more examples. It really makes a difference in helping them prioritize.
  4. Stay with your bug. Keep an eye on it. Provide more examples where needed. This is your baby, it’s your responsibility to see it delivered to the masses. It’s easy for it to accidentally get stuck in limbo where one engineer has worked on it and is waiting for another engineer to weigh in. But he’s working on other things and doesn’t know the first engineer is waiting, and — well, you get the picture. The occasional little ping or tickle doesn’t hurt.
  5. Once the bug is fixed, you may be the one that has to let people know. Don’t count on release notes and the browser’s dev center. It can be missed in the mass of things that occur in a release.

BTW, I have this other outline bug I’d love to see fixed. It’s been around for over three years. It could sure use your votes. ;)


New Directions

March 2, 2012

In 1999, when I started my journey through the interwebs, I had no real idea where it would take me. I barely knew what was possible. I only knew that my brain loved puzzle-type thinking, detective work, research and figuring things out. And I suspected code would access the parts of my mind that love [...]

Read the full article →

CSS3: spread value and box-shadow on one side only

September 8, 2011

This morning I awakened with a question in my twitter stream from @deebeefunky. He was frustrated by the fact that when he sets a blur on box-shadow, it shows on two sides of the box. He wants it to show on only one side. Of course, that got me thinking. I did come up with [...]

Read the full article →

Firefox multi-column layout bug… and a unicorn

May 4, 2011

Last night, I was getting a file ready to share with Estelle Weyl, one of my co-presenters for our CSS3 workshop at SXSW11. The page was a silly little demo that used media queries, multiple backgrounds, transitions, generated content, multi-column layout and, well, a unicorn. I had only viewed the file in Chrome since that’s [...]

Read the full article →

Changing a Background-image with CSS3 Transitions

March 1, 2011

As you may have read, outside of gradients, you can’t change a background-image with CSS transitions. Or can you? At InControl Conference last week, Greg Rewis spoke about Transitions, Transforms and Animations. A question was asked about showing one background-image on load and transitioning to another in a subsequent pseudo-state. You can always change the [...]

Read the full article →

CSS3 Flexible Box Model…Layout Coolness…also Oddities & Confusion

February 25, 2011

In August, due to a twitter discussion with Molly, and of course while partying on a Saturday night, Dave Gregory and I were looking at whether the Flexible box layout module (still a working draft) is getting close to ready for prime time yet. Our hope was that it will solve some of the frustrations [...]

Read the full article →

HTML5 and Video: 4 part video series

January 10, 2011

I’ve had a couple people ask me to link on my blog to my four part video series on HTML5 and video. Currently, it’s a feature on the AdobeTV home page, but I reckon that will be for just a little while. After that, you can link directly to Part 1 (7:18), Part 2 (10:31), [...]

Read the full article →

Mangled smiley in @font-face

January 5, 2011

Recently, I noticed that sometimes, when uploading a stylesheet using @font-face, my cute little smiley (thank you Paul Irish!) gets turned into some kind of garbledygook instead of the smile character. Last week, I decided to try an experiment. It cleared it right up. To the top of your stylesheet, add this: @charset “UTF-8″; Be [...]

Read the full article →