how to create contact us page in blogger

How to create contact us page in blogger: If you have a blog on then you should have Contact Us page in your blog to communicate with your readers. In this way, you can be familiar with your readers and subscribers. And a trust will build between you and your readers. It’s very important for your blog’s growth.

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. In this article, we will learn How to Add Contact Us (Contact Form) Page in Blogger.

how to create 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 how to do it?
-Go to your Blogger Dashboard/ Overview.
-Select the 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.
How to Add Contact Us (Contact Form) Page in Blogger
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 beautiful 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.
How to create contact page in blogger

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

Contact form in blogger

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>
html code for contact form for blogger
– 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.

This is how to create contact us page in blogger. 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.

Also Read:

>> 8 best plugins that every blogger should use

>> Get free Domain on Premium Keywords


Post navigation

54 thoughts on “how to create contact us page in blogger

  1. Are you Tired of Not Getting Results From Your Videos?

    Revealed: The ONLY Web-App That Guarantees Your Videos Will Rank On Page 1 of Google In 48 Hours Or Less…
    Allowing you to generate targeted, BUYER traffic, sales and leads at will!

    GET NOW ==>>

  2. Lee and Ꮮarry cherished their sixth birthday party. Tһougһ thеy had
    been twins, Mommy and Daddy ɑt all times made sure they
    each had a particular time. And with their bіrthdays coming
    in December, Mommy and Daddy additionally at all timеs made posіtive
    their birthdays have been special although Christmas was propeг acrоss
    the сօrner. The celebration was so enjoyable with a clown and cake and songs and wonderful
    presents from their buddies and grɑndparents and uncle and aunts.
    It went by so quick however earlier than they knew it, everybody had gone
    house and it was time to wash up and prepare
    for bed.

  3. Great post. I was checking continuously this blog and I’m impressed!

    Extremely helpful information specifically the last part 🙂 I care for such
    information a lot. I was looking for this certain information for a long time.
    Thank you and best of luck.

  4. Hey I am so grateful I found your blog page, I really found you
    by error, while I was looking on Digg for something else, Regardless I am here now and would just like
    to say many thanks for a fantastic post and a all round exciting
    blog (I also love the theme/design), I don’t have time to read through
    it all at the minute but I have saved it and also included your RSS feeds, so when I
    have time I will be back to read a great deal more, Please do keep up the
    superb work.

  5. This is the perfect webpage for anyone who would like to understand
    this topic. You know a whole lot its almost hard to
    argue with you (not that I actually will need to…HaHa).
    You certainly put a fresh spin on a topic that has been discussed for years.

    Excellent stuff, just excellent!

  6. Do you mind if I quote a couple of your articles as long as I provide credit
    and sources back to your webpage? My blog site is in the exact same niche as yours and my users would
    truly benefit from a lot of the information you present here.
    Please let me know if this ok with you. Cheers!

  7. Hey there, I think your blog might be having browser compatibility issues.

    When I look at your blog in Chrome, it looks fine but when opening in Internet Explorer, it has some
    overlapping. I just wanted to give you a quick heads up!

    Other then that, great blog!

  8. Riցht here iѕ the right website foг anybody wһo would like tо understand this
    topic. You understand ѕo much іts aⅼmost hard to argue ᴡith you
    (not that Ӏ personally woulԁ want to…HaHa).

    Yօu defіnitely рut a brand new spin οn а topic that һas been ᴡritten aboսt for decades.

    Ԍreat stuff, јust excellent!

  9. I’ve been surfing online more than three hours today, yet I never found any interesting article like
    yours. It is pretty worth enough for me. In my view,
    if all site owners and bloggers made good content as you did, the net
    will be a lot more useful than ever before.

  10. I’m no longer positive the plaqce you’re getting yoᥙr informɑtion, bᥙt gгeat topic.
    Ӏ needs to spend some timе studying mߋre or uderstanding more.
    Ƭhank you fօr great info I wаs іn search օf this inf foг my mission.

  11. Somebody essentially assist to make severely articles I might
    state. That is the very first time I frequented your
    web page and so far? I amazed with the analysis you made to create
    this particular publish amazing. Fantastic activity!

  12. I think that is one of the most significant information for me.

    And i am happy studying your article. But want to commentary on some normal issues, The site style is great, the
    articles is in reality excellent : D. Good task, cheers

  13. Hey there just wanted to give you a quick heads up. The text
    in your post seem to be running off the screen in Chrome.

    I’m not sure if this is a formatting issue or something to
    do with web browser compatibility but I figured I’d
    post to let you know. The design and style look great though!

    Hope you get the issue resolved soon. Thanks

  14. Howdy very cool web site!! Man .. Excellent .. Amazing ..

    I will bookmark your website and take the feeds also?
    I’m happy to search out a lot of helpful info here within the submit, we want develop more
    techniques in this regard, thanks for sharing.
    . . . . .

  15. Do you have a spam problem on this site; I also am a
    blogger, and I was wanting to know your situation; many of us have developed some nice procedures and we are looking to swap methods with other folks,
    be sure to shoot me an email if interested.

  16. Healthism is launched with an intent to enhance people’s health and overall well-being.
    The brand offers multiple solutions to make
    healthcare accessible and easy. Multiple healthcare centric services are
    bundled up under the brand name Healthism. The journey has already started with a privilege health card.
    The purpose of the card is to lower the everyday
    healthcare expedition of the user. The annual membership card can be bought
    at a price of INR 999 and the user can avail discounts at
    various medical touch points. In effect the user saves medical expenditure which are not covered by insurance policies.

    The other services include – doctor appointment booking, medical record maintenance, medicine delivery

  17. This is the right webpage for everyone who really wants to find out about this topic.

    You realize a whole lot its almost hard to argue
    with you (not that I actually will need to…HaHa).

    You certainly put a brand new spin on a subject that’s been written about for years.
    Wonderful stuff, just great!

  18. Hi this is kinda of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding skills so I wanted to
    get advice from someone with experience. Any help would
    be enormously appreciated!

  19. Hey tһere just wantеԀ to ցive you ɑ quick heads
    up. The text in үoսr content seem to be running off
    the screen іn Chrome. I’m not sure if tһis is ɑ format isssue οr something to do ѡith web browser
    compatibility Ƅut I tһouɡht I’ɗ post to let yoᥙ
    know. Thе layout ⅼooқ grerat thoսgh!
    Hope yоu get thе рroblem resolved ѕoon. Thanks

  20. I’m not sure where you’re getting your information, but good topic.
    I needs to spend some time learning much more or understanding more.
    Thanks for magnificent info I was looking
    for this info for my mission.

  21. You are so interesting! I don’t suppose I’ve read anything
    like this before. So wonderful to discover somebody with a few original thoughts on this
    subject matter. Really.. thanks for starting this up. This web site
    is one thing that’s needed on the internet, someone with a bit of originality!

  22. An outstanding share! I’ve just forwarded this onto a colleague who has been doing a
    little research on this. And he in fact bought me
    breakfast due to the fact that I found it for him…

    lol. So allow me to reword this…. Thank YOU for the meal!!
    But yeah, thanx for spending time to discuss this subject here on your web

  23. I know this if off topic but I’m looking into starting my own blog and was curious what all is needed to get set up?
    I’m assuming having a blog like yours would cost a pretty penny?
    I’m not very internet smart so I’m not 100% positive.

    Any recommendations or advice would be greatly appreciated.

  24. I’m truly enjoying the design and layout of your site.
    It’s a very easy on the eyes which makes it much more
    enjoyable for me to come here and visit more often. Did you hire out a developer to create your theme?
    Excellent work!

Leave a Reply

Your email address will not be published. Required fields are marked *