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.

Using Amazon.com’s Add To Cart

For this example, we will use Amazon.com’s affiliate add to cart feature. I chose to use this so that you don’t have to write the “backend code” to try out this example.

The format of a form to add a product to an Amazon.com shopping cart looks like this:

<form method="GET" action="https://www.amazon.com/gp/aws/cart/add.html target=_new "> 
<input type="hidden" name="AssociateTag" value="storeid-20"/> 
<input type="hidden" name="SubscriptionId" value="[AWSAccessKeyId]"/> 
<input type="hidden" name="ASIN.1" value="B00003CWT6"/>
<input type="hidden" name="Quantity.1" value="1"/>
<input type="image" name="add" value="Buy from Amazon.com" border="0" alt="Buy from Amazon.com" src="http://images.amazon.com/images/G/01/associates/add-to-cart.gif"> 
</form> 

For this example we want the user to be able to select a few colors of an iPhone 6 case. To start off we will have to get the ASIN of the products:

Blue: B00MUQ9E7C
Pink: B00MUQ9DVO
Black: B00MUQ9DLO

Then we create the carousel using the same technique that we used to create Interactive Tabs for Email. For this example instead of tabs we use colored boxes.

Filling the Form Values

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.

<input type=radio name=”ASIN.1″ value=”B00MUQ9E7C”>

We use a select input to allow the recipient to select the number of cases to put into the cart.

<select name="Quantity.1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

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.

<style>
form.formcheck .tabcheck:checked + .container{
{
  display:block !important;
  max-height: none !important;
  height: auto !important;
}
/* Gmail lang trick */
* form[lang="x-formcheck"] [lang="x-tabcheck"]:checked + [lang="x-container"]
{
  display:block !important;
  max-height: none !important;
  height: auto !important;
}
</style>
 
<form class="formcheck" lang="x-formcheck" method="GET" action="https://www.amazon.com/gp/aws/cart/add.html" target=_new >
<input type=radio class="tabcheck" lang="x-tabcheck" style="display:none !important;" checked>
<div class="container" lang="x-container" style="display:none;height:0px;max-height:0px;overflow:hidden;">
FORM CONTENT
</div>
</form>

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.

<style>
form.formcheck .tabcheck:checked + .fallback{
  display:none !important;
  display:none;
  max-height: 0px;
  height: 0px;
  overflow: hidden;
}
/* Gmail lang trick */
* form[lang="x-formcheck"] [lang="x-tabcheck"]:checked + [lang="x-fallback"]
{
  max-height: 0px;
  height: 0px;
  overflow: hidden;
}
</style>
 
<form class="formcheck" lang="x-formcheck">
<input type=radio class="tabcheck" lang="x-tabcheck" style="display:none !important;" checked>
<div class="fallback" lang="x-fallback">
  <table ><tr><td width="200" height="100" align="center" valign="center" style="border: 2px dotted blue;">
  Fallback Content for Unsupported Clients
  </td></tr></table>
</div>
</form>

Here’s what the fallback content will look like for our example:

Final Code

Below is the final HTML/CSS (link) incorporating the fallback content. (Version with fade in effect).

See the Pen xbpWzW by FreshInbox (@freshinbox) on CodePen.

Integrating This For Your Own Site

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!