How To Add Responsive Stylish Contact Us Page On Blogger

WebsDuniya

Friday, August 10, 2018

Add Responsive Stylish Contact Us Page On Blogger

Add Responsive Stylish Contact Us Page On Blogger

Today we are coming here a exciting tricks for blogger.- the custom stylish contact us form widgets for Blogger to leave it with stylish looks. The contact us form is made with HTML and javascript to allow you apply in your static contact us page to allow your blogger blog users reach out to you easily.👍 To Create Custom Contact Forms for Blogger you have to set destination for emails in your code and then add the widget in your static page. The special features that every contact us form have names entries and email address which are a must in the widget gadget to allow sending of the email messages.

So Follow Our Below Step To Add Stylish Responsive Contact Form.

👉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.

Thank You ; For Reading Our Article, Hope You Are Like This Post. May Be Helpful For You. Then on't Forget To Share This.

Cancel

Please Don't Spam.