Add Responsive Stylish Contact Us Page On Blogger
 |
| Add Responsive Stylish Contact Us Page On Blogger |
So Follow Our Below Step To Add Stylish Responsive Contact Form.
Also Read : Add Responsive Blogger Stats Widget
??First You Need To This Code On <head> tag Below
<meta content='WebDnuniya' name='author'/><meta content='xxxxx' name='email'/><link href='https://plus.google.com/xxxxx/about' rel='author'/><link href='https://plus.google.com/xxxxx/posts' rel='publisher'/><link href='https://plus.google.com/xxxxx' rel='me'/>
??Next You Need to Go To Blogger >>Pages>>Click New Page>> Change Compose To Html Tab
??Then Paste Below Code To The Html Tab Area.??
<style type="text/css">.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}.contactf-name,.contactf-email{float:left;width:48.25%}.contactf-name{margin-right:3.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 20px;padding:10px 15px;font-size:12px;letter-spacing:1px;color:#454545;background:#f2f4f4;border:medium none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:37px}.contact-form-email-message{height:170px}.contact-form-button-submit,.contact-form-button-submit:hover{width:13%;height:30px;font:normal 12px Arial;letter-spacing:1px;color:#fff;display:block;outline:none;margin-bottom:20px;text-align:center;background:#f1c40f;border:0;cursor:pointer}.contact-form-button-submit:active{outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}</style>
<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><div class="form"><form name="contact-form"><div class="contactf-name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="NAME" onblur='if (this.value == "") {this.value = "NAME";}' onfocus='if (this.value == "NAME") {this.value = "";}' /></div><div class="contactf-email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="EMAIL" onblur='if (this.value == "") {this.value = "EMAIL";}' onfocus='if (this.value == "EMAIL") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" value="MESSAGE" onblur='if (this.value == "") {this.value = "MESSAGE";}' onfocus='if (this.value == "MESSAGE") {this.value = "";}'></textarea></div><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></form></div></div></div>
??That's It ; Now Save This Page and Check You Look an Elegant Contact Us Page.
Above Code Made With CSS & HTML .Developed By - Webduniya. This Code Is Clean Seo Friendly, Responsive Design.
??Author Note***
You can also customize the words NAME, MESSAGE, EMAIL and SEND in the HTML part of the above contact form widget.
Advantage Of This Widget :-
- Your blogger blog visitors get to be in touch with you for support.
- This engages your visitors to your website and increases Click Through Rate.
- Visitors In your blogger blog feel acknowledged and that can increase your blogger traffic.
0 Comments