गुरुवार, 30 नवंबर 2017

Contact Us Form Blogspot के Contact Us पेज में कैसे जोड़े

blogspot-contact-us-form
दोस्तों यदि आपका blog, blogger या blogspot पर है तो आप के लिए भी एक समस्या contact us form के लेकर होगी. क्योकि जब हम विजेट से contact us form को अपने थीम में जोड़ते है तो वह सभी पेज में दिखाई देता है जबकि हमें इस contact us form को contact us page में ही सिर्फ शो करना होता है. आप इसलिए इस पोस्ट  को पूरा पढ़े इसमे मैंने पूरे विस्तार से बताया है की आप कैसे contact form widget को अपने blogspot के contact us page पर लगा सकते है वो भी 10 मिनट में.

Blogger Form को जोड़ने के फायदे.

1- जैसे ही कोई आपको इस form के द्वारा संपर्क करना चाहेगा वैसे ही आपको अपने एडमिन email पर email मिल जायेगा.
2- यह बहुत ही सधारण और सिंपल form है जिसे कोई भी विजिटर बढ़ी ही आसानी से फिल कर सकता है.
3-यदि आपको CSS (Casecade Style Sheet) की जाकारी है तो आप इसके लुक को और बेहतर बना सकते है.
4- इस form की सबसे बड़ी बड़ी खासियत यह है की मेसेज को भेजने के लिए पूरा पेज reload नहीं करता है. जिससे इसकी स्पीड काफी बेहतर है.

BlogSpot में  Contact Us Form को page में कैसे लगायें? पूरी जानकारी हिंदी में .

तो चलिये अब जानते है की Contact Us Form को किसी भी seprate page जैसे contact us पेज या आप जिस भी पेज में चाहे उसमे कैसे जोड़े.

Part 1-  Contact gadget को जोड़ना-

Step 1- सबसे पहले आप अपने blogger.com  में लॉग इन करके आप अपने account के dashboard में जाए.
Step 2- अब बाए साइड में दिखाई दे रहे layout आप्शन पर क्लिक करें.
Contact-Us-Form-Blogspot-के-Contact-Us-पेज-में-कैसे-जोड़े-2
Step 3- अब दाहिने साइड में आपको एक लिंक Add a Gadget पर क्लिक करें. जिससे यह आपको gadget list के पेज पर ले जायेगा.
Contact-Us-Form-Blogspot-के-Contact-Us-पेज-में-कैसे-जोड़े-3

Step 4- अब यहाँ पर आप बाएं साइड में  more gadget पर क्लिक करें. अब आप को यहाँ पर Contact Form दिखाई दे रहा होगा. उसे add कर दे. और save कर दें.
Contact-Us-Form-Blogspot-के-Contact-Us-पेज-में-कैसे-जोड़े-4

Part 2 - Gadget को छिपाना

Step 1- अब दाहिने तरफ दिखाई दे रहे template या theme पर क्लिक करें.
Step 2- अब आप edit HTML पर क्लिक करके अपने ब्लॉग के थीम कोड को ओपन  करें.
Contact-Us-Form-Blogspot-के-Contact-Us-पेज-में-कैसे-जोड़े-5
Step 3- अब Ctrl + F बटन को प्रेस करके ]]></b:skin> को सर्च करें, और निचे दिए गए कोड को add कर दें.
div#ContactForm1 {
display: none !important;
}


Contact-Us-Form-Blogspot-के-Contact-Us-पेज-में-कैसे-जोड़े-6

Part 3 - Contact Form को Page में जोड़ना.

Step 1- अब आप Page आप्शन पर क्लिक करके, और इसमे New page पर क्लिक करें.
Contact-Us-Form-Blogspot-के-Contact-Us-पेज-में-कैसे-जोड़े-7
Step 2- अब दाहिने तरफ के page setting में जाकर reader comment सेक्शन में do not allow, hide existing को सेलेक्ट कर लें.
Contact-Us-Form-Blogspot-के-Contact-Us-पेज-में-कैसे-जोड़े-8
Step 3- अब इस नए पेज में बाए तरफ HTML लिखा होगा वहा पर क्लीक करे और निचे के कोड को copy paste कर दें.
Contact-Us-Form-Blogspot-के-Contact-Us-पेज-में-कैसे-जोड़े-9


<script>
var blogId = '8600000030000000341';//इस नंबर को आप अपने 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>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' onclick="sendEmailMsg()"/>
<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

Part 4 - blog id पता करना. और page को publish करना.

Step 1- सबसे पहले आप अपने blogger.com के URL पर जाए,  उस URL में blog id करके कुछ नंबर लिखे रहते है, आप उन नंबर को वहा से copy करे.
Contact-Us-Form-Blogspot-के-Contact-Us-पेज-में-कैसे-जोड़े-10
Step 2- उस copy किये हुए नंबर को ऊपर के कोड में जहा पर blog id करके नंबर दिया  है वहा पर उसे paste कर दे.
Step 3- अब Publish बटन के द्वारा अपने पेज को पब्लिश कर दें.
अब आपका contact form किसी भी यूजर से इनपुट लेकर आपके email पर तुरंत सेंड कर सकता है.
ब्लॉग ट्रैफिक नहीं आने के मुख्य कारण
ब्लॉग शुरू करने के best 50 टॉपिक्स 

Conclusion

मुझे उम्मीद है की आप लोगो को आज का यह पोस्ट Contact Us Form Blogspot के Contact Us पेज में कैसे जोड़े जरुर पसंद आया होगा. इसे अपने मित्रो के साथ सोशल मीडिया पर शेयर करना न भूले. और मेरे इस ब्लॉग को जरुर सब्सक्राइब करें. ताकि इसी प्रकार के पोस्ट आपके email पर सीधे मिल सके.

1 टिप्पणी: