Revision: 67716
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at October 21, 2014 01:10 by FlashBuddy
Initial Code
Contact Form 7 Ordering Form: <style type="text/css"> <!-- form { /* set width in form, not fieldset (still takes up more room w/ fieldset width */ font:100% verdana,arial,sans-serif; margin: 0; padding: 0; min-width: 500px; max-width: 600px; width: 560px; } form fieldset { border: 1px dotted orange; padding: 12px; /* padding in fieldset support spotty in IE */ margin: 0; } form fieldset legend { font-size:1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */ /* be careful with padding, it'll shift the nice offset on top of border */ font-weight: bold; color: #4F719C; } form label { display: block; /* block float the labels to left column, set a width */ float: left; width: 150px; padding: 0; margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */ text-align: right; } form fieldset label:first-letter { /* use first-letter pseudo-class to underline accesskey, note that */ text-decoration:underline; /* Firefox 1.07 WIN and Explorer 5.2 Mac don't support first-letter */ /* pseudo-class on legend elements, but do support it on label elements */ /* we instead underline first letter on each label element and accesskey */ /* each input. doing only legends would lessens cognitive load */ /* opera breaks after first letter underlined legends but not labels */ } form input, form textarea { /* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */ width:auto; /* set width of form elements to auto-size, otherwise watch for wrap on resize */ margin:5px 0 0 10px; /* set margin on left of form elements rather than right of label aligns textarea better in IE */ } form input#reset { margin-left:0px; /* set margin-left back to zero on reset button (set above) */ } textarea { overflow: auto; } form small { display: block; margin: 0 0 5px 80px; /* instructions/comments left margin set to align w/ right column inputs */ padding: 1px 3px; font-size: 88%; text-align: left; } form tagline { display: block; margin: 0 0 5px 160px; /* instructions/comments left margin set to align w/ right column inputs */ padding: 1px 3px; font-size: 88%; text-align: left; } form .required{font-weight:bold;} /* uses class instead of div, more efficient */ form br { clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */ } --> </style> <script type="text/javascript"> <!-- function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } //--> </script> <p><span style="color: red; font-weight:bold;">*</span>= required.</p> <fieldset> <legend>Personal Information</legend> <label for="firstname">First name: </label>[text* first] <span style="color: red; font-weight:bold;">*</span> <label for="lastname">Last name: </label>[text* last] <span style="color: red; font-weight:bold;">*</span><br /> <label for="email">Email: </label> [email* order-email] <span style="color: red; font-weight:bold;">*</span><br /> <label for="phone">Phone: </label> [text* your-phone id:phone] <span style="color: red; font-weight:bold;">*</span> </fieldset> <fieldset> <legend>Item/s</legend> <label for="item1-description">Item 1 Description: </label> [textarea* item1-description id:item1-description] <span style="color: red; font-weight:bold;">*</span> <a href="#item2" onclick="toggle_visibility('item2');">Add Item +</a> <div style="display:none;" id="item1">This is Item 1<p> </div> <a name="item2"> </a> <div id="item2" style="display: none;"> <label for="description">Item 2 Description: </label> [textarea item2-description id:item2-description] <a href="#item3" onclick="toggle_visibility('item3');">Add Item +</a> </div> <a name="item3"> </a> <div id="item3" style="display: none;"> <label for="description">Item 3 Description: </label> [textarea item3-description id:item2-description] <a href="#item3" onclick="toggle_visibility('item4');">Add Item +</a> </div> <a name="item4"> </a> <div id="item4" style="display: none;"> <label for="description">Item 4 Description: </label> [textarea item4-description id:item4-description]<span style="color: red; font-weight:bold;">*</span> </div> </fieldset> <fieldset> <legend>Delivery</legend> <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> </fieldset> <fieldset> <legend>Payment</legend> <label>Credit Card:</label> [radio radio-ordering-951 "Visa" "MasterCard" "Amex"]<br /> <label>Card Number:</label> [text* text-cc-647 40/] <span style="color: red; font-weight:bold;">*</span> <label>Expiration</label> <label>Month:</label> [text* cc-expiration-month 2/2] Year:[text* cc-expiration-year id: cc-expiration-year 4/4] xx/xxxx format <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> </fieldset> <fieldset> <legend>Billing Address</legend> <label>Billing Name:</label> [text billing-name] <tagline>(if different from above - as it appears on your credit card)</tagline> <label>Billing Address:</label> [text* billing-street1] <span style="color: red; font-weight:bold;">*</span> <label>Billing Address 2:</label> [text billing-street2] <label>City:</label> [text* billing-city] <span style="color: red; font-weight:bold;">*</span> <label>State:</label> [text* billing-state 2/2] Zip:[text* billing-zip 8/8] <span style="color: red; font-weight:bold;">*</span> <label>Country</label>[select menu-order-country "USA" "Canada"] </fieldset> <fieldset> <legend>Shipping Address</legend> <tagline>(if different from above)</tagline> <label>First:</label> [text shipping-first] <label>Last:</label> [text shipping-last] <label>Address:</label> [text shipping-street1] <label>Address 2:</label> [text shipping-street2] <label>City:</label> [text shipping-city] <label>State:</label> [text shipping-state 2/2] Zip:[text shipping-zip 8/8] </fieldset> <fieldset> <legend>Captcha</legend> [captchac captcha-80] <label>Enter the letters from above:</label> [captchar captcha-80] <!-- requires really simple captcha plugin --> <tagline>(not cAse sEnsiTivE)</tagline> </fieldset> <fieldset> <legend>Place Order</legend> [submit "Order Now"] </fieldset>
Initial URL
Initial Description
Jump start effort required to create a simple order form. Form collects product/service info, shipping details, payment details and customer billing/shipping details.
Initial Title
Contact Form 7 Ordering Form
Initial Tags
form
Initial Language
HTML