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

0
191

Create custom contact form for blogger or Add contact form in Contact us page.

ContactForm 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 “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 latest version i.e. blogger 1.3.0

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, comment below. Or if like this article please comment below that will inspire us.

LEAVE A REPLY

Please enter your comment!
Please enter your name here