Android Helping is a way to get information on Android knowledge.

[How to] Add Seprate Contact Us widget in Post/Page Blogger

As all of you know that a best blog is one who fit with all Adsense policies and terms and it is not a policy but an important term that a blog must have contact us widget or a page that have a link to contact directly to administrator of that blog. It is very useful to connect with visitors because it allow them to ask from you. Having a contact us widget in separate page/post of blogger is better rather to provide your mail or phone. If your mail or phone go in to bad hands than it will become a great problem.

Some Features 

The main benefit of that contact us widget that it allow visitors to contact you without giving your email to them.
The person want to contact you have not first to open his mail account than to type and then to send rather it have to go to your contact page have to type its name (optional) ,email and message to send.
 Send message to all of the admins of the blog at once.
There are many minors but great features of separate  contact us widget that are not now in mind but you will find it very useful when you use it.

Add contact us widget in blogger on separate page.

First of you need to have to go to destination means page or post where it fit best.- I personally recommend you page but do not worry the method and codes for page or post are same just there is the change of word post/page.

Now create on new page/post.

Toggle from Compose mode to HTML.

Now find your blog id that is present in the link while in your HTML mode of your post/page writing as shown below.
It is in you blog url present next to blogID=
Copy that id using Ctrl+C and make a new text document and place there or to any other area because it has use in next step.
Now copy whole code below given and place it in to the HTML of your post/page.
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
Contact Us</h2>
</div>
<script>
var blogId = '7680029675530321127';//this number should be mandatorily edited. and replace with your blog id
//The below message 5 Strings can also be edited
var 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: <i>(required)</i></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<div>
Your Message: <i>(required)</i></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>
</div>
Change the red colored 7680029675530321127 numbers in to you blog id that we have copied in text document.
Now click on Publish.

Final words.

Nothing have to be remained to say except of your reviews that i will be happy to see in comments box. If you wants to see demo than it will be same as the contact us widget by blogger.com because it is originally the source code of that widget. 
Share:

No comments:

Post a Comment

If you have any problem and questions related to this article then please ask them. One of our moderators will reply soon. Please keep in mind that all the comments are checked for moderation and spam ones are deleted immediately. These spam contacts also include those which are not related to this article. Thanks for understanding !

Popular Posts

Recent Posts

Unordered List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Sample Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation test link ullamco laboris nisi ut aliquip ex ea commodo consequat.

Pages

Theme Support

Need our help to upload or customize this blogger template? Contact me with details about the theme customization you need.