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

How to Add Contact Us Page in Blogger: If you have a Blog in Blogger then you must need a Contact us Page to give your readers the opportunity to communicate with you. Blogger has their own Contact Form Widget available in the Blogger’s default widgets. But these are not good looking or attractive to use it. So today we will learn how to create custom contact form for blogger.

How to Add Contact Us Page in Blogger

How to Add Contact Us Page in 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/ Overview.
-Select Layout section from the menu.
-Click on the Add a Gadget on Sidebar.
-A popup will show & click on More Gadgets.
-Click on the Blue Plus Button on the Contact Form Gadget and then Save it.

Now you have successfully added the Blogger Contact Form Widget on your blog. The next thing is to hide this default blogger contact widget and make it more stylish contact form in a static Contact Us page. 

Step 2:

To hide default Blogger Contact Form you have to follow these steps.

- Click on the Template menu and go to the Edit HTML button.
- Now tap on the HTML area and press ctrl+F button on the keyboard.
- A search box appear, here you type the code: ]]></b:skin> and hit Enter.
- Now just paste the small CSS code just above this ]]></b:skin>.
- Save your template and you are done.

             div#ContactForm1 {
               display: none !important;

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

Step 3:

I have used some Font Awesome icons in these custom blogger contact form. So you will have to insert this stylesheet into your blog. For this,

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

<link href="//" rel="stylesheet"/>

Step 4:

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

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


<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;} {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>

Now go to the Options. Select Readers Comments Don’t allow, hid existing. Click on the done button.
Publish the page and you will see this type of contact form on your blog.

              Also Read: On Page SEO Techniques in Hindi

This is how to Add Contact Us Page in Blogger on your blog. In my case, these forms are working fine. If your one is not functioning properly, then please let me know through the comment. If this is helpful for you, then please don’t forget to share this with your friend.


  1. it's really wonderful article, i implemented this one on my blog site.

  2. send button is not working what to do sir

    1. Make sure correctly implemented the whole thing.
      Other wise do the full process 2nd time.

  3. sir i will see your articles and follow step by step but contact for is not show . what mistake i do please guide me
    sir in my blog
    contact form is not show

    please help me to show my contact form on
    my whattsup No 9043818131
    email id -

    please send your whattsup No.

  4. thank you sir.

  5. Very nice article wonderful

    Search Google keyboard and enter


    clear my website and latest technology news and taking news all mobile region

  6. Send nhi horaha.....apna email kaise lagaye jab ki query send kare to humare email par ajaye wo query please btao......

  7. bhai mera contact us ka page show nahi ho rha hai mene same yahi trick appllied ki hai aap btao me kya kru

  8. sir mere is code contact us form complete ho gaya maga undata muje kaha milega

    plz tell

  9. thanks a lot. but how do i know if its working. the contact us form is still showing on my blog. I will appreciate it sir if you send me n email on

  10. sir contact us form is visible to me in my pages but not visible to anyone, how they can contact without showing me

  11. thank you sir
    knowledge sheyar karne ke liye

  12. hi sir, thanks for this article this is very smooth article. this article very helpful for me thanks
    please visit my blog buildings

  13. Bhai contact us show to ho raha hai but main submit kar ke check kar raha hun to ye sub mujhe kaha milega ki kisna mujhe contact kiya hai

  14. Bhai contact us show to ho raha hai but main submit kar ke check kar raha hun to ye sub mujhe kaha milega ki kisna mujhe contact kiya hai

  15. Thanks for sharing this post with us and I am truly motivated by you as a blogger thank u again
    Must be visit my blogs and give me feedback

  16. This is a great high resolution screen which you have shared for the users. Making a website is not an easy task but managing a good website is really a hard work. As far as this website is concerned, I am very happy. visit Website

  17. Thank you sir i was in dilemma now i m clear with it


Powered by Blogger.