电子邮件设计中的搜索/表单输入

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：

我认为根据您的数据库知识做出决定。

但总的来说，它可能不是一个好主意，因为对于无法看到它或无法使用它的用户来说可能会非常烦人，有太多的电子邮件客户端不遵循相同的标准