Add Blogger Contact Form in Contact Us page

Each professional blogger must have its contact us page. Don’t worry if you don’t have it. Here are the details on how to add a contact form to your Blog. Blogger has its own contact form widget. You can customize it to a page very easily follow the steps:

1. Goto your blog to Layout Add a Gadget Name contact form:

2. Add the below CSS before the </b: skin>  tag in your blog template: 

Style sheet codding : .contact-form-widget { width: 500px; max-width: 100%; margin: 0 auto; padding: 10px; background: #F8F8F8; color: #000; border: 1px solid #C1C1C1; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); border-radius: 10px; } .contact-form-name, .contact-form-email, .contact-form-email-message { width: 100%; max-width: 100%; margin-bottom: 10px; } .contact-form-button-submit { border-color: #C1C1C1; background: #E3E3E3; color: #585858; width: 20%; max-width: 20%; margin-bottom: 10px; } .contact-form-button-submit:hover{ background: #4C8EF9; color: #ffffff; border: 1px solid #FAFAFA; }

3. Goto template and choose Jump to widget and select ContactForm1, and
Remove all data between widget 

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'> <b:includable id='main'> ………………………………..delete all data</b:includable> </b:widget>

4. Now Goto Pages add New page select HTML and past the below code:
Note:Replace Blog-Id with your blog ID

<script>var blogId = ‘8911313474536XXXXX’The below message 5 Strings can also be editedvar contactFormMessageSendingMsg ='Sending...';var contactFormMessageSentMsg = 'Your message has been sent.';var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';var contactFormEmptyMessageMsg ='Message field cannot be empty.';var contactFormInvalidEmailMsg = 'A valid email is required.'
var widgetLoaded=false;function sendEmailMsg() {if(widgetLoaded== false) {_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));widgetLoaded=true;document.getElementById('ContactForm1_contact-form-submit').click();}return true;}</script><form name="contact-form"><div>Your Name : </div><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><div>Your Email: <em>(required)</em></div><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><div>Your Message: <em>(required)</em></div><textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Send" /><div style="max-width: 450px; text-align: center; width: 100%;"><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>

5. Your contact us page will look like as follow:

Image copyright: Blogger.com