1.Open Blogger > Layout > Add Gadget > Blogger Contact Form. Add this gadget to your blog, if you already have one, you can skip this step.
2.Now navigate to Blogger > Template > Edit HTML.
3.Press Ctrl + F & search for tag and paste below code above it.
#ContactForm1{display:none !important}
4.Now again search for or 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>
5.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:
6.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.
7.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.If your blog's template is not blogger's deafult template you can paste 1st code otherwise paste 2nd Code
<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><h2 class="ribbon"><strong class="ribbon-content"> </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>
<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/AVvXsEg9lUXlZB519fxBkrntxwZywqM-7_nTLUSr2yr7H1KHt_6H5H6Fc-7McUIU5TatxVpG2pxKOD10DE1JjMemxJRfVpjgnbnm3hBV5FCLyPxqlqO3e1_Hy66MiuHlq6eby5bjSDZgDTRjpq7c/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>
8.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.