Update 10/7/2015: Based on Assu’s comment below I did another check and sure enough AOL Mail now supports forms.
This example shows how you can create an interactive carousel in email that leverages the power of form support to add products to a shopping cart.
We leverage the concepts in the Tabs for Email post and this example works with the native iOS and Android mail clients as well as the Webmail versions of Yahoo! Mail and Gmail. Like the Tab example, this one doesn’t work with Outlook.com either so users on Outlook.com will see fallback content.
From the Tabs example you learned that the Tabs are driven using radio inputs. For the example instead of assigning the radio input a random name, we use ASIN.1 as the name and the ASIN tied to the different colors as values.
We use a select input to allow the recipient to select the number of cases to put into the cart.
The rest of the fields we’ll just use hidden fields as they are required by Amazon but not relevant to our example.
Capability Detection and Fallback
Update:Previously AOL Mail did not support the form tag, however that has since changed. In order to get forms to work in AOL Mail the submissions must go to a https link and the “target” attribute of the form must be set.
As usual we need to provide fallback for clients that don’t support forms as well as good ol Outlook 2007-2013.
In the Tabs example, we moved the content of Tab 1 outside the Tab container so that unsupported clients will still see the content of Tab 1. In this example we’ll simply hide the whole unit for unsupported clients and display a separate block for fallback content.
The unsupported clients this time are: Outlook and Outlook.com.
Expanding on the capability detection technique in the Tabs example, we add a further test for the presence of forms in addition to checking for the support of the :checked pseudo class before displaying the form contents.
To display an alternative block of content for unsupported clients, we reverse the logic and show the alternative content by default and hiding it if support for forms and the :checked pseudo-class is detected.
What you’ve seen is the ability to use a shopping widget in email to add a product to a shopping cart using the Amazon.com affiliate form code. But what if you want to implement it on your own e-commerce store? Many e-commerce engines may have similar “add to cart” API’s that you can leverage.
However, the folks over at RebelMail has taken it one step further. They’ve created a complete solution that not only generates interactive widgets from items in your store, the widgets allow customers to select a product, select payment and address options and perform a checkout directly in the email itself!.
Just like MixMax, RebelMail is pushing the envelope of email and I hope many more will do the same!