ब्लॉगर में कॉन्टैक्ट फॉर्म कैसे बनायें

ब्लॉगर में कॉन्टैक्ट फॉर्म कैसे बनायें जानने की आवश्यकता तब होती है जब आप चाहते हों कि यूज़र्स आपसे कॉन्टैक्ट कर सकें या आप अपने ब्लॉग में Google Adsense का ऍप्रूवल लेना  चाहते हैं, तो उसके लिए भी कॉन्टैक्टअस पेज व कॉन्टैक्ट फॉर्म जरूरत होती है

ब्लॉगर में कॉन्टैक्ट फॉर्म कैसे बनायें

हम गूगल के सभी नियमों का पालन करते हैं , लेकिन कई बार बहुत से वेबमास्टर्स ब्लॉगर कॉन्टैक्ट फॉर्म बनाते समय बहुत सी मुश्किलों  का सामना करते हैं। कभी फॉर्म नहीं बनता है तो कभी फॉर्म ठीक तरह के काम नहीं करता है। आज हम इस पोस्ट के द्वारा जानेगें कि ब्लॉगर में कांटेक्ट फॉर्म कैसे बनाते हैं।

ब्लॉगर में कॉन्टैक्ट फॉर्म कैसे बनायें

  • ब्लॉगर के डैशबोर्ड में अपना ब्लॉग सेलेक्ट करें
  • डैशबोर्ड में लेऑऊट (Layout) पर क्लिक करें
ब्लॉगर में कॉन्टैक्ट फॉर्म कैसे बनायें
ब्लॉगर में कॉन्टैक्ट फॉर्म कैसे बनायें
 
  • साईडबार (Sidebaar ) में Add a Gadget पर क्लिक करें 
Image for Contact Form

हम सभी को अधिकतर ब्लॉगर में कॉन्टैक्ट फॉर्म लगाने के लिए किसी तीसरे (Third party) का सहारा लेना पड़ता है या जो वेबमास्टर्स HTML Coding जानते हैं वे कोडिंग के द्वारा फॉर्म बनाते हैं। बहुत लोगों को यह नहीं पता कि ब्लॉगर में इन-बिल्ट कॉन्टैक्ट फॉर्म होता है। 

ब्लॉगर का कॉन्टैक्ट फॉर्म जोड़ना कोई बहुत तकनीकी कार्य नहीं है। बहुत ही आसानी से इसे अपने कांटेक्ट पेज में जोड़ा जा सकता है। यह सही प्रकार से कार्य करे इसके लिए निम्न पॉइन्ट्स को ध्यान में रखना होगा।

  • Add a gadget में कॉन्टेक्ट फॉर्म पर choose करें
Image for Contact Form
  • Contact form पर क्लिक करने के बाद इसको save करें 
Save  करते ही फॉर्म sidebaar में दिखने लगेगा। लेकिन फॉर्म तो हमें ‘कांटेक्ट अस पेज’ पर चाहिए। इसके लिए हमें कुछ और स्टेप्स करने होंगें। सबसे पहले साईडबार में दिखने वाले फॉर्म को छुपाना  (hide) होगा। ध्यान रहे कि इसे छुपाना है न कि हटाना (delete) 
 

ब्लॉगर में कॉन्टैक्ट फॉर्म को कैसे छुपाए करें

कॉन्टैक्ट फॉर्म को हाईड करने के लिए हमें CSS Code की आवश्यकता होगी। CSS Code को अप्लाई करने के लिए कुछ स्टेप्स फॉलो करने होंगें जो इस प्रकार हैं :-

  • Themes पर क्लिक करें
  • Edit HTML पर क्लिक करें
  • HTML फाइल में ctrl + F प्रेस करें और निम्न कोड को सर्च करें
]]></b:skin>
 
  • इसके पश्चात निम्न कोड को उपर्लिखित कोड के ऊपर पेस्ट करें।
div#ContactForm1{display: none !important;}
 
  • जिस प्रकार निम्न स्क्रीनशॉट में दर्शाया गया है 
Image for Contact Form
 
जब यह सारे स्टेप्स आप फॉलो कर लेंगें , लब आप CSS Code का मैजिक देखेंगें , ब्लॉगर में कॉन्टैक्ट फॉर्म कॉन्टैक्ट फॉर्म साइड बार में होगा तो लेकिन ब्लॉग पर दिखेगा नहीं।
 

ब्लॉगर में कॉन्टेक्ट फॉर्म को कैसे Show करें  How to Show contact form

अब यह फॉर्म  ‘Contact Us’  पेज पर दिखाने (show ) के लिए नीचे लिखे स्टेप्स फॉलो करें
  • ब्लॉगर के डैशबोर्ड में पेज पर क्लिक करें 
  • New page पर क्लिक करें 
  • New page का टाइटल ‘Contact Us’ दें 
  • Contact Us पेज का HTML सेक्शन खोलें 
  • HTML सेक्शन में निम्न कोड को पेस्ट करें
<style>
 
.page-contact-form input,.page-contact-form textarea {width: 100%;max-width: 100%;margin-bottom: 10px;}
.page-contact-form input.contact-form-button.contact-form-button-submit {padding: 10px;background: #ea6337; color: #fff;border: none;}
.page-contact-form input.contact-form-button.contact-form-button-submit:hover {background: #d85b32;color: #fff;}
</style>
<div class=”contact-form-widget page-contact-form”>
<div class=”form”>
<form name=”contact-form”>
Name:<br />
<input class=”contact-form-name” id=”ContactForm1_contact-form-name” name=”name” size=”30″ type=”text” value=”” />
E-mail: <span id=”required”>*</span><br />
<input class=”contact-form-email” id=”ContactForm1_contact-form-email” name=”email” size=”30″ type=”text” value=”” />
Message: <span id=”required”>*</span><br />
<textarea class=”contact-form-email-message” cols=”25″ 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” type=”button” value=”Submit” />
<br/>
<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>
</form>
</div>
</div>

 

पेज को Preview  करें व Publish करने के बाद ब्राउज़र में चेक करें कि फॉर्म ठीक तरह से काम कर रहा है या नहीं । आपका कॉन्टैक्ट फॉर्म कुछ इस प्रकार दिखेगा।

 

Image for Contact Form

कमेंट करके अवश्य बतायें कि आपका कॉन्टैक्ट फॉर्म काम कर रहा है या नहीं ।

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top