電子郵件設計中的搜索/表單輸入

Question

這是來自Bed Bath and Beyond的令人驚歎的email campaign！ 這是因爲在電子郵件廣告系列上可能沒有JS或PHP，但有功能搜索表格。

那麼，有誰知道它是如何做到的？我是一名電子郵件設計師，我想將此功能添加到我公司的新聞簡訊中。感謝您的幫助！

搜索表單的片段在一封電子郵件中

<table width="650" cellspacing="0" cellpadding="0" border="0"> 
<tbody><tr> 
<td bgcolor="#6699cc" colspan="9"><img style="display: block;" height="7" width="650" border="0" alt="" src="http://image.bedbathandbeyond.com/bedbathbeyond/2010/search_test/search_top.jpg"></td> 
</tr> 
<tr> 
<td width="14"><img style="display: block;" height="33" width="14" border="0" alt="" src="http://image.bedbathandbeyond.com/bedbathbeyond/2010/search_test/search_left.jpg"></td> 
<td bgcolor="#336699" width="272"><input class="search" size="36" name="sstr" value="enter keyword" style="display:block; width:240px;"></td> 
<td bgcolor="#336699" width="22"><img style="display: block;" height="33" width="13" border="0" alt="" src="http://image.bedbathandbeyond.com/bedbathbeyond/2010/search_test/spacer.gif"></td> 
<td width="71"><input id="SEARCH" title="SEARCH" type="image" height="33" alt="SEARCH" width="71" src="http://image.bedbathandbeyond.com/bedbathbeyond/2010/search_test/search_submit.jpg" border="0" name="SEARCH" style="display:block"></td> 
<td bgcolor="#6699cc" width="7"><img style="display: block;" height="33" width="7" border="0" alt="" src="http://image.bedbathandbeyond.com/bedbathbeyond/2010/search_test/spacer.gif"></td> 
<td width="134"><a href="http://bargainswoop.com/go-to/?http://www.bedbathandbeyond.com/search/searchByBrand.aspx?utm_source=e&amp;utm_medium=e&amp;utm_term=e&amp;utm_content=headerfooter&amp;utm_name=JulyCirc" target="_blank" rel="nofollow"><img style="display: block;" height="33" width="134" border="0" alt="Shop By Brand" src="http://image.bedbathandbeyond.com/bedbathbeyond/2010/search_test/search_bybrand.jpg"></a></td> 
<td bgcolor="#6699cc" width="7"><img style="display: block;" height="33" width="7" border="0" alt="" src="http://image.bedbathandbeyond.com/bedbathbeyond/2010/search_test/spacer.gif"></td> 
<td width="116"><a hrefenter code here="http://bargainswoop.com/go-to/?http://www.bedbathandbeyond.com/nodePage.asp?order_num=-1&amp;RN=856?utm_source=e&amp;utm_medium=e&amp;utm_term=e&amp;utm_content=headerfooter&amp;utm_name=JulyCirc" target="_blank" rel="nofollow"><img style="display: block;" height="33" width="116" border="0" alt="What's New" src="http://image.bedbathandbeyond.com/bedbathbeyond/2010/search_test/search_whatsnew.jpg"></a></td> 
<td bgcolor="#6699cc" width="7"><img style="display: block;" height="33" width="7" border="0" alt="" src="http://image.bedbathandbeyond.com/bedbathbeyond/2010/search_test/spacer.gif"></td> 
</tr> 
<tr> 
<td bgcolor="#6699cc" colspan="9"><img style="display: block;" height="7" width="650" border="0" alt="" src="http://image.bedbathandbeyond.com/bedbathbeyond/2010/search_test/search_bottom.jpg"></td> 
</tr> 
</tbody></table> 

Answer 1

形式應該只是一個正常的形式，有沒有竅門那裏。

看看這篇文章從css tricks。

問題是兼容性問題，電子郵件客戶端很難，因爲他們多次不遵循相同的標準。你應該通過你想要支持的客戶一個一個去看看你是否滿意結果。

我試了一下，並且會在短時間內發佈（短）列表。

請注意，正如文章所述，某些電子郵件客戶端可能會出現一些警告。

Gmail - 與警告一起使用。

Hotmail - 似乎不起作用（尋找解決方法）。 （工作正在進行中）從campaign monitor採取

兼容性表：

我認爲這將是基於數據庫的知識，你的決定。

但總而言之，它可能不是一個好主意，因爲它可能是非常煩人的用戶無法看到它或不能使用它，有太多的電子郵件客戶端不遵循相同標準。