HOT!Buy Ready-Made Authority WebsitesClick Here

Making Blogger Professional, Important Updates !!

Hello SoraBloggingTips Readers, If you are reading this, then we would like to appreciate your efforts for being supportive. We know its har...

How to Create Contact Us page in Blogger


Blogger is very robust and easy to operate CMS platform, you don't have to be a geek to operate the dashboard or settings. But with easiness, there comes some limitations, By default you can't create a Contact us page, you have to either you have to use any third party plugin or have to tweak blogger's official contact widget, so that it can work on static pages. Creating a separate page for contact purpose is very professional and also makes your blog clean by hiding unnecessary widgets and plugins So, Lets move further and see How to create Contact Us page in Blogger

Also Check :- How to Customize Contact From Widget In Blogger

First Step (Important)

Before following the below tutorial we recommend you to install the contact form widget in your blog, it is very easy process and can be done in minutes, with simple click. We have published a tutorial earlier, so you won't face any difficulties. Please follow How To Add Contact Form Widget In Blogger And Blogspot Blogs.

Hiding The widget ( Adding CSS

Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.

The First thing you need to do is to login into your Blogger account and go to >> Templates >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.

.sidebar .widget.ContactForm {
    display: none!important;
}

Creating A Page ( Adding HTML ) 

Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.

The First thing you need to do is to login into your Blogger account and go to >> Templates >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.

<style>
#contact{
    background-color:#fff;
    margin:30px 0 !important
}
#contact .contact-form-widget{
    max-width:100% !important
}
#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message{
    background-color:#FFF;
    border:1px solid #eee;
    border-radius:3px;
    padding:10px;
    margin-bottom:10px !important;
    max-width:100% !important
}
#contact .contact-form-name{
    width:47.7%;
    height:50px
}
#contact .contact-form-email{
    width:49.7%;
    height:50px
}
#contact .contact-form-email-message{
    height:150px
}
#contact .contact-form-button-submit{
    max-width:100%;
    width:100%;
    z-index:0;
    margin:4px 0 0;
    padding:10px !important;
    text-align:center;
    cursor:pointer;
    background:#27ae60;
    border:0;
    height:auto;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;
    text-transform:uppercase;
    -webkit-transition:all .2s ease-out;
    -moz-transition:all .2s ease-out;
    -o-transition:all .2s ease-out;
    -ms-transition:all .2s ease-out;
    transition:all .2s ease-out;
    color:#FFF
}
#contact .contact-form-button-submit:hover{
    background:#2c3e50
}
#contact .contact-form-email:focus,#contact .contact-form-name:focus,#contact .contact-form-email-message:focus{
    box-shadow:none !important
}
</style>
<div class="contact-form">

<div class="contact section" id="contact" style="display: block;">

<div class="widget ContactForm" id="ContactForm1">

<div class="contact-form-widget">

<div class="form">

<form name="contact-form">

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />

                                <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />

                                <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>

                                <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />

                                <br />

<div style="text-align: center; width: 100%;">

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

</div>

</div>

Conclusion

Congrats !! You have made it. now you have learned that How to create Contact Us page in Blogger Visit your blog and check the awesome widget live in action, This is the Part -III of the Tutorial, Hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome widgets please stay tuned with Us. Vaarwel !! (Goodbye in Dutch!! hahaha).
How to Create Contact Us page in Blogger How to Create Contact Us page in Blogger Reviewed by TemplatesYard on April 25, 2018 Rating: 5

