Thursday, May 10, 2012

Add pure Html 5, Css 3 Contact us form to Blogger and Wordpress blogs

Posted On 1 comments Follow us on twitter
pure html 5 and css 3 formAcross the web you may find many widgets, Many of them are JavaScript, jQuery, jQuery mobile, Css (Cascading Style Sheets), html and other web frameworks based. Today we are sharing tutorial to add pure Css 3 (latest version of Cascading Style Sheets), Html 5 based contact us form to Blogger / Blogspot and Wordpress blogs. This is very attractive form, when you move mouse over plain text in this form, text will hover. Html 5 is supported on all latest desktop as well as mobile browsers.



Here is image showing some browsers Html 5 capabilities score:
Html 5 capabilities
Image source: infoworld

Note: many old browsers doesn’t support Html 5.

Form Features:

No JavaScript
No images at all (Only in captcha)
Styled text area
Hover effect on clicking button and moving over text
Bordered area
Captcha to avoid robot automation
Pure Css 3 and Html 5
Super lite codded (for fast page loading)
Supported on all latest browsers (Tested on Mozilla Firefox 12, Google Chrome 18, Android 3.0 (Honeycomb) and Opera 11.x)
.....More






Get Html:

Before i tell you how to add css 3 / html 5 form to blogger and wordpress, you need html and Css code.
First of all go to http://foxyform.com and select Name, Email, Website, Subject from options (If you want to choose more or less options then comment here I will compose this for you), and enter your email (where your form emails will be sent) and click create formular, after that you will get form code, complete code is not needed, we need only id and sec_hesh id can be found in iframe src as highlighted in below screenshot:




contact us


Now you have your form id and sec_hash code and here is Html 5 / Css 3 based form code:

<link rel="stylesheet" href="http://dl.dropbox.com/u/77220054/widgets/htmlcss3contactusform/style.css" type="text/css" media="all" />
<link href='http://dl.dropbox.com/u/77220054/widgets/htmlcss3contactusform/font/contact%20us%20form%20font.css' rel='stylesheet' type='text/css'>
<div id="content-form">
<h6> Contact me </h6>
<form method="post" autocomplete="on" action="http://www.foxyform.com/form.php?id=yourformid&amp;mail=send&amp;sec_hash=sec hash">
<p> <label class="iconic" for="name"> Your Name <span class="required">*</span></label> <input class="form" type="text" name="name" id="username" required="required" placeholder="Hi friend, how may I call you ?" /> </p>
<p> <label class="iconic" for="mail"> E-mail <span class="required">*</span></label> <input class="form" type="email" name="email" id="usermail" placeholder="Email will be used only for contact you." required="required" /> </p>
<p> <label class="iconic" for="site"> Website </label> <input class="form" type="url" name="webseite" id="usersite" placeholder="eg: yoursite.com" /> </p>
<p> <label class="iconic" for="subject"> Subject </label> <input class="form" type="text" name="subject" id="subject" placeholder="What would you like to talk about?" /> </p>
<p> <label class="iconic" for="message"> Message <span class="required">*</span></label> <textarea name="nachricht" placeholder="Don't be shy, send message that you want to sent and I'll answer as soon as possible " required="required"></textarea> </p>
<label><p>Solve Captcha <span class="required">*</span></label><br/><img src="http://www.foxyform.com/captcha/captcha.php?color=ffffff" title="Send message!"><br/><input placeholder="Type the captcha listed up to make sure you are human?" type="text" name="sicherheitscode" class="captcha" size="6" maxlength="5"></p>
<p class="indication"> All areas marked with <span class="required">*</span> are required</p>
<input type="submit" class="formsubmit" value="Send message !" />
</form><br/>
<p style="color:#878787;font-size:12px;font-style:italic;padding-right:10px;text-align:right"><a href="http://www.inpixelitrust.fr/blog/en/">St├ęphanie Walter</a> | <a href="http://www.onextrapixel.com">Onextrapixel</a> | <a href="http://www.tipsntech.net">TipsnTech</a></p>
</div>

Replace you yourformid with your form id and sec hash with your sec_hash code got from foxyform, now your html code for adding to a site.
Note: foxyform service is for creating web forms but default forms are classic and framed but with coding listed up your form will be converted into Html 5 , Css 3 and non-framed.


How to add to Blogger / Blogspot blogs:

Follow below steps to add this form to Blogger.
1. Go to blogger dashboard
2. Select pages > new page > blank (add text and media)
3. Title your page as you want (i.e. contact us, contact or other)
4. Switch mode from compose to html and add your html code
5. Preview your page to check its working or not.
6. Publish your page
You can see demo for blogger by visiting our contact us form because we are also using this one.

How to add this form to wordpress blog:

Use below steps to add it to wp blogs:
1. Go to admin dashboard
2. Go to pages > add new
3. Title your page
4. Add html to html tab and publish

Note: don’t turn into visual code while adding html because your code will be disappeared.

See preview from wordpress:

contact us

For Other Cms and web frameworks:

Go to page section of any cms and add Html, Css code to it, I'm sure that it will definitely works.

Credit:

Credit for Css 3 and Html 5 goes to St├ęphanie Walter (a French web developer), Oneonextrapixel.com and modified by Ahmed. Please respect copyright, if you are sharing this with others, link to us and the original author.

1 comment: