Blogger

Create a Contact Us Page for Blogger in 2023.

The contact us page allows readers to contact the author of the blog. Therefore, it is critical and allows us to enhance UI on the blog. Many blogs and websites generate a contact us page for Blogspot blogs; some work, and some are not. This is a complete step to step guide that allows you to create a contact us page for the Blogger blog.

The Contact Us page allows website users to communicate with the team directly. The user can send his query, doubt, feedback, or questions using the Contact Us form page on the website. You can provide a Contact Us Form, email, or telephone on the Contact Us page.

create-contact-us-page-blogger
Contact us form for a Blogger blog.

There is a widget feature on the Blogger system. That allows you to add a Contact Us form gadget in the sidebar or footer section of the Blogger website. But it does not look professional, so a dedicated contact us page should be there.

Create a Blogger Contact Us Page.

Here we are providing HTML code for the Contact us page for the Blogger blog. You have to create a contact us form.

<h2>We'll happy to help you, fill form given below to contact with us.</h2>
<p>We'll like to hear from you. It feels good when you send message to us. If any issue related to broken link of any document or book. We updated link of books/newspaper that are already on internet .. If any issue related to books copyright then please mail us on Email [email protected]</p>
<div style="text-align: center;">
    <p>Thanks And Regards iascgl.com Team [email protected] Delhi India</p>
</div>
<div style="text-align: center;color: green;">
    You can reach us by filling this form
</div>
<div class="contact-form-widget">
    <div class="form">
        <form name="contact-form">
            <p></p>
            Name
            <br />
            <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
            <p></p>
            Email
            <span style="font-weight: bolder;">*</span>
            <br />
            <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
            <p></p>
            Message
            <span style="font-weight: bolder;">*</span>
            <br />
            <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
            <p></p>
            <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
            <p></p>
            <div style="max-width: 222px; text-align: center; width: 100%;">
                <p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
                <p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
            </div>
        </form>
    </div>
</div>

Copy the above code and paste it on the Contact us page. Now you have to create a contact us form widget.

Earlier, you could generate a contact us form with the help of our tool. But after the recent update of Blogger, a session code is generated with the Contact us form. So it is now only possible with the help of the Blogger contact us form widget.

Create contact form widget

To create a widget in Blogger, visit the layout and create a contact us widget in the sidebar. You can create it in the last widget slot of the sidebar.

  1. Log in to Blogger Admin Panel and scroll down to Layout.
  2. Add a widget to the sidebar of the Blogger theme.
  3. A widget pop-up will appear; scroll down to the Contact form.

Now you’ve to select contact form settings as displayed below.

configure contact form

This will add a contact form to the sidebar of every blog page. But we don’t want our Contact us form widget visible all over the website. To optimize this, we’ve to tweak the theme file.

And to edit the Blogger theme, visit Theme>Customize>Edit HTML. Add the following code before the </head> tag.

<style>
#ContactForm1{display:none;}
</style>

Now save the theme file. The above code hides the Contact form from every page.

Please note if you’ve disabled unwanted JavaScript and CSS on Blogger. Then the Contact us form will not work. Also, you have to ensure no tweaking with the </body> tag.

How to Add a Contact Us Page for the Blogger blog?

Visit your Blogger blog and create a Contact Form Page.

  • Create a Contact Us page for the Blogger blog. In HTML mode, paste the above code and publish the page.
  • Create a Contact form widget.
  • Now you need a contact form widget to get a working form page.
  • Try sending a message using the form.
  • You can now try sending messages using the Contact us form on the website. It would work perfectly.

Create a Blogger Page

To paste the above script, you must enable the HTML mode on the page.

Create A new Page in Blogger
Create A New Page in Blogger
  1. Visit Blogger Dashboard, Click on Pages
  2. Now Click on Create New Page.
Blogger Page Edit HTML Page
Blogger Page Edit HTML Page
  1. Enter the Title of the Contact Us page.
  2. Click on the edit (pencil symbol) to switch to HTML mode.
  3. Paste the code generated using the above button and publish.

