Creating a Contact Me page for Blogger Blog

Blogger has added a new widget in their widget page. This widget is a Contact Me widget which allows blog visitors to contact you.

This can be added in your blog sidebar or footer. In this tutorial I will tell you to how to add this to a blog page.

Create a blank page from Blogger -> Pages -> New Page -> Blank Page

Toggle to tab HTML and paste these code in the HTML textarea :

Name

Email
*

Message
*

<br /></span><br /><span style="font-family: inherit;"><input class="</span><span style="background-color: white; font-family: inherit; white-space: pre-wrap;">contact-form-button contact-form-button-submit</span><span style="font-family: inherit;">" id="ContactForm1_contact-form-submit" type="button" value="Send" /></span><p style="display: inline-block;">Powered By <a href="http://sag-3.blogspot.com">Subin’s Blog</a></p><br /><span style="font-family: inherit;"><div style="max-width: 222px; text-align: center; width: 100%;"></span><br /><span style="font-family: inherit;"><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></span><br /><span style="font-family: inherit;"></div></span><br /><span style="font-family: inherit;"><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></span><br /><span style="font-family: inherit;"></div></span><br /><span style="font-family: inherit;"></div></span><br /><span style="font-family: inherit;"></form></span><br /><span style="font-family: inherit;"></div></span> </p> </blockquote> </div> <div> Now we have to register the widget to make it work properly. To do that Go to <b>Template -> Edit HTML</b> and scrollto the bottom of the code and paste the following code before <<b>/html></b> </div> <div> <blockquote class="tr_bq"> <p> <script><br />_WidgetManager._RegisterWidget(‘_ContactFormView’, new _WidgetInfo(‘ContactForm1’, ‘lowerbar2’, null, 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’: ‘<span class="str" style="background: wheat;">YOUR BLOG ID</span>‘, ‘contactFormNameMsg’: ‘Name’, ‘contactFormEmailMsg’: ‘Email’, ‘contactFormMessageMsg’: ‘Message’, ‘contactFormSendMsg’: ‘Send’, ‘submitUrl’: ‘http://www.blogger.com/contact-form.do’}, ‘displayModeFull’));<br /></script> </p> </blockquote> <pre><code><div> <span style="font-weight: bold;">Replace the <span style="color: red;">Wheat color background text</span> above to your blog id</span>. See <a href="http://sag-3.blogspot.com/2013/06/find-blogger-blog-id.html" >this post</a> to see how you can find blogger blog id. </div> </code></pre> </div> <div> </div> <div> When a user submits the <b>Contact Me</b> form you will get a mail from <b>Blogger </b>like this : </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://2.bp.blogspot.com/-LKR0EUOdHLg/Uc0oCbyGqgI/AAAAAAAAC0A/vxI0JhzSqhY/s855/0024.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://2.bp.blogspot.com/-LKR0EUOdHLg/Uc0oCbyGqgI/AAAAAAAAC0A/vxI0JhzSqhY/s1600/0024.png" /></a> </div> </div> </article> </div> <nav class="pagination box" role="navigation" aria-label="pagination"> <div class="columns"> <div class="column is-one-third is-centered"> <a class="pagination-previous" href="https://subinsb.com/how-to-find-blogger-blog-id/" title="How to find Blogger Blog ID" >Previous Post</a> <div class="addthis_inline_share_toolbox"></div> <a class="pagination-next" href="https://subinsb.com/cohesion-force-you-just-cant-stand-it/" >Next Post</a> </div> <div class="column has-text-left"> <span>Related Posts</span> <ol> <li><a href="/how-to-find-blogger-blog-id/">How to find Blogger Blog ID</a></li> <li><a href="/using-regex-to-validate-e-mail-and-phone-number/">Using Regex to validate E-mail and Phone Number</a></li> </ol> </div> </div> </nav> <div class="comments box" id="comments"> <div id="disqus_thread"></div> <script> (function() { var d = document, s = d.createElement('script'); s.src = 'https://subinsblog.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> </div> </div> </div> </div> </div> <script> document.querySelectorAll(".single-post img").forEach(imgElem => { const a = document.createElement("a"); a.href = imgElem.src; a.setAttribute("target", "_blank") const imgClone = imgElem.cloneNode(true); a.appendChild(imgClone); imgElem.replaceWith(a); }) </script> <script> if (location.hostname !== "localhost" && location.hostname !== "127.0.0.1") { var id = "/creating-a-contact-me-page-for-blogger-blog/"; (function(i,s,o,g,r,a,m){i['ccc']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//demos.subinsb.com/sanders/s.js?id='+id,'ga'); } </script> <script id="dsq-count-scr" src="//subinsblog.disqus.com/count.js" async></script> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="footer-nav"> <a href="/about#profiles"> <blockquote>സുബിന്‍ സിബി<br/><span title="a.k.a SubinSiby">@subins2000</span><br/>/bin/su</blockquote> </a> <div style="text-align: center;"> <div class="side"> <ul> <li><a href="/about">About</a></li> <li><a href="/search">Search</a></li> <li><a target="_blank" href="/sitemap.xml">Sitemap</a></li> <li><a target="_blank" href="/index.xml ">RSS Feed</a></li> <li><a href="/about#subscribe">Subscribe</a></li> </ul> </div> <div class="side"> <ul> <li><a target="_blank" href="https://github.com/subins2000">GitHub</a></li> <li><a target="_blank" href="https://gitlab.com/subins2000">GitLab</a></li> <li><a target="_blank" href="https://t.me/SubinSiby">Telegram</a></li> <li><a target="_blank" href="https://aana.site/@subins2000">Mastodon</a></li> <li><a target="_blank" href="https://twitter.com/SubinSiby">Twitter</a></li> </ul> </div> </div> </div> <div class="site-info"> <p style="text-align: center;"> This blog is created, written and maintained by Subin Siby. It is built with <u><a target="_blank" href="https://gohugo.io/">Hugo</a></u> and hosted by <u><a target="_blank" href="https://gitlab.com">GitLab</a></u>. </p> <div class="smilie" title="This is just a text transformed into a smiley face by CSS. Check the source !">:-)</div> <span></span><span></span><span></span><span></span><span></span><span></span><span></span> </div> </footer> <svg style="display:none;"> <defs> <path id="shape-tab" d="M100,25C79.568,25,84.815,0,59.692,0H11.149C5.027,0,0,4.634,0,10.385V25"></path> <path id="shape-tab-right" d="M0,25C20.432,25,15.185,0,40.308,0h48.543C94.973,0,100,4.634,100,10.385V25"></path> <path id="shape-search" d="M3.327,96.684C5.534,98.895,8.434,100,11.331,100s5.797-1.105,8.004-3.316l21.321-21.322 c5.83,3.188,12.393,4.897,19.223,4.897c10.721,0,20.798-4.172,28.379-11.752c15.646-15.644,15.646-41.105,0.002-56.755 C80.677,4.171,70.598,0,59.877,0C49.159,0,39.08,4.171,31.504,11.752c-7.581,7.576-11.756,17.655-11.756,28.376 c0,6.832,1.71,13.396,4.9,19.226L3.327,80.675C-1.096,85.094-1.096,92.266,3.327,96.684z M59.879,68.938 c-7.695,0-14.93-2.996-20.371-8.435c-5.443-5.442-8.439-12.677-8.439-20.375c0-7.695,2.996-14.933,8.439-20.372 c5.441-5.44,12.676-8.436,20.369-8.436c7.698,0,14.936,2.997,20.378,8.436c11.231,11.236,11.231,29.515,0,40.747 C74.812,65.941,67.575,68.938,59.879,68.938z"></path> </defs> </svg> <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=perl&skin=sunburst&autoload=true" async="async"></script> <script type="text/javascript" src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fb122922591215b" async="async"></script> <script type="application/javascript"> var doNotTrack = false; if (!doNotTrack) { (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-33042168-1', 'auto'); ga('send', 'pageview'); } </script> <script data-goatcounter="https://subinsbdotcom.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script> <script> var r = new XMLHttpRequest(); r.addEventListener('load', function() { document.querySelector('#sanders-page-counter').innerHTML = JSON.parse(this.responseText).count }) r.open('GET', 'https://subinsbdotcom.goatcounter.com/counter/' + encodeURIComponent(location.pathname) + '.json') r.send() </script> </body> </html>