Contact Form 7 Ordering Form


/ Published in: HTML
Save to your folder(s)

Jump start effort required to create a simple order form. Form collects product/service info, shipping details, payment details and customer billing/shipping details.


Copy this code and paste it in your HTML
  1. Contact Form 7 Ordering Form:
  2.  
  3. <style type="text/css">
  4. <!--
  5. form { /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  6. font:100% verdana,arial,sans-serif;
  7. margin: 0;
  8. padding: 0;
  9. min-width: 500px;
  10. max-width: 600px;
  11. width: 560px;
  12. }
  13.  
  14. form fieldset {
  15. border: 1px dotted orange;
  16. padding: 12px; /* padding in fieldset support spotty in IE */
  17. margin: 0;
  18. }
  19.  
  20. form fieldset legend {
  21. font-size:1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
  22. /* be careful with padding, it'll shift the nice offset on top of border */
  23. font-weight: bold;
  24. color: #4F719C;
  25. }
  26.  
  27. form label {
  28. display: block; /* block float the labels to left column, set a width */
  29. float: left;
  30. width: 150px;
  31. padding: 0;
  32. margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
  33. text-align: right;
  34. }
  35.  
  36. form fieldset label:first-letter { /* use first-letter pseudo-class to underline accesskey, note that */
  37. text-decoration:underline; /* Firefox 1.07 WIN and Explorer 5.2 Mac don't support first-letter */
  38. /* pseudo-class on legend elements, but do support it on label elements */
  39. /* we instead underline first letter on each label element and accesskey */
  40. /* each input. doing only legends would lessens cognitive load */
  41. /* opera breaks after first letter underlined legends but not labels */
  42. }
  43.  
  44. form input, form textarea {
  45. /* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
  46. width:auto; /* set width of form elements to auto-size, otherwise watch for wrap on resize */
  47. margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
  48. label aligns textarea better in IE */
  49. }
  50.  
  51. form input#reset {
  52. margin-left:0px; /* set margin-left back to zero on reset button (set above) */
  53. }
  54.  
  55. textarea { overflow: auto; }
  56.  
  57. form small {
  58. display: block;
  59. margin: 0 0 5px 80px; /* instructions/comments left margin set to align w/ right column inputs */
  60. padding: 1px 3px;
  61. font-size: 88%;
  62. text-align: left;
  63. }
  64. form tagline {
  65. display: block;
  66. margin: 0 0 5px 160px; /* instructions/comments left margin set to align w/ right column inputs */
  67. padding: 1px 3px;
  68. font-size: 88%;
  69. text-align: left;
  70. }
  71.  
  72. form .required{font-weight:bold;} /* uses class instead of div, more efficient */
  73.  
  74. form br {
  75. clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
  76. }
  77.  
  78. -->
  79. <script type="text/javascript">
  80. <!--
  81. function toggle_visibility(id) {
  82. var e = document.getElementById(id);
  83. if(e.style.display == 'block')
  84. e.style.display = 'none';
  85. else
  86. e.style.display = 'block';
  87. }
  88. //-->
  89. <p><span style="color: red; font-weight:bold;">*</span>= required.</p>
  90.  
  91. <legend>Personal Information</legend>
  92. <label for="firstname">First name: </label>[text* first] <span style="color: red; font-weight:bold;">*</span>
  93. <label for="lastname">Last name: </label>[text* last] <span style="color: red; font-weight:bold;">*</span><br />
  94. <label for="email">Email: </label> [email* order-email] <span style="color: red; font-weight:bold;">*</span><br />
  95. <label for="phone">Phone: </label> [text* your-phone id:phone] <span style="color: red; font-weight:bold;">*</span>
  96.  
  97. <legend>Item/s</legend>
  98. <label for="item1-description">Item 1 Description: </label> [textarea* item1-description id:item1-description] <span style="color: red; font-weight:bold;">*</span>
  99. <a href="#item2" onclick="toggle_visibility('item2');">Add Item +</a>
  100. <div style="display:none;" id="item1">This is Item 1<p>
  101. </div>
  102. <a name="item2"> </a>
  103. <div id="item2" style="display: none;">
  104. <label for="description">Item 2 Description: </label> [textarea item2-description id:item2-description]
  105. <a href="#item3" onclick="toggle_visibility('item3');">Add Item +</a>
  106. </div>
  107.  
  108. <a name="item3"> </a>
  109. <div id="item3" style="display: none;">
  110. <label for="description">Item 3 Description: </label> [textarea item3-description id:item2-description]
  111. <a href="#item3" onclick="toggle_visibility('item4');">Add Item +</a>
  112. </div>
  113.  
  114. <a name="item4"> </a>
  115. <div id="item4" style="display: none;">
  116. <label for="description">Item 4 Description: </label> [textarea item4-description id:item4-description]<span style="color: red; font-weight:bold;">*</span>
  117. </div>
  118.  
  119.  
  120. <legend>Delivery</legend>
  121. <label for="delivery">Delivery Options</label> [checkbox* checkbox-delivery-991 id:delivery exclusive "Next Day" "3-4 Days" "7-10 Days"] <span style="color: red; font-weight:bold;">*</span>
  122.  
  123. <legend>Payment</legend>
  124. <label>Credit Card:</label> [radio radio-ordering-951 "Visa" "MasterCard" "Amex"]<br />
  125. <label>Card Number:</label> [text* text-cc-647 40/] <span style="color: red; font-weight:bold;">*</span>
  126. <label>Expiration</label>
  127. <label>Month:</label> [text* cc-expiration-month 2/2] Year:[text* cc-expiration-year id: cc-expiration-year 4/4] xx/xxxx format
  128. <label>CVV:</label> [text* cvv 3/3] <span style="color: red; font-weight:bold;">*</span> <span style="font-size: 88%;">(three digit code from back of your card)</span>
  129.  
  130. <legend>Billing Address</legend>
  131. <label>Billing Name:</label> [text billing-name]
  132. <tagline>(if different from above - as it appears on your credit card)</tagline>
  133. <label>Billing Address:</label> [text* billing-street1] <span style="color: red; font-weight:bold;">*</span>
  134. <label>Billing Address 2:</label> [text billing-street2]
  135. <label>City:</label> [text* billing-city] <span style="color: red; font-weight:bold;">*</span>
  136. <label>State:</label> [text* billing-state 2/2] Zip:[text* billing-zip 8/8] <span style="color: red; font-weight:bold;">*</span>
  137. <label>Country</label>[select menu-order-country "USA" "Canada"]
  138.  
  139. <legend>Shipping Address</legend>
  140. <tagline>(if different from above)</tagline>
  141. <label>First:</label> [text shipping-first]
  142. <label>Last:</label> [text shipping-last]
  143. <label>Address:</label> [text shipping-street1]
  144. <label>Address 2:</label> [text shipping-street2]
  145. <label>City:</label> [text shipping-city]
  146. <label>State:</label> [text shipping-state 2/2] Zip:[text shipping-zip 8/8]
  147.  
  148. <legend>Captcha</legend>
  149. [captchac captcha-80]
  150. <label>Enter the letters from above:</label> [captchar captcha-80] <!-- requires really simple captcha plugin -->
  151. <tagline>(not cAse sEnsiTivE)</tagline>
  152.  
  153. <legend>Place Order</legend>
  154. [submit "Order Now"]

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.