Create Send Order Page with HTML5 Form & Validation

This section includes the full send order form codes for copying & pasting which includes instructions to edit the available settings. Here, also explains how to create a basic Blogger Page & adding the required settings to initialise the send order form. For BlogrCart Closet PRO Version theme, the send order form comes equipped with HTML5 form validation & Bootstrap 3.++ form classes as an added feature. Jquery Validation plug-in is also pre-installed & users can customize the error text handler for the form fields easily via template editor. Freemium theme users will also have a basic form validation which allows to receive legitimate orders from their respective page.

$ 245.00

- Select Colour - Blue White Black

- Select Size - Size S Size M Size L

Add to Cart

• Codes & Instructions

PRO Versions This section has already been included with downloaded files. Upload the files & the Send Order page is pre--installed. Freemium Template Follow these instructions for accurate results. Before creating the form, create the send order page using Blogger Pages. Go to Pages & click the Add New Page button/tab. In the new Page, type Send Order as the Page Title. Click Save Page to save your title. Click the HTML tab located at far left of Blogger editor. Copy below codes & paste in the editor body. <div class="row">   <div class="col-sm-4 col-md-push-8">     <div class="panel panel-default">       <div class="panel-heading">         <h4>Order Summary</h4>       </div>       <div class="panel-body">         <small>Below is your order summary &amp; totals.</small>       </div>       <div class="table-responsive">         <table class="table">         <tbody>           <tr><th>Description</th><th>Amount</th></tr>           <tr><td>Quantity in Cart</td><td><span class="simpleCart_quantity"></span></td></tr>           <tr><td>Amount</td><td><span class="simpleCart_total"></span></td></tr>           <tr><td>Tax</td><td><span class="simpleCart_tax"></span></td></tr>           <tr><td>Shipping/Delivery</td><td><span class="simpleCart_shipping"></span></td></tr>           </tbody>        </table>     </div>     <div class="panel-footer">     Total Orders for Today: <strong><span class="simpleCart_grandTotal"></span></strong>     </div>   </div> </div> <!-- //end col-sm-4 --> <div class="col-sm-8 col-md-pull-4">   <form action="" id="contact" method="post" name="contact" role="form">     <div class="panel panel-default">       <div class="panel-heading">         <a class="btn btn-default pull-right" data-target="#blogrcart-view-modal" data-toggle="modal" href="javascript:;"><i class="fa fa-shopping-cart"></i> View Shopping Cart</a>           <h3 style="margin: 0;">Send in Orders</h3>           <small>Details submitted here will not be published.</small>       </div>       <div class="panel-body">         <div class="form-group ">            <label for="first_name">First Name</label>            <input class="form-control" id="first_name" name="first_name" type="text" />       </div>         <div class="form-group">           <label for="last_name">Last Name</label>           <input class="form-control" id="last_name" name="last_name" type="text" />         </div>         <div class="form-group">          <label for="email">Your E-mail</label>          <input class="form-control" id="email" name="email" type="email" />         </div>         <div class="form-group">           <label for="phone">Phone @ H/P</label>          <input class="form-control" id="phone" name="phone" type="tel" />       </div>       <div class="form-group">           <label for="address">Delivery Address</label>         <textarea class="form-control" id="address" name="address" placeholder="" rows="5"></textarea>       </div>       <div class="form-group">         <label for="postcode">Postal Code</label>         <input class="form-control" id="postcode" name="postcode" type="text" />    </div>       <div class="form-group">         <label for="message">Your Message</label>         <textarea class="form-control" id="message" name="message" rows="5"></textarea>    <span class="helper-block text-info small">Please include additional messages to us here.</span>         </div>         <div class="well well-sm"> A copy of your order details will be sent to you via e-mail. Please check your email inbox upon success submissions. Thank You.         </div>       </div>     <div class="panel-footer text-center"> <a class="btn btn-default" id="send-order">Send Order</a>     </div>   </div> </form> <!-- //end form --> </div> <!-- //end col-sm-8 --> <div class="clearfix"></div> </div> <!-- //end row --> Click the Compose Tab & then click Save Page. Edit the Page general settings (if required) located at the editor sidebar, click Publish to publish your Page. To grab your new Send Order Page URL created, while still at your Pages section click the View link located below the Send Order page link. At the new window, copy the full URL to your Send Order page from your browser URL bar & save it using your PC favourite text editor. This url will be used in the template editor where applies.