ArticleBlogger

Add contact form (contact us page) in blogger – Blogger Expert

Create a custom contact form for the blogger or Add contact form in the Contact us page. Only one easy step process and done.

Contact us form blogger blog best practice.
Contact Form for Blogger Blog, Easy Method

Hello Friends, Today I’ll tell you “How to Add Contact us page in blogger blog or Contact us form in a page of blogger“.

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

Change all red color with your own values. You can find blogID from your blog address bar.

Best Think of this code is that you can use this code in both older 1.1.0 as well as the latest version i.e. blogger 1.3.0. You’ve to paste the following code in your contact us page and just update the webpage, done!

Find Blogger ID on New Blogger Interface
Find Blogger ID on New Blogger Interface
Find Blogger ID on Old Blogger Interface
Find Blogger ID on Old Blogger Interface

And Change Your blogspot-ID and Blogger URL.

<div align="center">
    <div>
        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="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>
</div>

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.

Still not working? Then Follow the service activation process.

If your contact us form not working then, 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 theme panel. Send one message using this form and check you received that message in owner’s mailbox. After that, you can remove that Gadget and can use the above code now. Will work fine for you. Thank You. Please note that this will work with both custom domain name and also with blogspot.com domain.

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