How to create Contact us Form Page for Blogger 2021

Contact us page is very important for a website to communicate with its users. But how you can create a contact us page as there is no plugin that can create a contact us form for the Blogger blog.

Contact us form for blogger blog
Contact us form for blogger blog

So you may add the contact us gadget in the sidebar or footer section of the blog. But it may not look every time, so a dedicated contact us page should be there. In this article, you’ll understand how you can create a custom contact us page for the Blogger blog.

Create a custom Contact US Form Page for the blogger.

You just have to add the code given below in the “HTML” section of your page. But before that, you’ve to make some changes to this code for your Blogger blog.

The code we’re providing will work with the latest interface of blogger blog. You can just simply create a page, in HTML mode and paste the code snippet provided below.

Blogger Contact US form HTML code.

And Change Your Blogspot-ID and blogger website address/URL, highlighted with red color text.

    You can reach us by filling this form
<div class="contact-form-widget">
    <div class="form">
        <form name="contact-form">
            <br />
            <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text"
            <br />
            <span style="font-weight: bolder;"></span> <br>
            <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text"
            <br /> Message <span style="font-weight: bolder;"></span>
            <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message"
                name="email-message" rows="5"></textarea>
            <br />
            <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit"
                type="button" value="Send">
            <br />
            <div style="text-align: center; max-width: 222px; 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>
<script type="text/javascript" src=""></script>
<script type='text/javascript'>
    window['__wavt'] = 'AOuZoY4PUAjvdPMazQDQJXJCrDFxkBfenw:1546660985916';
    _WidgetManager._Init('//\x3dYourBlogID', '//',
        'name': 'widgets',
        'data': [{
            'title': 'Contact Form',
            'type': 'ContactForm',
            'sectionId': 'sidebar2',
            'id': 'ContactForm1'
    _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar2', 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': 'YourBlogID',
        'contactFormNameMsg': 'Name',
        'contactFormEmailMsg': 'Email',
        'contactFormMessageMsg': 'Message',
        'contactFormSendMsg': 'Send',
        'submitUrl': ''
    }, 'displayModeFull'));

Change all red color with your own values. You can find blogID from your blogger dashboard.

Find the blogger ID.

Login to Blogger Dasbord, now check the URL of it. You can a see similar URL as displayed below. Copy the number, similar to highlighted one from your blogger address(URL).

Find Blogger ID on New Blogger Interface
Blogger ID for blogspot

Now change the all red lines, with blog URL, and YourBlogID value with your blogger blog ID. Now copy this whole script to paste it in the contact us form page.

Create a New Contact us Blogger Page and enable HTML mode

To paste the above script, you must enable the HTML mode in 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 Title to generate contact-us.html URL.
  2. Click on edit (pencil symbol) to switch to HTML mode.

If you face any issue or like this article, please comment below. Your comments appreciate us to do more.

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

Form Not Working?

Still not working? Then Follow the service activation process.

If your contact us form not working then, the contact us form service is not activated on your blogger blog. To activate this service please add contact us Form Gadget in your website sidebar using the theme panel, and then remove after testing.

Create Contact US form
Create Contact us form
  1. Visit Blogger Dasboard, Layout Section
  2. Click on Add a Gadget
  3. Add Contact us form Gadget.

This will add a new contact us form on the homepage of your blogger blog, we’ll first test this form and then remove it using dashboard.

blogger Contact us form test
blogger Contact us form test

Visit the homepage of your blogger blog and try sending an email to your blog. You’ll receive the email address on the same account, you logged in i.e. admin email. Sometimes Gmail filter blogger emails as spam, so make it sure that you check spam folder too.

Please note that if you’ve disabled footer javascript files, then this contacts us form (added using blogger layout) will not work.

After a successful email, you can remove that Gadget and can use the above code to create a custom contact us form in blogger.

Please note that this will work with both the custom domain names and also with the domain.

This code will work even if your disabled footer javascript of your website.

I hope you liked this article, if you’ve any doubt feels free to ask in the comment section provided below. Thank you :)

Additional Info: If you want to give a premium look to your Blogger blog then you can install our Oyedad Premium Theme for Free. This is only theme that support webP images in Blogger.

Ashok Kumar

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 You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.

Related Articles


  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

  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!

Leave a Reply

Back to top button