我有一个网站项目。我曾经在asp.net工作，所以我对它非常熟悉。但是，这个项目是在php ...
我搜索了很多，并没有找到php可以从图像发送数据的方式（asp.net可以做到这一点）。
我的问题是如何从按下的图片中获取数据并保存所有这些数据，然后将其作为电子邮件发送给网站所有者。
方案如下：
问题是我有一个由图片组成的表单（在滑动div上）。 幻灯片使用jquery左右移动（并且它们的显示设置为none） 例如： 幻灯片1有三张图片（装饰你的桌子并计划你的活动）
案例1：如果您按下计划您的活动，请转到幻灯片2，在这里我们需要保存“计划活动” 幻灯片2还有其他三张图片（生日活动，婴儿洗澡，婚礼） 如果您按下其中一个，您将被带到下一张幻灯片（与之相关），我们必须保存“生日事件”，例如等等
案例2：如果你按下装饰你的桌子，你去幻灯片3，在这里我们需要保存“装饰你的桌子” 幻灯片4还有另外两张图片（开放式自助餐，Canape） 如果您按下其中一个，您将被带到下一张幻灯片（与之相关），我们必须保存“Canape”等等
在此表单的末尾，有一个发送按钮，需要收集所有以前保存的数据并将其作为电子邮件发送给网站所有者。
例如，在第一个场景中，电子邮件看起来像这样： 您收到了订单。 订单：活动策划 类型：生日
在第二种情况下，电子邮件看起来像这样： 您收到了订单。 订购：餐桌装饰 类型：小食
等等。
幻灯片的HTML代码
<div id="Plan">
<div id="SubPlan">
<div id="Plan0">
<table id="PlanTable">
<tr>
<td><h1>START <br /> PLANNING <br/> NOW</h1></td>
<td><img id="PlanEvent" src="Pictures/plan/plan-your-event.png" /><div class="ButtonBackground"></div></td>
<td><img id="PlanEventTable" src="Pictures/plan/customize-your-display-table.png" /><div class="ButtonBackground"></div></td>
<td><img id="CustomizeCake" src="Pictures/plan/customize-your-cake.png" /><div class="ButtonBackground"></div></td>
</tr>
</table>
</div>
<!--Plan Event Section-->
<!--1-->
<div id="Occasion" >
<div class="PlanWrapper">
<div class="row"><div class="col-xtra-12"><h1>PLAN YOUR EVENT</h1></div></div>
<div class="row"><div class="col-xtra-12" ><p>WHAT IS YOUR OCCASION?</p></div></div>
<div class="row"><div class=" col-xtra-6 col-xs-3 "><img class="Occasionbtn animatethis" src="Pictures/plan/Customize-your-cake_01.png" /><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 "><img class="Occasionbtn animatethis" src="Pictures/plan/Customize-your-cake_02.png" /><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 "><img class="Occasionbtn animatethis" src="Pictures/plan/Customize-your-cake_03.png" /><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 "><img class="Occasionbtn animatethis" src="Pictures/plan/Customize-your-cake_04.png" /><div class="ButtonBackground"></div></div></div>
<div class="row"> <div class=" col-xtra-6 col-xs-3 " ><img class="Occasionbtn animatethis" src="Pictures/plan/Customize-your-cake_05.png"/><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 " ><img class="Occasionbtn animatethis" src="Pictures/plan/Customize-your-cake_06.png"/><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 "><img class="Occasionbtn animatethis" src="Pictures/plan/Customize-your-cake_07.png" /><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 " ><img class="Occasionbtn animatethis" src="Pictures/plan/Customize-your-cake_08.png"/><div class="ButtonBackground"></div></div></div>
<div class="row AddMargin">
<div class="col-xtra-6" style="text-align:left"> <span class="glyphicon glyphicon-chevron-left Occasionbtn_prev" ></span> </div>
<div class="col-xtra-6" style="text-align:right"> <span class="glyphicon glyphicon-chevron-right Occasionbtn_next"></span> </div>
</div>
</div>
</div>
<!--2-->
<div id="DecorationType" >
<div class="PlanWrapper">
<div class="row"><div class="col-xtra-12"><h1>PLAN YOUR EVENT</h1></div></div>
<div class="row"><div class="col-xtra-12" ><p>WHAT ARE WE DECORATING?</p></div></div>
<div class="row"><div class=" col-xtra-12"><img style="max-width: 300px; margin-bottom:20px;" class="DecorationType " src="Pictures/plan/what-are-we-decorating_main.png" /></div></div>
<div class="row"> <div class=" col-xtra-6 col-xs-4 " ><img class="DecorationTypebtn animatethis" src="Pictures/plan/what-are-we-decorating_1.png"/><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-4 " ><img class="DecorationTypebtn animatethis" src="Pictures/plan/what-are-we-decorating_2.png"/><div class="ButtonBackground" style="background-color:#91737c"></div></div> <div class=" col-xtra-6 col-xs-4 "><img class="DecorationTypebtn animatethis" src="Pictures/plan/what-are-we-decorating_3.png" /><div class="ButtonBackground" style="background-color:#f4d7cb"></div></div></div>
<div class="row AddMargin">
<div class="col-xtra-6" style="text-align:left"> <span class="glyphicon glyphicon-chevron-left DecorationTypebtn_prev" ></span> </div>
<div class="col-xtra-6" style="text-align:right"> <span class="glyphicon glyphicon-chevron-right DecorationTypebtn_next"></span> </div>
</div>
</div>
</div>
<!--3-->
<div id="Catering" >
<div class="PlanWrapper" >
<div class="row PlanTitle"><div class="col-xtra-12"><h1>PLAN YOUR EVENT</h1></div></div>
<div class="row PlanOption"><div class="col-xtra-12" ><p>CATERING?</p></div></div>
<div class="row AddMargin">
<div class="CateringPadding col-xtra-6 col-xs-1 PlanRemove "></div>
<div class="CateringPadding col-xtra-6 col-xs-3 "><img class="Cateringbtn Cateringbtn1 animatethis" src="Pictures/plan/Catering_1.png" /> <div class="ButtonBackground"></div> </div>
<div class="CateringPadding col-xtra-6 col-xs-3"><img class="Cateringbtn Cateringbtn1 animatethis" src="Pictures/plan/Catering_2.png" /> <div class="ButtonBackground"></div> </div>
<div class="CateringPadding col-xtra-6 col-xs-3"><img class="Cateringbtn Cateringbtn1 animatethis" src="Pictures/plan/Catering_3.png" /> <div class="ButtonBackground"></div> </div>
<div class="CateringPadding col-xtra-6 col-xs-1 PlanRemove "></div>
</div>
<div class="row PlanOption"><div class="col-xtra-12" ><p>HOW MANY PEOPLE ARE WE CATERING TO?</p></div></div>
<div class="row AddMargin">
<div class="col-xtra-6 col-xs-3 "><img class="Cateringbtn Cateringbtn2 animatethis" src="Pictures/plan/NbCatering_1.png"/><div class="ButtonBackground" style="background-color:#91737c"></div> </div>
<div class=" col-xtra-6 col-xs-3 "><img class="Cateringbtn Cateringbtn2 animatethis" src="Pictures/plan/NbCatering_2.png"/><div class="ButtonBackground" style="background-color:#91737c"></div> </div>
<div class="col-xtra-6 col-xs-3 "><img class="Cateringbtn Cateringbtn2 animatethis" src="Pictures/plan/NbCatering_3.png" /><div class="ButtonBackground" style="background-color:#91737c"></div> </div>
<div class="col-xtra-6 col-xs-3 "><img class="Cateringbtn Cateringbtn2 animatethis" src="Pictures/plan/NbCatering_4.png" /><div class="ButtonBackground" style="background-color:#91737c"></div> </div>
</div>
<div class="row AddMargin">
<div class="col-xtra-6" style="text-align:left"> <span class="glyphicon glyphicon-chevron-left Cateringbtn_prev" ></span> </div>
<div class="col-xtra-6" style="text-align:right"> <span class="glyphicon glyphicon-chevron-right Cateringbtn_next"></span> </div>
</div>
</div>
</div>
<!--4-->
<div id="TableColor" >
<div class="PlanWrapper">
<div class="row"><div class="col-xtra-12"><h1>PLAN YOUR EVENT</h1></div></div>
<div class="row"><div class="col-xtra-12" ><p>WHAT IS YOUR TABLE COLOR?</p></div></div>
<div class="row"> <div class=" col-xtra-6 col-xs-3 " ><img class="TableColorbtn animatethis" src="Pictures/plan/what-is-your-table-color_1.png"/><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 " ><img class="TableColorbtn animatethis" src="Pictures/plan/what-is-your-table-color_2.png"/><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 "><img class="TableColorbtn animatethis" src="Pictures/plan/what-is-your-table-color_3.png" /><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 "><img class="TableColorbtn animatethis" src="Pictures/plan/what-is-your-table-color_4.png" /><div class="ButtonBackground"></div></div></div>
<div class="row"> <div class=" col-xtra-12 col-xs-3"><p class="decootherstyle" style="background-color: #f4d7cb;" >OTHER</p> </div> <div class="col-xtra-12 col-xs-9"> <input class="inputstyle3" /> </div></div>
<div class="row AddMargin">
<div class="col-xtra-6" style="text-align:left"> <span class="glyphicon glyphicon-chevron-left TableColorbtn_prev" ></span> </div>
<div class="col-xtra-6" style="text-align:right"> <span class="glyphicon glyphicon-chevron-right TableColorbtn_next"></span> </div>
</div>
</div>
</div>
<!--</div>-->
<!--5-->
<div id="Decoration">
<div class="PlanWrapper">
<div class="row PlanTitle"><div class="col-xtra-12"><h1>PLAN YOUR EVENT</div></div>
<div class="row PlanOption"><div class="col-xtra-12"><p>DECORATION</p></div></div>
<div class="row"><div class="col-xtra-6 col-xs-3 " ><img class="Decorationbtn animatethis" src="Pictures/plan/Decoration_1.png" /><div class="ButtonBackground" style="background-color: #f4d7cb;"></div></div> <div class="col-xtra-6 col-xs-3 "><img class="Decorationbtn animatethis" src="Pictures/plan/Decoration_2.png" /><div class="ButtonBackground" style="background-color: #f4d7cb;"></div></div><div class="col-xtra-6 col-xs-3 "><img class="Decorationbtn animatethis" src="Pictures/plan/Decoration_3.png" /><div class="ButtonBackground" style="background-color: #f4d7cb;"></div></div><div class="col-xtra-6 col-xs-3 "><img class="Decorationbtn animatethis" src="Pictures/plan/Decoration_4.png" /><div class="ButtonBackground" style="background-color: #f4d7cb;"></div></div></div>
<div class="row"><div class="col-xtra-6 col-xs-3 "><img class="Decorationbtn animatethis"src="Pictures/plan/Decoration_5.png"/><div class="ButtonBackground" style="background-color: #f4d7cb;"></div></div> <div class="col-xtra-6 col-xs-3 "><img class="Decorationbtn animatethis" src="Pictures/plan/Decoration_6.png"/><div class="ButtonBackground" style="background-color: #f4d7cb;"></div></div> <div class="col-xtra-6 col-xs-3 "><img class="Decorationbtn animatethis" src="Pictures/plan/Decoration_7.png" /><div class="ButtonBackground" style="background-color: #f4d7cb;"></div></div><div class="col-xtra-6 col-xs-3 "><img class="Decorationbtn animatethis" src="Pictures/plan/Decoration_8.png" /><div class="ButtonBackground" style="background-color: #f4d7cb;"></div></div></div>
<div class="row"><div class=" col-xs-3 PlanRemove "></div><div class="col-xtra-6 col-xs-3 "> <img class="Decorationbtn" src="Pictures/plan/Decoration_9.png"/> <div class="ButtonBackground" style="background-color: #f4d7cb;"></div> </div><div class="col-xtra-6 col-xs-3 "><p class="decootherstyle" >OTHER</p> <textarea name="DecorationOther" class="inputstyle"></textarea> </div><div class="col-xtra-6 col-xs-3 PlanRemove"></div></div>
<div class="row AddMargin">
<div class="col-xtra-6" style="text-align:left"> <span class="glyphicon glyphicon-chevron-left Decorationbtn_prev" ></span> </div>
<div class="col-xtra-6" style="text-align:right"> <span class="glyphicon glyphicon-chevron-right Decorationbtn_next"></span> </div>
</div>
</div>
</div>
<!--6-->
<div id="Entertainment">
<div>
<div class="PlanWrapper">
<div class="row"><div class="col-xtra-12"><h1>PLAN YOUR EVENT</h1></div></div>
<div class="row"><div class="col-xtra-12" ><p>ENTERTAINMENT</p></div></div>
<div class="row">
<div class=" col-xs-12 col-sm-5">
<textarea name="DecorationOther" placeholder="WHAT IS THE OCCASION?"></textarea>
<textarea name="DecorationOther" placeholder="HOW MANY PERSONS ARE YOU INVITING?"></textarea>
<textarea name="DecorationOther" placeholder="SWEET CANAPE OR SAVORY CANAPE OR BOTH?"></textarea>
</div>
<div class="col-xs-12 col-sm-5"> <div class="EntArea"> <h5>THEMED SWEETS? YES OR NO</h5> <textarea name="DecorationOther" placeholder="(CUPCAKES, COOKIES, CAKE POPS, MINI CUPCAKES...)"></textarea> <div style="width:100%;"><p style="margin-right:5px; color:white">YES</p><p style="color: white;">NO</p></div> </div> </div>
<div class="col-xs-12 col-sm-2 nextbtn" > <span class="glyphicon glyphicon-circle-arrow-right"></span> </div>
</div>
<div class="row AddMargin">
<div class="col-xtra-6" style="text-align:left"> <span class="glyphicon glyphicon-chevron-left Entertainmentbtn_prev" ></span> </div>
<div class="col-xtra-6" style="text-align:right"> <span class="glyphicon glyphicon-chevron-right Entertainmentbtn_next"></span> </div>
</div>
</div>
</div>
</div>
<!--Plan Event Section-->
<!--Cake Section-->
<!--1-->
<div id="PlanCake" >
<div class="PlanWrapper">
<div class="row"><div class="col-xtra-12"><h1>CUSTOMIZE YOUR CAKE</h1></div></div>
<div class="row"><div class="col-xtra-12" ><p>WHAT IS YOUR EVENT?</p></div></div>
<div class="row"><div class=" col-xtra-6 col-xs-3 "><img class="PlanCakebtn" src="Pictures/plan/Customize-your-cake_01.png" /><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 "><img class="PlanCakebtn" src="Pictures/plan/Customize-your-cake_02.png" /><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 "><img class="PlanCakebtn" src="Pictures/plan/Customize-your-cake_03.png" /><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 "><img class="PlanCakebtn" src="Pictures/plan/Customize-your-cake_04.png" /><div class="ButtonBackground"></div></div></div>
<div class="row"> <div class=" col-xtra-6 col-xs-1_2 PlanRemove " ></div> <div class=" col-xtra-6 col-xs-3 " ><img class="PlanCakebtn" src="Pictures/plan/Customize-your-cake_05.png"/><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 " ><img class="PlanCakebtn" src="Pictures/plan/Customize-your-cake_06.png"/><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 "><img class="PlanCakebtn" src="Pictures/plan/Customize-your-cake_07.png" /><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-1_2 PlanRemove"></div></div>
<div class="row AddMargin">
<div class="col-xtra-6" style="text-align:left"> <span class="glyphicon glyphicon-chevron-left PlanCakebtn_prev" ></span> </div>
<div class="col-xtra-6" style="text-align:right"> <span class="glyphicon glyphicon-chevron-right PlanCakebtn_next"></span> </div>
</div>
</div>
</div>
<!--2-->
<div id="CakeSize">
<div class="PlanWrapper three">
<div class="row"><div class="col-xtra-12"><h1>CUSTOMIZE YOUR CAKE</h1></div></div>
<div class="row"><div class="col-xtra-12" ><p>WHAT IS THE SIZE NEEDED?</p></div></div>
<div class="row"><div class=" col-xtra-6 col-xs-4 "><img class="CakeSizebtn" src="Pictures/plan/Customize-your-cake-size_1.png" /><div class="ButtonBackground" style="background-color: #f4d7cb;"></div></div> <div class=" col-xtra-6 col-xs-4 " ><img src="Pictures/plan/Customize-your-cake-size_2.png" class="CakeSizebtn" /><div class="ButtonBackground" style="background-color: #f4d7cb;"></div></div> <div class=" col-xtra-6 col-xs-4 "><img src="Pictures/plan/Customize-your-cake-size_3.png" class="CakeSizebtn"/><div class="ButtonBackground" style="background-color: #f4d7cb;"></div></div>
<div class=" col-xtra-6 col-xs-2 PlanRemove " ></div><div class=" col-xtra-6 col-xs-4 " ><img class="CakeSizebtn"src="Pictures/plan/Customize-your-cake-size_4.png"/><div class="ButtonBackground" style="background-color: #f4d7cb;"></div></div> <div class=" col-xtra-6 col-xs-4 "><p class="decootherstyle" >OTHER</p> <textarea name="DecorationOther" class="inputstyle"></textarea> </div><div class=" col-xtra-6 col-xs-2 PlanRemove" ></div></div>
<div class="row AddMargin">
<div class="col-xtra-6" style="text-align:left"> <span class="glyphicon glyphicon-chevron-left CakeSizebtn_prev" ></span> </div>
<div class="col-xtra-6" style="text-align:right"> <span class="glyphicon glyphicon-chevron-right CakeSizebtn_next"></span> </div>
</div>
</div>
</div>
<!--Cake Section-->
<!--Table Section-->
<!--1-->
<div id="PlanTableOccasion" >
<div class="PlanWrapper">
<div class="row"><div class="col-xtra-12"><h1>CUSTOMIZE YOUR DISPLAY TABLE</h1></div></div>
<div class="row"><div class="col-xtra-12" ><p>WHAT IS YOUR OCCASION?</p></div></div>
<div class="row"><div class=" col-xtra-6 col-xs-3 "><img class="PlanTableOccasionbtn" src="Pictures/plan/Customize-your-cake_01.png" /><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 "><img class="PlanTableOccasionbtn" src="Pictures/plan/Customize-your-cake_02.png" /><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 "><img class="PlanTableOccasionbtn" src="Pictures/plan/Customize-your-cake_03.png" /><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 "><img class="PlanTableOccasionbtn" src="Pictures/plan/Customize-your-cake_04.png" /><div class="ButtonBackground"></div></div></div>
<div class="row"> <div class=" col-xtra-6 col-xs-3 " ><img class="PlanTableOccasionbtn" src="Pictures/plan/Customize-your-cake_05.png"/><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 " ><img class="PlanTableOccasionbtn" src="Pictures/plan/Customize-your-cake_06.png"/><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 "><img class="PlanTableOccasionbtn" src="Pictures/plan/Customize-your-cake_07.png" /><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 " ><img class="PlanTableOccasionbtn" src="Pictures/plan/Customize-your-cake_08.png"/><div class="ButtonBackground"></div></div></div>
<div class="row AddMargin">
<div class="col-xtra-6" style="text-align:left"> <span class="glyphicon glyphicon-chevron-left PlanTableOccasionbtn_prev" ></span> </div>
<div class="col-xtra-6" style="text-align:right"> <span class="glyphicon glyphicon-chevron-right PlanTableOccasionbtn_next"></span> </div>
</div>
</div>
</div>
<!--2-->
<div id="PlanTableDecorationType" >
<div class="PlanWrapper">
<div class="row"><div class="col-xtra-12"><h1>CUSTOMIZE YOUR DISPLAY TABLE</h1></div></div>
<div class="row"><div class="col-xtra-12" ><p>WHAT ARE WE DECORATING?</p></div></div>
<div class="row"><div class=" col-xtra-12"><img style="max-width: 300px; margin-bottom:20px;" class="PlanCakeBtn" src="Pictures/plan/what-are-we-decorating_main.png" /></div></div>
<div class="row"> <div class=" col-xtra-6 col-xs-4 " ><img class="PlanTableDecorationTypebtn" src="Pictures/plan/what-are-we-decorating_1.png"/><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-4 " ><img class="PlanTableDecorationTypebtn" src="Pictures/plan/what-are-we-decorating_2.png"/><div class="ButtonBackground" style="background-color:#91737c"></div></div> <div class=" col-xtra-6 col-xs-4 "><img class="PlanTableDecorationTypebtn" src="Pictures/plan/what-are-we-decorating_3.png" /><div class="ButtonBackground" style="background-color:#f4d7cb"></div></div></div>
<div class="row AddMargin">
<div class="col-xtra-6" style="text-align:left"> <span class="glyphicon glyphicon-chevron-left PlanTableDecorationTypebtn_prev" ></span> </div>
<div class="col-xtra-6" style="text-align:right"> <span class="glyphicon glyphicon-chevron-right PlanTableDecorationTypebtn_next"></span> </div>
</div>
</div>
</div>
<!--3-->
<div id="PlanEventDecoration">
<div class="PlanWrapper three">
<div class="row PlanTitle"><div class="col-xtra-12"><h1>CUSTOMIZE YOUR DISPLAY TABLE</h1></div></div>
<div><div class="CateringPadding"><p>DECORATION</p></div></div>
<div class="row AddMargin">
<div class=" col-xtra-6 col-xs-4 "><img class="PlanEventDecorationbtn" src="Pictures/plan/Decoration_10.png" /><div class="ButtonBackground" style="background-color: #f4d7cb;"></div></div>
<div class=" col-xtra-6 col-xs-4 "><img class="PlanEventDecorationbtn" src="Pictures/plan/Decoration_11.png" /><div class="ButtonBackground" style="background-color: #f4d7cb;"></div></div>
<div class=" col-xtra-6 col-xs-4 "><img class="PlanEventDecorationbtn" src="Pictures/plan/Decoration_12.png" /><div class="ButtonBackground" style="background-color: #f4d7cb;"></div></div>
<div class=" col-xtra-6 col-xs-4 "> <img class="PlanEventDecorationbtn" src="Pictures/plan/Decoration_13.png"/><div class="ButtonBackground" style="background-color: #f4d7cb;"></div></div>
<div class=" col-xtra-6 col-xs-4 "><img class="PlanEventDecorationbtn" src="Pictures/plan/Decoration_14.png"/><div class="ButtonBackground" style="background-color: #f4d7cb;"></div></div>
<div class=" col-xtra-6 col-xs-4 "><p class="decootherstyle" style="background-color: #f4d7cb;" >OTHER</p> <textarea name="DecorationOther" class="inputstyle"></textarea> </div></div>
<div class="row AddMargin">
<div class="col-xtra-6" style="text-align:left"> <span class="glyphicon glyphicon-chevron-left PlanEventDecorationbtn_prev" ></span> </div>
<div class="col-xtra-6" style="text-align:right"> <span class="glyphicon glyphicon-chevron-right PlanEventDecorationbtn_next"></span> </div>
</div>
</div>
</div>
<!--4-->
<div id="PlanTableColor" >
<div class="PlanWrapper">
<div class="row"><div class="col-xtra-12"><h1>CUSTOMIZE YOUR DISPLAY TABLE</h1></div></div>
<div class="row"><div class="col-xtra-12" ><p>WHAT IS YOUR TABLE COLOR?</p></div></div>
<div class="row"> <div class=" col-xtra-6 col-xs-3 " ><img class="PlanTableColorbtn" src="Pictures/plan/what-is-your-table-color_1.png"/><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 " ><img class="PlanTableColorbtn" src="Pictures/plan/what-is-your-table-color_2.png"/><div class="ButtonBackground" style=" background: silver; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, #cbcdce, #a9abae ,#cbcdce , #a7a9ac); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, #cbcdce, #a9abae, #cbcdce , #a7a9ac); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, #cbcdce, #a9abae, #cbcdce , #a7a9ac); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, #cbcdce, #a9abae , #cbcdce , #a7a9ac); /* Standard syntax (must be last) */"></div></div> <div class=" col-xtra-6 col-xs-3 "><img class="PlanTableColorbtn" src="Pictures/plan/what-is-your-table-color_3.png" /><div class="ButtonBackground"></div></div> <div class=" col-xtra-6 col-xs-3 "><img class="PlanTableColorbtn" src="Pictures/plan/what-is-your-table-color_4.png" /><div class="ButtonBackground"></div></div></div>
<div class="row"> <div class=" col-xtra-12 col-xs-3"><p class="decootherstyle" style="background-color: #f4d7cb;" >OTHER</p> </div> <div class="col-xtra-12 col-xs-9"> <input class="inputstyle3" /> </div></div>
<div class="row AddMargin">
<div class="col-xtra-6" style="text-align:left"> <span class="glyphicon glyphicon-chevron-left PlanTableColorbtn_prev" ></span> </div>
<div class="col-xtra-6" style="text-align:right"> <span class="glyphicon glyphicon-chevron-right PlanTableColorbtn_next"></span> </div>
</div>
</div>
</div>
<!--5-->
<div id="PlanEventCatering" style="left: 0px; right:0px ; margin:0 auto">
<div class="PlanWrapper">
<div class="row PlanTitle"><div class="col-xtra-12"><h1>CUSTOMIZE YOUR DISPLAY TABLE</h1></div></div>
<div class="row PlanOption"><div class="col-xtra-12"><p>CATERING?</p></div></div>
<div class="row AddMargin">
<div class="CateringPadding col-xtra-6 col-xs-4 "><img class="PlanEventCateringBtnTypebtn" src="Pictures/plan/Catering_4.png" /> <div class="ButtonBackground"></div></div>
<div class="CateringPadding col-xtra-6 col-xs-4 " ><img class="PlanEventCateringBtnTypebtn" src="Pictures/plan/Catering_5.png" /> <div class="ButtonBackground"></div></div>
<div class="CateringPadding col-xtra-6 col-xs-4 "><img class="PlanEventCateringBtnTypebtn" src="Pictures/plan/Catering_6.png" /> <div class="ButtonBackground"></div></div>
</div>
<div class="row PlanOption"><div class="col-xtra-12"><p>HOW MANY PEOPLE ARE WE CATERING TO?</p></div></div>
<div class="row AddMargin">
<div class="col-xtra-6 col-xs-4 "><img class="PlanEventCateringBtnNbbtn" src="Pictures/plan/NbCatering_1.png"/> <div class="ButtonBackground" style="background-color:#91737C"></div></div>
<div class="col-xtra-6 col-xs-4 "><img class="PlanEventCateringBtnNbbtn" src="Pictures/plan/NbCatering_2.png"/> <div class="ButtonBackground" style="background-color:#91737C"></div></div>
<div class="col-xtra-6 col-xs-4 "><img class="PlanEventCateringBtnNbbtn" src="Pictures/plan/NbCatering_3.png" /> <div class="ButtonBackground" style="background-color:#91737C"></div></div>
</div>
<div class="row AddMargin">
<div class="col-xtra-6" style="text-align:left"> <span class="glyphicon glyphicon-chevron-left PlanEventCateringbtn_prev" ></span> </div>
<div class="col-xtra-6" style="text-align:right"> <span class="glyphicon glyphicon-chevron-right PlanEventCateringbtn_next"></span> </div>
</div>
</div>
</div>
<!--Table Section-->
<!--Shared Final Section-->
<div id="FinalStep">
<div>
<div class="PlanWrapper">
<div class="row"><div class="col-xtra-12"><h1>CUSTOMIZE YOUR DISPLAY TABLE</h1></div></div>
<div class="row"><div class="col-xtra-12" ><p>FINAL STEP</p></div></div>
<div class="row">
<div class="col-sm-6 col-sm-6">
<input name="DecorationOther" placeholder="WHAT IS THE DATE?" />
<input name="DecorationOther" placeholder="NAME"/>
<input name="DecorationOther" placeholder="LOCATION"/>
<input name="DecorationOther" placeholder="E-MAIL"/>
<input name="DecorationOther" placeholder="TELEPHONE"/> </div>
<div class="col-sm-6 col-sm-6"> <textarea name="DecorationOther" placeholder="NOTES AND MESSAGES"></textarea> </div>
</div>
<div class="row"><div class="col-xtra-12" style="text-align:right"><p>SEND</p></div></div>
</div>
</div>
</div>
</div>
</div>