You can now try sending the email address. You’ll receive all emails on the email address linked with Blogger.

Working? You can appreciate our work with your comment below.

Blogger Contact Us Page Not Working? Try This.

If Contact Us doesn’t work, you should check that you are not tweaking the </body> tag. And also, check your Gmail spam folder for the email.

This Contact Us form will work with custom domain names and the subdomain blogspot.com domain.

Final Words

In this article, we understood how to create a Contact Us form page for the Blogger blog in 1 click using the Contact Us form generator. I hope you liked this article. In case of any doubt, feel free to ask in the comment section below. Thank you :)

Additional Info: If you want to give your blog a premium look, you can install our, BloggerMag or Oyedad Premium Theme for Free. These are advanced SEO-friendly themes.

Ashok Sihmar

Ashok Kumar working in the Search Engine Optimization field since 2015. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on seoneurons.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.

57 Comments

  1. working thanks bro, godl bless you, if u put in only blogid in one place it works for you and you will recieve the email has been sent from your blog to straight your gmail, but i have one question: How can i change red color of the send button thank you

  2. this worked but I have a “share button” at the top of the form and an “email post” at the bottom of the form .. help please how do I remove those

      1. Hello Amanda, how you trying to add the script? Replaced all the values in red line with your own?
        And you’re using a default blogger theme. You can try our SEO Frinendly Oyedad Theme for best USER experience.
        Download from here. https://seoneurons.com/blogger-seo/seo-friendly-blogger-theme/tezzblog-blogger-xml-theme-download/

      2. Seoneurons.com thank you.
        It’s an amazing thing you are doing here, keep the good work 😉.

        However, it worked but not entirely…
        If you are done writing and click on send.. it takes like forever.
        And you have to switch to a different tab and back befor it sends the message.

        www.thyactivemind.blogspot.com please check.

  3. hi yes changed all the red, and changed the blog id , I am using the “emporio ” template I have tried adding the code manually, and via “advanced add css” even if I get the contact form on there the send button doesn’t work. I ended up putting a google docs contact form on the site, but I will have another crack at it , and try your solution again , I tried different broswers too. this template doesn’t like being changed

  4. OMG Finally!!! ^_^ I tried like 5 codes and yours is the only one that really works! And logical too because the others were not mentioning about the blogger ID. One did, but no message notices and when I tested it still wasn’t sending any message! Thank you so much!

  5. Many thanks! I searched for this severally else but couldn’t find. This post made it quite easy for me. Thanks! It worked.

    1. I think you followed other tutorial and made changes in CSS. You’ve to revert back all earlier changes made for contact us page..

  6. Thanks so much, I have been looking for this form and its code for so long for my blog, it looks way more professional. Thanks a million

  7. Hi, The contact us form was working , but now getting this message ” Message could not be sent. Please try again later.” kindly look into and update accordingly.

  8. It’s perfectly worked and looks so amazing. Before I was using Google form for my website. But I think it’s perfect and stunning.
    Thank you so much

  9. i am very happy and i really appreciate your hard work to help us your idea and content makes me feel better and when i read i go on to know that this post was really helpful. want to create contract page in blogger that receives mail on gmail then

  10. Thank you for this. It works if using the laptop. But it doesn’t work on mobile and iPad. Hope there’s a solution to this. Thanks.

  11. Hello sir please help me i tried more codes and and also I add this code your trick but i can’t receive emails when someone click on send msg button it’s show sending……
    Only but it isn’t send successfully please help me check my contact us page
    https://www.afgmediaweb.com/p/contact-us.html

  12. i copied same process and its working but last one is not working for me contact widget is not hding for all posts and hompage in bottom side.
    now what i do for this issues?

  13. Hi

    I can’t see to provide blogger ID before generate html code as you have shown in video, kindly suggest me.

  14. Hi

    I can’t see to provide blogger ID before generate html code as you have shown in video, kindly suggest me.

Leave a Reply

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

Back to top button