Creating Credit Card Payment Forms With HTML5
HTML5 makes styling websites far easier than before. That also allows for the creation of forms to be easier as well. In this tutorial, you will learn how to use HTML5 to make a credit card payment form.
The first is all the personal information, the second is the address for mailing and the third is the card detail portion. At the very bottom of the form, we have our submit button. Now this is merely the skeleton of the code. The actual form functionality comes from a database. Remember, once the information gets submitted it needs to be processed and taxes needs to be calculated as well as shipping.
There are also ways to use this form and simply connect it to merchant accounts or a third party system such as Paypal or Google Checkout! In reality, there are many ways in which you can apply today’s lesson.
The final product, when ran, should appear like the image below:
Setup
If you have not already done so, open Visual Studio and begin a new web project. If you prefer to use your own development environment or a text editor such as notepad, you can set them up at this time.We stand behind Server Intellect and their support team. They offer dedicated servers, and they are now offering cloud hosting!
Step 1.
The first thing you will do is set up your typical HTML document with your HTML, head, and body tags. The code for the page is as follows:Code Block
index.html
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Step 2.
The next thing we will do is include all of the necessary information for taking credit card payments. It is quite a bit of information so if anything, the code is provided for you below to copy and paste into your file or download the source code located at the end of the tutorial.Code Block
index.html
<section>
<form id=payment>
<fieldset>
<ol>
<li>
<label for=name>Name</label>
<input id=name name=name type=text placeholder="First and last name" required autofocus />
</li>
<li>
<label for=email>Email</label>
<input id=email name=email type=email placeholder="example@domain.com" required />
</li>
<li>
<label for=phone>Phone</label>
<input id=phone name=phone type=tel placeholder="Eg. +14445556666" required />
</li>
</ol>
</fieldset>
<fieldset>
<legend>Delivery address</legend>
<ol>
<li>
<label for=address>Address</label>
<textarea id=address name=address rows=5 required>
</textarea>
</li>
<li>
<label for=postcode>Post Code</label>
<input id=postcode name=postcode type=text required />
</li>
<li>
<label for=country>Country</label>
<input id=country name=country type=text required />
</li>
</ol>
</fieldset>
<fieldset>
<legend>Card Details</legend>
<ol>
<li>
<fieldset>
<legend>Card Type</legend>
<ol>
<li>
<input id=visa name=cardtype type=radio />
<label for=visa>VISA</label>
</li>
<li>
<input id=amex name=cardtype type=radio />
<label for=amex>AmEx</label>
</li>
<li>
<input id=mastercard name=cardtype type=radio />
<label for=mastercard>Mastercard</label>
</li>
</ol>
</fieldset>
</li>
<li>
<label for=cardnumber>Card Number</label>
<input id=cardnumber name=cardnumber type=number required />
</li>
<li>
<label for=secure>Security Code</label>
<input id=secure name=secure type=number required />
</li>
<li>
<label for=namecard>Name on Card</label>
<input id=namecard name=namecard type=text placeholder="Exact namne as on the card" required />
</li>
</ol>
</fieldset>
<fieldset>
<button type=submit>Buy It!</button>
</fieldset>
</form>
</section>
There are also ways to use this form and simply connect it to merchant accounts or a third party system such as Paypal or Google Checkout! In reality, there are many ways in which you can apply today’s lesson.
The final product, when ran, should appear like the image below:
A Few Last Words…
HTML5 has opened an entire new programming sensation with the new tags provided and cleaner syntax. Thank you for being a valued reader and join us next time for additional HTML tutorials.Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!
Button