43 comments:

  1. Contact Form working like a charm on my blog @ https://www.munawwarblogs.com
    Thank You a lot.
    Larga Vida Sora(Long Live Sora in Spanish!!! Lolz)

    ReplyDelete
  2. its work thanks
    https://www.assamjobclub.info/

    ReplyDelete
  3. It works thanks
    https://urdupost4u.blogspot.com/

    ReplyDelete
  4. it's not working good check this screenshot . im using enside template
    check the link
    https://i.postimg.cc/QxTD3y5L/Screenshot-2019-01-27-ZAKARIA-My-First-Test-Blog.png

    ReplyDelete
    Replies
    1. It is link but not form you can remove it anytime from top menu.

      Delete
  5. when i click on submit nothing happened

    ReplyDelete
    Replies
    1. Please read this https://www.sorabloggingtips.com/2017/08/how-to-add-contact-form-widget-in-blogger-and-blogspot-blogs.html

      Delete
    2. As gadget works fine, but in a static page, on submit nothing happened

      Delete
    3. Before following the above tutorial we recommend you to install the contact form widget in your blog.
      https://www.sorabloggingtips.com/2017/08/how-to-add-contact-form-widget-in-blogger-and-blogspot-blogs.html

      Delete
  6. Contact Form working fine https://madumate2.blogspot.com/p/contacto.html Thanks.

    ReplyDelete
  7. working....https://www.spstudy.in

    ReplyDelete
  8. hello,bro i want to make contact form in alpha template but not work i use you tutorial, but still not working...how can i make it please help me

    ReplyDelete
    Replies
    1. You have to install blogger's official contact form first.

      Delete
  9. RE; I cant Find my Contact Us Page

    I want to have a Contact Us Page in the Top Main Menu, so I want to create a Contact Us Page. I add the below code…. But where is the page?

    Paste Code above ]]>
    Paste Code above ]]>
    Congrats !! You have made it….

    But where is my Contact Us Page, don’t I have to embed a shortcode or paste code in a page?

    ReplyDelete
  10. i was paste the code for contact form but this form showing but it was showing in header not in footer.now what i do for footer

    ReplyDelete
    Replies
    1. Basta colocar apenas o primeiro código citado.
      Isso se deve ao fato de já ter uma skin.

      Delete
  11. popular post does not appear in sublink?how to solve?

    ReplyDelete
  12. Fiz esse tutorial mas não funcionou infelizmente

    ReplyDelete

  13. Good afternoon, I appreciate your help, I have followed the indicated procedure. but the form appears in the heading of the main page and not in a static page, your help please I thank you thank you. I have created as a first step the contact form as a blogger widget.

    ReplyDelete
  14. Sir, my entire process is complete, but on sending the message, instead of sending the message, green color is turning black, I am not sending the message

    ReplyDelete
  15. Hello sir, Contact us form is display on the top of page (Above navigation bar).
    This is my url : trendingsong-lyrics.blogspot.com
    Can you please help me.

    ReplyDelete
    Replies
    1. I saw your blog in which everything is working perfect.

      Delete
    2. Thank you for your kind respond. Actually, Later time I find out my mistake .
      Anyway you guys( sbt team) doing great job. Really, love and respect from my heart.

      Delete
  16. Hello sir,
    I made it "How To Add Contact Form Widget In Blogger And Blogspot Blogs." You mention it as part I.
    Luckily i get part III(How to Create Contact Us page in Blogger),
    But i did not found part II. Can you help me to get missing part for making contact us page in blog

    ReplyDelete
    Replies
    1. https://www.sorabloggingtips.com/2018/05/how-to-customize-contact-from-widget-in-blogger.html

      Delete
  17. Hi, worked for me too! Thank you!

    ReplyDelete
  18. I want show ads in sidebar in blogger post But not in homepage sidebar. How can I show any widget in some page or hide in it. Using flex blog template. Please help me

    ReplyDelete
    Replies
    1. No it is not possible to hide sidebar widget in one page.

      Delete
  19. Hi, I couldn't find any customer message. I watched a lots of video... but, I can not solve this

    ReplyDelete
    Replies
    1. You have to install blogger's official contact form first.

      Delete

Note : -We have stopped giving support to free version users, please read this article Making Blogger Professional, Important Updates !!. If You Are Facing Any Problem While Setting Up The Free Theme, Then We Recommend You To Read Our FAQ(Frequently Asked Question) Page.