Contact Form 7

Hello, Good Day!

How about you set the item as a drop down option as well so in this case you’ll only have 3 column.

Example:
[select Product “Product 1” “Product 2” “Product 3” “Product 4” “Product 5” “Product 6” “Product 7” “Product 8” “Product 9” “Product 10”] |
[select Quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]

And in your Mail setup under contact form settings it is easy to layout so you would understand immediately the request.

Hi
I have managed this but now the spacing is out- the is a huge gap between the product and the drop down menu.
Please help

<label> Your Name
[text* your-name] </label><br/>
<label> Your Email
[email* your-email] </label><br/>

<label> Contact Number
[tel* Contact-Number]</label><br/>

<label> Delivery Address:<br>N.B. must be a physical address that is occupied during weekday offices hours, to enable courier service delivery.
[text* Your-Address]</label><br/>

<label> Products </label>
<div class=”clearfix”>
<div id=”left” align=”left”>[checkbox Product exclusive “Balti Butter Chicken”]</div>
<div id=”right”>[select quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]<br/><br/></div>
<div class=”clearfix”>
<div id=”left” align=”left”>[checkbox Product exclusive “Biriyani”]</div>
<div id=”right”>[select quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]<br/><br/></div>
<div class=”clearfix”>
<div id=”left” align=”left”>[checkbox Product exclusive “Bobotie”]</div>
<div id=”right”>[select quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]<br/><br/></div>
<div class=”clearfix”>
<div id=”left” align=”left”>[checkbox Product exclusive “Cashew Korma”]</div>
<div id=”right”>[select quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]<br/><br/></div>
<div class=”clearfix”>
<div id=”left” align=”left”>[checkbox Product exclusive “Chicken Tikka”]</div>
<div id=”right”>[select quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]<br/><br/></div>
<div class=”clearfix”>
<div id=”left” align=”left”>[checkbox Product exclusive “Chilli Con Carne”]</div>
<div id=”right”>[select quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]<br/><br/></div>
<div class=”clearfix”>
<div id=”left” align=”left”>[checkbox Product exclusive “Madras Beef Curry”]</div>
<div id=”right”>[select quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]<br/><br/></div>
<div class=”clearfix”>
<div id=”left” align=”left”>[checkbox Product exclusive “Masala Curry”]</div>
<div id=”right”>[select quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]<br/><br/></div>
<div class=”clearfix”>
<div id=”left” align=”left”>[checkbox Product exclusive “Mild Cape Curry”]</div>
<div id=”right”>[select quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]<br/><br/></div>
<div class=”clearfix”>
<div id=”left”align=”left”>[checkbox Product exclusive “Nasi Goreng”]</div>
<div id=”right”>[select quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]<br/><br/></div>
<div class=”clearfix”>
<div id=”left” align=”left”>[checkbox Product exclusive “Pickled Curried Fish”]</div>
<div id=”right”>[select quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]<br/><br/></div>
<div class=”clearfix”>
<div id=”left” align=”left”>[checkbox Product exclusive “Roasted Vegetable Curry”]</div>
<div id=”right”>[select quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]<br/><br/></div>
<div class=”clearfix”>
<div id=”left”align=”left”>[checkbox Product exclusive “Saucy Seafood Curry”]</div>
<div id=”right”>[select quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]<br/><br/></div>
<div class=”clearfix”>
<div id=”left” align=”left”>[checkbox Product exclusive “Spiced Lamb Pot”]</div>
<div id=”right”>[select quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]<br/><br/></div>
<div class=”clearfix”>
<div id=”left” align=”left”>[checkbox Product exclusive “Spicy Goulash”]</div>
<div id=”right”>[select quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]<br/><br/></div>
<div class=”clearfix”>
<div id=”left” align=”left”>[checkbox Product exclusive “Tandoori Chicken”]</div>
<div id=”right”>[select quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]<br/><br/></div>
<div class=”clearfix”>
<div id=”left”align=”left”>[checkbox Product exclusive “Venison Pot”]</div>
<div id=”right”>[select quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]<br/><br/></div>
<div class=”clearfix”>
<div id=”left”align=”left”>[checkbox Product exclusive “Vindaloo”]</div>
<div id=”right”>[select quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]<br/><br/></div>
<div class=”clearfix”>
<div id=”left” align=”left”>[checkbox Product exclusive “Chargrill Shaker”]</div>
<div id=”right”>[select quantity “1” “2” “3” “4” “5” “6” “7” “8” “9” “10”]<br/><br/></div>

A copy of this message will be sent to you <br/>

[submit “Order Now!”]

CSS:
/*Order Form*/
.wpcf7 {
text-align: center;
width: 90%;
}
.wpcf7-select {
background-color:#ffffff;
color:#ff6600;
}
.wpcf7 label {
font-family: ‘Souvenir Lt Bt Light’, sans-serif;
font-size:30px;
color: #FF6600;
}

/* Submit Button CSS Styles Order Form*/

#wpcf7-f1189-p1157-o1.wpcf7 input[type=submit] {
padding:15px 45px;
background:#FF6600;
color:#fff;
font-size:30px;
font-weight:bold;
border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* Label Text Styles */

#wpcf7-f1189-p1157-o1.wpcf7 label {
font-family: ‘Souvenir Lt Bt Light’, sans-serif;
font-size:30px; color:#FF6600;
}

/* Text Input Field Styles */

#wpcf7-f1189-p1157-o1.wpcf7 input[type=text],
#wpcf7-f1189-p1157-o1 .wpcf7 input[type=”text”], input[type=”email”],
input[type=”tel”], input[type=”number”], textarea, select,
#wpcf7-f1189-p1157-o1 .wpcf7 input[type=Contact-Number],
#wpcf7-f1189-p1157-o1 .wpcf7 input[type=number], .wpcf7 .wpcf7-select {
font-size:20px;
}

/* Change input field styles when click into (on focus) */
.wpcf7 input[type=text]:focus,.wpcf7 input[type=email]:focus,.wpcf7 input[type=tel]:focus {
background-color:lightblue;
border:none;
}

.wpcf7 input[type=text]:active, .wpcf7 input[type=email]:active, .wpcf7 input[type=tel]:active {
background-color:#FF6600;
}
input[type=checkbox]{
content: “\f0c8″;
text-align: center;
}

/*— 2 Column Form Styles Start —*/

#left {

width: 47%;
float: left;
margin-right:6%;
}

#right {
width: 47%;
float: left;
}

.clearfix:after {
content:”\0020”;
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
margin-bottom:10px;
}

.clearfix {
display:block;
}

/*— 2 Column Form Styles End —*/

sorted