Blogger Me Contact Us Page Kaise Banaye

अगर आप एक वेबसाइट ओनर है या blogger है तो आपको अपनी site par contact us page बनाकर पब्लिश करना बहुत ज़रूरी है. ऐसा हर वेबसाइट या blog owner करता है, क्यूकी contact us form की हेल्प से हमारे विज़िटर्स हम से सीधे संपर्क कर सकते है, और अगर आप google adsense se approval पाना चाहते है तो यह पेज पब्लिश करना आपके लिए बहुत ज़रूरी हो जाता है.  

आप जानते ही होंगे की adsense account ko approved करवाने के लिए हमे 3,4 pages को पब्लिश करने होते है, जैसे की about us, privacy policy, terms & conditions और contact us page, इनके बिना approval मिलना मुस्किल होता है. Contact us मे एक सिंपल सा फॉर्म होता है, जिसमे name, email id, website, और मेसेज बॉक्स की फील्ड्स होती है, जिसकी मदद से विज़िटर वेबसाइट एडमिन को डाइरेक्ट मेसेज भेज सकता है.

Contact Us Page Kya Hai

contact us page मे जो क्वेश्चन पूछना चाहता है उसका name, email address, subject और मेसेज ये चीज़े होती है. पर वो हम पर डिपेंड करता है की हमे contact us page मे क्या क्या लेना है. आप लोग पूछेंगे की contact us page क्यों ज़रूरी है ब्लॉग या साइट के लिए. अगर हमारी साइट मे कांटेक्ट पेज ना हो तो क्या फरक पड़ता है. तो में आपको बताना चाहूँगा की contact us page आपकी site मे हो तो कोई भी यूज़र, reader blog admin से सीधा क्वेश्चन कर सकता है. Contact us page होने से आपकी साइट प्रोफेशनल लगती है. ये एक ईज़ी वे है ब्लॉग admin से कॉंटॅक्ट करने का. और अगर आप adsense के लिए अप्लाई करना चाहते है तो आपके blog pe contact us ka page होना जरूरी है. अगर ये पेज नही होगा तो adsense डिसप्रूव होने के चांसेस ज़यादा है. आज हम देखेगे Kaise Contact Us Page banate है ब्लोगर मे, जिसकी मदद से हमारे विजिटर हमसे डायरेक्ट कॉंटॅक्ट कर सकते. (Adsense Account Approved Karane ke Top 15 Tarike)

Blog me Contact Us (Form) Page Kaise Banaye

Step 1: सबसे पहले आप अपने ब्लॉग के Dashboard >> Layout >> Add a Gadget पे जाए. 

Step 2: फिर आप More Gadgets पर क्लिक करे. Contact Form पर क्लिक करे. Save बटन पर क्लिक करे.

Step 3: अब Template >> Edit Template पर क्लिक करे.

Step 4: अब आप Jump to Widget पर क्लिक करे फिर ContactFrom1 पर क्लिक करे.

Step 5: कोड के लेफ्ट साइड मे arrow पर क्लिक कर के फुल कोड ओपन करे.

Step 6: अब <b:includable id=’main’> ओर </b:includable> के बीच मे जो कोड है उसे delete करो.

अगर समज ना आये तो इस निचे दिए कोड को Template मे सर्च करे फिर इसको delete करना है.

<b:if cond='data:title != ""'>
<h2 class='title'>
<data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>      
        <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>      
        <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>      
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>

Step 7: अब CSS code add करना है Blogger template मे. इसके लिए आप ]]></b:skin> ये कोड सर्च करे.

Step 8: ये code कॉपी करके ]]></b:skin> के उपर पेस्ट करे.
/* Contact hg*/
.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 400px;
max-width: 50%;
padding: 0px;
color: #000;
}
.fm_name, .fm_email {
float:left;
padding:5px;
width:48%
}
.fm_message {
padding:5px;
}
.contact-form-name, .contact-form-email {
width: 50%;
max-width: 50%;
margin-bottom: 10px;
height:30px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 80%;
height:200px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #f9f9f9;
background: #1aeb00;
color: #222;
width: 100%;
max-width: 20%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #f56c7e;
color: #444;
border: 2px solid #222;
}

Step 9: फिर आप Save Template पर क्लिक करे.

अब हमे सिंपल Contact Us Page add करना है, ओर उसके HTML view मे हमे कोड को एड करना है.

Step 10: ब्लॉग के dashboard >> Pages >> New Page पर क्लिक करे और HTML पे क्लिक करे.


Step 11: अब ये कोड कॉपी करे और उसे पेज के HTML में पेस्ट करे.
<script>
var blogId = '82560176869868302';//replace it the text with your blogID
//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: <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>

Step 11: कोड पेस्ट करने के बाद 82560176869868302 ID की जगह अपने blog ki id सेट करे ओर पेज Publish कर दे.

अब आपका पेज बन गया है और पब्लिश भी हो गया है, आप चाहे तो पेज को ओपन करके देख सकते है. दोस्तो अब आप समझ गये होंगे की अपने blog ke liye ye page banana कितना ईज़ी है, अगर फिर भी कोई परेशानी हो तो आप मुझे comment कर सकते है. पोस्ट अच्छी लगी हो तो इससे नीचे दिए share बटन की हेल्प से शेर भी ज़रूर करे. इसके साथ ही हमारे facebook page को भी like करना ना भूले.