How to Add Stylish Contact Us Page(Contact Form) in Blogger?

How to Add Stylish Contact Us Page(Contact Form) in Blogger?



If you have a Blog in Blogger then you must need a Contact us Page to give your viewers to communicate with you. Blogger has its own Contact page Widget available in the Blogger’s default layout. But these are not good looking or attractive to use it. So today

 I will teach you how to create stylish contact 

form (page) for blogger.



Step 1
First of all, you need to add the blogger contact form widget on your blog. This will enable the functionality of the contact form. So what to do?

Go to your Blogger Dashboard
Select Layout




Click on the Add a Gadget on Sidebar 1 or 2

A popup will show and click add More Gadgets.
Click on the Blue Plus Button on the Contact Form Gadget and then Save it.
I already added so there is no plus button




Now you have added the Blogger Contact Form on your blog. now you have to hide this default blogger contact form widget and make its eye-catching stylish contact form in a  Contact Us page.


Step 2:
To hide default Blogger Contact widget Form

 Click on the Template tab and go to the Edit HTML button.







 Now click edit  HTML  and press ctrl+F button on the keyboard under HTML code box (important)
A search box will appear, where you type the code: ]]></b:skin> and hit Enter.
Now just paste the small CSS code just above this ]]></b:skin>.
Save your template

Code:       
             div#ContactForm1 {
               display: none !important;
               }



Reload your blog and you will see the default contact widget disappears.


Step 3

we have used some Font Awesome icons in these blogger contact widget form. So you will have to put this style sheet into your blogger

on the HTML area search for </head> tag.
Copy the code below and paste it right above the </head>.
Click the Save Template button.

Code:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>



Step 4
finally, you can create static Contact Us page for the blogger. For doing this, now we must create a contact us page form on our blog.

 Go to the Pages and click on the New page button.
Fill up the Page Title with Contact Us/Contact ME/Contact and click on the HTML tab.
 Now copy the following code and paste it into the HTML mode of the page, not on the compose mode

code

<form name="contact-form"><span><i class="fa fa-pencil-square-o"></i> Name </span><br /> <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <br /> <br /> <span><i class="fa fa-envelope-o"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> <br /> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <br /> <br /> <span><i class="fa fa-keyboard-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span><br /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br /> <input id="ContactForm1_contact-form-submit" type="button" value="Send" /> <br /> <div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><br /><style scoped="" type="text/css"> #comments,.post_meta,#blog-pager {display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:95%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);} #ContactForm1_contact-form-submit{font-family:'Open Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease} #ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style>



 go to the Options
 Select Readers Comments tick Don’t allow, hid existing.
on compose mode slect show html literally
on line break slect use <br> tag
click done and publish

Tags

Below Post Ad