TL;DR: I coded my first interactive email using radio buttons to toggle on/off states without using JavaScript.
I was first introduced to inter...
For further actions, you may consider blocking this person and/or reporting abuse
Neat!
What is the method for form submission if you can’t use JavaScript (or...?)
My first guess would be that the CSS state swaps out various anchor links where the URL query string changes based on upvote or downvote or accept. You could add a submit “button” link below and it would only work if logged in. So it would save a click and the security issue would be resolved.
Yep, no "submit" button. Honestly I haven't figured out that part yet either, hoping to work with one of the devs on my team to figure it out.
You could try using a
background-imagewith a unique url and only display the element when the user clicks on another element. There would be lots of state to manage, but the css can be generated.This way you can send arbitrary http requests with meaningful payloads without JS.
background images don't work in most email clients.
Although your suggestion made me think they could use multiple submit buttons and based on selection a different button would be visible containing the values in the url it submits to. [makes for ugly inaccessible code though, but all email code is fugly]
Ah, such is the wild west of HTML emails! I had no idea background-image wasn't supported, that's pretty crazy.
background-imagehas pretty good support in email, but nothing's ever a given in the world of email development.I did not immediately put together that you can "toggle" images to generate HTTP requests, that's genius. I love this.
This is awesome! Thanks for sharing the code 😄
This is pretty interesting; however, why not talk about using AMP in emails? It's starting to slowly roll out and is definitely a way to make emails interactive!
I went this way because HTML and forms currently have better support and it'd be less to maintain.
I believe AMP is currently Gmail-only. Also AMP is a separate MIME type, which means 1. It'd be a third version of each email to support (in addition to HTML and text-only), and 2. not all ESPs support sending the AMP MIME type yet.
Still AMP is something I'd like to explore next. It seems a lot leaner than traditional email code.
Just some help for those who don't live email 24/7 like I do (we're an ESP...tailoredmail.com).
1). Background-images are supported in all the same email clients that also support this punchcard coding, so there's nothing to worry about there.
2). AMP4Email has "some" interactivity (hopefully more over time), and is also being implemented by Outlook.com and Yahoo/AOL...so there's that...but also keep in mind that you can't send an AMP email until Google fully approves you as a legit sender (there's an application process that's not altogether clear or easy). Also, for now, AMP email clients (gmail and outlook.com currently) require the user to go into their settings and turn on "dynamic email"...
I think your efforts to do the punchcard approach are worth your time/investment, as it's something you can be assured of working reasonably well. We've use the concept to build little wizards in our app that spit out the punchcard-code for carousels and the thumbs-up/vote concept described in this thread, amongst other interactive behaviors. Clients such as HULU and Aston Martin confidently use the concept to send to millions of people...so code with confidence! Hope this helps.
thanks for the response!
Great read Ted! Hope more folks adopt this technique to make better email experiences.
good stuff
How do you include the style tag in your email template? I tried to add it and it got stripped by Gmail.
Thanx