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

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

2
1395

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 Form for Blogger

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 of blogspot
Find Blogger ID

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.

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.