Two ways create an attractive Contact Us page for Blogger/Blogspot Blog -2022

blogger contact us page provides a by default contact form widget on the sidebar, but almost every users are not satisfied with it because the sidebar widget does not provide a professional experience. 

I was looking for a custom Contact page for my blog, but I did not found any best ideas. Although I found some ideas, those ideas didn't satisfy me because those ideas had bound to changed  HTML code on my Blogger Theme.

After a lot of research, I found two best ideas to create a contact me page.

So today, I'm going to sharing these two amazing ideas with you on creating a custom Contact page. After following these two ideas, you could create an actionable contact form without a single code changing on the HTML theme.

Why a Contact Us page needs for all bloggers?

For becoming a good Blogger, you need to provide a better user experience on your site. When someone has any specific query related to your blog/blog post, then they will most probably want to ask you directly on the Contact Us page. Also, a contact us page can provide-

  • Deep relation with your readers.
  • Connect with brands and sponsors.
  • Help to lead generation.
  • Collect the email list.

How to create a custom Contact Us page on Blogger/Blogspot?

First, I will show you idea number one through HTML code (you do not need to change on the theme).

Create a contact us page With HTML code

  • Open your Blogger dashboard>Click on Pages
contact page settings
Page settings on blogger

  • Create a new page with a title (Contact Us or anything which you prefer).
This HTML code form is an official Blogger Contact Form.
 <div class='ContactForm'>
  <form name='contact-form'>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-name'>Your Name</label><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' type='text' value='' /></div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email'>Email<span>*</span></label><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' type='text' value='' /></div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email-message'>Message<span>*</span></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message'></textarea></div>
    <div class='input-area'>
  <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send it' /></div>
    <div class='notif-area'>
      <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>
<script src=''></script><script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '263623292419730910';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//\x3d263623292419730910','//','263623292419730910');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '263623292419730910', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': ''}, 'displayModeFull')); //]]></script>

  • Copy the above code and change all the highlighted code with your Blogger Theme Id and blog address.
  • Paste your edited (blog Id and URL) code in HTML mode.
  • Page settings> Options> Check Do not allow, hide existing.
  • Preview and publish your page.
๐Ÿ“Note: How to find Blogger Theme Id?
  • Open Blogger Dashboard > Click on Theme> Copy URL from address bar> Here you will see a larger number this is your Theme Id.


Now, I'm going to show you creating a contact page through Google forms.

How to create a Contact Us Page with Google forms

Google Forms is 100% free, reliable and easy to set-up.

  • Search Google Forms or click here for a direct link.
blogger Contact us with google forms
blogspot Contact form with google form

  • Click on Go to Google Forms.
Contact page creating on google form
Account setup, and Contact us page settings

  • Select your desired Gmail Address.
  • Give an attractive "title" ( Contact us).
  • Select short answer type and > Write " Email" > Click on " Enable email collection setting"
  • Add another option click on "+" button > write " Phone".
  • Same way add another option and write "Name" > Mark as required.
  • Add another option >Select "Paragraph" type> Write "Message" > Mark as required.

๐Ÿ“Note: You can change the theme colour and font style by click on "Theme option" icon.

Add a contact us page on Blogger Blogspot

goggle form link embedding on blogger
form link embedding for contact page

  • Generate embed link click on Send and Copy the embed link.
  • Open Blogger dashboard> Create a new page> chose HTML mode > Paste the embedded link > Preview> Publish it.


Now your Contact Us page ready for use.

Next Post Previous Post
  • Rakib Ahmed Niloy
    Rakib Ahmed Niloy Sunday, October 11, 2020 at 9:54:00 PM GMT+5:30

    Good job! Please remove --> from your templates head. Its irritating user. You made such a beautiful blog. ๐Ÿ‘

    • Dilwar
      Dilwar Monday, October 12, 2020 at 11:02:00 AM GMT+5:30

      Thanks for your feedback,

  • Kaal
    Kaal Sunday, May 30, 2021 at 2:40:00 PM GMT+5:30

    bro i need this theme

  • LeBastiano
    LeBastiano Tuesday, March 1, 2022 at 1:31:00 PM GMT+5:30

    Very nice. Thanks for that!

    • Kaal
      Kaal Saturday, July 30, 2022 at 4:34:00 PM GMT+5:30


  • Sell Mac Mini Online
    Sell Mac Mini Online Wednesday, June 29, 2022 at 5:48:00 PM GMT+5:30

    Great Article! Thanks for sharing this information.

    • Kaal
      Kaal Saturday, July 30, 2022 at 4:33:00 PM GMT+5:30


Add Comment
comment url