How to Add Stylish Contact page on the blogger free

Copy

Hello friends, now let's see how to design a Contact Page on the Blogger website. This method is very simple and safe. So there is no need to worry about this contact page. And it is very simple to install on your website. Now in your mind, the idea of how to install this contact form on your website will appear.

Before looking at how to install this contact Page on your site, what is a contact page? Let’s look at its applications and its necessity.

What is the Contact page?

A contact page is a form used to communicate. It is practically available in paper form and in digital form on websites and the like. What we are going to look at in this post today is about the Contact page found in digital form. It is often used on websites.

For example, the Contact form on a website acts as a bridge between website users and website owners. This is a must-have, for any Affiliate, promoting any program. See below for its applications.

What is the Usage of Contact page?

This Contact page is used to exchange feedback and complaints from visitors to your website.
This gives users the impression that your site is trustworthy.

Needs of Contact page?

The contact form is one of the requirements for approval in Google AdSense.
Used to make it easier for your users to communicate with you.

You want to download this script please hit the download button below.

Download

How to the Setup Contact page on the blogger Step by Step

Step 1: Open your Blogger Account

Step 2: Click Page Option on Blogger Dashboard

Step 3: change to Html mode on page view

Step 4: Copy the Downloaded contact page Script and paste your newly created page

Step 5: change blog id and blog URL

 
<style type="text/css">

        .contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:0}hr{position:relative;height:.75em;border:0;overflow:hidden;margin:0}hr:before{content:"";display:block;position:absolute;top:0;left:0;height:.75em;width:5.1em;background:#C4DD83;box-shadow:5em 0 0 0 #F4FCC9,10em 0 0 0 #FDCD78,15em 0 0 0 #ED786F,20em 0 0 0 #D99DBF,25em 0 0 0 #C39EDC,30em 0 0 0 #679DE2,35em 0 0 0 #62C2E3,40em 0 0 0 #F4FCC9,45em 0 0 0 #FDCD78,50em 0 0 0 #ED786F,55em 0 0 0 #D99DBF,60em 0 0 0 #C39EDC}.contactf-name,.contactf-email{float:left;width:49.25%}.contactf-name{margin-right:1.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:25px 0 0;padding:10px;font-size:15px;color:#ccc;border-color:#E8E8E8;border-width:2px 2px 4px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:40px;font-size:15px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#EE786F;border:0;border-bottom:2px solid #D4685C;outline:none;cursor:pointer;-webkit-box-shadow:inset 0 -2px #D4685C;box-shadow:inset 0 -2px #D4685C}.contact-form-button-submit:active{top:1px;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"><hr><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="E-mail address" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {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="Type your message here..." rows="5" type="text" value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send Message" /><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></div></form></div></div></div>

Step 6: Save the Page

Step 7: Well Done

Custom Modification on this Contact Page

1234567890000000000 Replace your Blog ID
www.pixabin.com Replace Your Blog URL

This Is an Important Changes please do not forget this step

Final Words

We hope this Contact page Script will be very helpful for your website. If you encounter any problem with this Contact page Script please let us know in the comment below. Our website always needs your support. So please share this blog as much as possible. And follow this website on Google News.

Pixabin Official