A simple interactive html e-mail template generator using Mark Robbins punch card css scripting technique. Transitions taken from Jonathan Chinchilla & Eric Lepetit works.

Read this article to understand what interactive (or kinetic) e-mails are.

Video explaining the technique here and another video if you want to go deeper.

Article full of ideas: Stuff you can do with the Checkbox Hack. An article about taking this further.

Interactive e-mails work only on -webkit- supporting e-mail clients (iOS and Android clients, Outlook for MacOS).


Grouped states (radio buttons)*
Use Grouped States for image galleries, color choosers or diferent views of a product (360o image rotators).
* First state is visible by default.

Toggle states (check boxes)*
Use Toggle States for info boxes, product configurators and add-on items.
* Toggle states are visible by default.

Hover states (links)*
Use Hover States for hot spots, roll over interactions and tooltips.
* Hover states are hidden by default. In mobile devices they might behave like clicks. They might not work where Grouped and Toggle states work.



Button Styler
Create e-mail template

Test your e-mails here

©2015 Emmanuel Ulloa