联系方式7订购方式

Posted 2021-02-23

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

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>