Saturday, 25 July 2015

Add Blogger Contact Form in Contact Us page

contact form
Each professional blogger must have its contact us page. Don’t worry if you don’t have it. Here is the details how to add contact form into you 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:
ad contact us form to blogger

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

add a contact us page

<script>var blogId = ‘8911313474536XXXXXThe 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 looks like as follow:
contact us page sample

0 comments:

Post a Comment