Send Form Checkout/Thank You Page - Step 2

product
Item Name Installation Step 2 Checkout Form andThank You Page
Price RM59.95
Description Tutorial add code snippets to install custom checkout with automated e-mail invoicing and notifications. Add custom Thank You auto re-deirect page for personal touch.
Stock/Size Available Location Blogger Dashboard > Add Pages section
More Details Go to Pages > Add Page > Blank Page > write the page title like so " Checkout " (without quotes).

Click HTML > copy below code to the Blogger editor body:-


<center>
<h2>
Currently in your Cart</h2>
</center>
<div class="simpleCart_items">
</div>
<div id="cartTotal">
<div class="total_quantity">
You have  <strong><span class="simpleCart_quantity"></span></strong> items in cart.</div>
<div class="total_amount">
Total Amount Due:  <strong><span class="simpleCart_total"></span></strong></div>
</div>
<div class="clear">
</div>
<br />
<div id="orderScroller">
<div id="contact-form">
<form action="" id="contact" method="post">
<fieldset>
<label for="firstname">First Name</label>
<input id="first_name" name="firstname" placeholder="First Name" title="Enter
your First Name" type="text" />
<br />
<label for="lastname">Last Name</label>
<input id="last_name" name="lastname" placeholder="Last Name" title="Enter
your Last Name" type="text" />
<br />
<label for="email">Your E-mail</label>
<input id="email" name="email" placeholder="yourname@domain.com" title="Your e-mail address" type="text" />
<br />
<label for="phone">Phone @ H/P</label>
<input id="phone" name="phone" placeholder="Preferred mobile number" type="text" />
<br />
<label for="address">Delivery Address</label>
<textarea id="address" name="address" placeholder="Full address please for prompt delivery, include unit number, street, area, state and country."></textarea>
<br />
<label for="postcode">Postal Code</label>
<input id="postcode" name="postcde" placeholder="Address postal code" type="text" />
<br />
<label for="message">Your Message</label>
<textarea id="comments" name="message" placeholder="Optional"></textarea>
 </fieldset>
<br />
Further details will be sent to you automatically via e-mail. We hope you had a great experience here at our store. We look forward for your next visit. Thank You.
</form>
<br />
<span style="float: right; font-size: 85%; margin-left: 2%; width: 48%;">
Please read through on our <a alt="terms and policy" href="http://goirsah.blogspot.com/p/policy.html"><strong>Terms and Policy</strong></a> for purchase orders submission. All details submitted are kept confidential and will not be published.
</span>
<!-- /end #contact-form -->
<a class="simpleCart_checkout" href="javascript:;"><span class="checkout_btn">Send Order</span></a>
</div>
<script type="text/javascript">
simpleCart({
    checkout: {
        type: "SendForm",
        url: "http://blogshop-cart.net76.net/sendcart.php",
        method: "POST",
        currency: "MYR",
        extra_data: {
           first_name: document.getElementById('first_name').value,
           last_name: document.getElementById('last_name').value,
           email: document.getElementById('email').value,
           phone: document.getElementById('phone').value,
           address: document.getElementById('address').value,
           postcode: document.getElementById('postcode').value,
           message: document.getElementById('comments').value,
           }
     }
});
</script>
</div>

To change your checkout currency find this code:-


currency: "MYR",


Currently it is set to Malaysian Ringgit. You can enter "USD" for US Dollar, "GBR" for Great Britain Pound Sterling etc. Find more pre-assigned currency code at http://simplecartjs.org.

You can also include your custom currency code through this template tutorial here.

After finished, click Publish Page. Double check that your page has a " Checkout " title before saving!

After your customer filled their details and cliked the send form button, the automated e-mail will re-direct to your own custom " Thank You " page.


Custom Thank You Page


You can create a personal thank you page by going to Pages > Add Page > Blank Page.

At the title area write " Thank You " (withput quotes).

On the body of the page you can customised a special thank you page for your customer when they have successfully submitted the checkout form.

A sample of the thank you page you can find here at http://my-blogshop-tool.blogspot.com

Feel free to copy the codes by right clicking and select View Page Source > copy the HTML codes form this line:-


<!-- Thank you page body starts -->


To this line of code snippet


<!-- Thank you page body ends -->


After you're done, click Publish Page and view the page that you have built.

Please cjeck that the URL of the bar will look like so:-


http://your_blog_name.blogspot.com/p/thank-you.html



If you do not have the above URL, create a new page a use the same steps stated.

You will have a quick start in building your own " thank you " page and starting your on-line business.


 

2012 My BlogShop Tool | Designed by: Irsah inDesigns | More Template at Blogger Template Collection