ArticleBlogger

How to create working contact us page for blogger blog 2021

Contact us page is very important for a website to communicate with its users. But how you can create a blogger 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 green color text.

<div>
    You can reach us by filling this form
</div>
<div class="contact-form-widget">
    <div class="form">
        <form name="contact-form">
            <br />
            Name
            <br>
            <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text"
                value="">
            <br />
            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="">
            <br /> 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>
            <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>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/609130596-widgets.js"></script>
<script type='text/javascript'>
    window['__wavt'] = 'AOuZoY4PUAjvdPMazQDQJXJCrDFxkBfenw:1546660985916';
    _WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dYourBlogID', '//www.yourwebsite.com/p/contact-us.html',
        'YourBlogID');
    _WidgetManager._SetDataContext([{
        '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': 'https://www.blogger.com/contact-form.do'
    }, 'displayModeFull'));
</script>

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.

Blogger Contact us 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. Sometime 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 contact us form (added using blogger layout) will not work.

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

Will work fine for you. Thank You. Please note that this will work with both the custom domain names and also with blogspot.com domain.

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

I hope you liked this article, if any doubt feel free to ask in the comment section below. Thank you 🙂

Ashok Kumar

Love Coding, Love Blogging what else to explain :).

Related Articles

2 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

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top button