If you are the one like me who loves to have a clean and speedy blogger template then you might have also removed default CSS and JS lead by blogger in their templates to initiate few widgets and functionalities to work accordingly. Now they are not like the slow dummies, obviously they are being delivered from Google, so everything is well sorted out, but yes if you want everything to be customized the way you want and you are also using some third party widgets then these could be removed to increase your blogs speed. I have done that and I have removed everything from this blog, the speeds are great you can just try to run my site through page speed to see yourself.
Now whatever the case is, either you have removed the default CSS and JS bundles from your site or you are using any sort of custom templates and you have come across your contact form as broken, hence not accepting any queries and sending it back to you, then you we have a workaround and with that we can easily get this all this fixed and re-enable the blogger contact form to work again.
Fixing Broken Contact Form by Blogger
So the simple trick involved in this one is to re-add the default script to your template that will enable the form to work again. But we are going to do that in style hence, your speeds are going to be intact and this script will load only on the contact page, hence your not working blogger contact form will start working again. So this workaround is what I have tried and tested and it works for me, you can check my contact page and try to use the form.
Now in case you want to use the contact form on your homepage or post page that could also be done but your purpose of removing the scripts from your template will be doomed, so better is that you create a contact us page like I am having and then using the blogger contact form on that page, that will help you to keep your blog speed stable and also use the official blogger contact form widget.
Steps to FIX your Broken Blogger Contact Form
Below steps needs to be followed in order to start your official blogger contact form to work again in a stable manner, hence you could easily allow your visitors to send you messages.
- Open Blogger > Layout > Add Gadget > Blogger Contact Form. Add this gadget to your blog, if you already have one, you can skip this step.
- Now navigate to Blogger > Template > Edit HTML.
- Press
Ctrl +F & search for]]></b:skin>tag and paste below code above it.#ContactForm1{display:none !important} - Now again search for
</body>or<!--</body>--></body>and paste below code above it, and make the changes mentioned below.<b:if cond='data:blog.url == "https://www.hackinguniversity.in/p/contact.html"'><script src="https://www.blogger.com/static/v1/widgets/2575128383-widgets.js" type="text/javascript"></script> <script type="text/javascript"> _WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4921234794763956660','//hackinguniversity.in','4921234794763956660'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', 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': '4921234794763956660', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); </script> </b:if> - Now simply change the PURPLE URL with your contact us page URL, BLUE Numbers you see with your blog ID, there are 3 of them in this script and change the RED URL with your blog URL without http: or https:
- After that’s done your HTML part is complete, now we need to add the contact form to your contact us page, so that we can allow visitors to use the contact form.
- So open up your contact us page and click on the HTML tab, now you need to paste below code where you want to display the contact form.
<style type="text/css">.widget.ContactForm{z-index:1}.contact-form-widget{margin:20px auto;width:100%;max-width:700px;padding:25px 0;background:#e2efff;box-shadow:0 0 5px 2px #ccc}.contact-form-widget .form{width:95%;margin:0 auto}.ribbon{font:20px Verdana;text-transform:uppercase;position:relative;background:#0029ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje1mPmuB_-ssSL6uAkunLLFnj9ZEsppBqaGaIdf0dmLheRiw0Jaw0Iw-DU5lZsVIPkBKdsicE7PQX3x8eN0McwKQpcmbhWCkFL50a5__QakTBlBVJar-yZ9XWZhZr6RoMcLrZ-V7iJFMbH/s400/logo.png)no-repeat -10px;color:#fff;text-align:center;padding:30px 0;margin:-25px 0 0;border-bottom:5px solid #6b98ff}.contactf-name,.contactf-email,.contactf-message{text-align:left;margin-top:25px;color:#adadad;font:bold 12px verdana}.contactf-name,.contactf-email{float:left;width:100%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;margin:10px 0 0;padding:20px 0;font-size:15px;color:#666;border-radius:5px;border:1px solid #e4e4e4;font:bold 14px verdana;box-shadow:inset 0 2px 2px #ccc}.contact-form-email-message{resize:none}.contact-form-button-submit,.contact-form-button-submit:hover{margin:25px 0 0;width:100%;font:bold 15px verdana;outline:none;letter-spacing:1px;text-align:center;cursor:pointer;color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:linear-gradient(#fed970,#febd4b);border-radius:5px;padding:20px 0;display:block}.contact-form-button-submit:active{color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#febd4b) to(#fed970));background:-webkit-linear-gradient(#febd4b,#fed970);background:-moz-linear-gradient(#febd4b,#fed970);background:-ms-linear-gradient(#febd4b,#fed970);background:-o-linear-gradient(#febd4b,#fed970);background:linear-gradient(#febd4b,#fed970);-pie-background:linear-gradient(#febd4b,#fed970)}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px!important;width:11px!important}</style><div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><h2 class="ribbon"><strong class="ribbon-content">CONTACT FORM</strong></h2><div class="form"><form name="contact-form"><div class="contactf-name">NAME *<input class="contact-form-name" id="ContactForm1_contact-form-name" name="Name" size="30" type="text" /></div><div class="contactf-email">EMAIL ADDRESS *:<input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" size="30" type="text" /></div><div style="clear: both;"></div><div class="contactf-message">MESSAGE *<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." rows="5"></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND MESSAGE" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form></div></div></div> - This is the same code I am using on my contact us page, you can check the design and obviously make amendments according to your preference.
- Now save your page and refresh your page to see this elegant blogger contact form fully working, you can try to send a demo message to yourself and see if everything is working good.
Now your contact form will be working again, if you want to display this on any other of your pages, then you can remove the b:if conditional codes, we have used that so that the script loads only on the contact us page, so here you have it a perfect tutorial to make your contact form fully functional once again, do leave comments below in case you face any issues getting your form working again.
(COMMENTS WILL LOAD AUTOMATICALLY)