Create Contact Form Page In Blogger-Blogspot Sites (In Nepali Language)

DR Gurung
यदि तपाई सँग ब्लग वा वेबसाईट छ भने कन्ट्याक्ट पेज (Contact Page) बनाउनु एकदम महत्वपूर्ण हुन्छ। कन्ट्याक्ट पेज बनाइयो भने भिजिटर्स (Visitors), ब्र्यान्ड्स् (Brands) अनि कम्पनी (Company) हरुले तपाईलाई सजिलै सम्पर्क गर्छन् र तपाई आफ्नो वेब डिजाईनिङ्ग व्यवसायलाई अझ टेवा दिन सक्नुहुन्छ साथै आफ्ना भिजिटर्स सँग सधैं Interaction गर्न सक्नुहुनेछ। सम्पर्क गर्नका लागि ब्लग वा वेबसाईट मा ईमेल ठेगाना मात्र दिएर पुग्दैन, सजिलै सँग सम्पर्क र सधैं सम्बन्ध बनाउनका लागि कन्ट्याक्ट पेज ले सहयोग गर्नेछ।

कन्ट्याक्ट पेज सँग सँगै तपाईको ईमेल ठेगाना राख्दा राम्रो हुन्छ तर कोहि कोहि आफ्नो ईमेल ठेगाना दिन हिचकिचाउने हुनाले कन्ट्याक्ट पेज तयार गर्दा अति उत्तम हुन्छ।

ब्लगर वा ब्लगस्पट साईट मा कन्ट्याक्ट फर्म पेज बनाउनका लागि केही कोडिंग गर्नु पर्ने हुन्छ। तपाई लाई थाहा नै छ ब्लगर/ब्लगस्पट ले कन्ट्याक्ट फर्म सित्तैमा उपलब्ध गराएको हुन्छ तर दुर्भाग्यबस त्यो ग्याजेट को रुपमा साईड बार (Sidebars) मा (होम पेजको दायाँ/बायाँ) मात्र राख्न मिल्छ। तल हेर्नुस् !
कन्ट्याक्ट पेज कसरी बनाउने ?

यहाँ हेर्नुहोस् हाम्रो कन्ट्याक्ट पेज यस्तो छ।

म यहाँ हरुको लागि कन्ट्याक्ट पेज कसरी बनाउने भन्ने साधारण स्टेप्स् लेख्दै छु।

Adding A Contact Form To Blogger/Blogspot Sites

स्टेप १ : ब्लगरको Layout पेजमा जानुस्, Add a Gadget लिंकमा क्लिक गर्नुस्। एउटा सानो Pop Up Window देखिन्छ, Sidebar मा रहेको More Gadgets मा क्लिक गर्नुस् र Contact Form सेलेक्ट गरी Add गर्नुहोस्। Contact Form लाई दायाँ-बायाँ, हेडर,फुटर जहाँ राखे पनि हुन्छ, हामी यसलाई कोडिंग गरी परिमार्जित गर्नेछौं र आफुले चाहेको जस्तो Contact Form बनाउनेछौं।

स्टेप २ : Dashboard को बायाँ तिर जानुस्, Template/Theme मा क्लिक गरी Edit HTML मा क्लिक गर्नुहोस्। अब कुनै भागमा क्लिक गरी CTRL+F (CMD+F Mac का लागि) दबाएर Search Bar मा Contact Form लेख्नुस् अनि Enter दबाउनुस्।

तपाईले यस्तो पाउनुहुनेछ -
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
स्टेप ३ : अब अलिकति तल जानुस् तपाईले तलको कोड पाउनुहुनेछ।
<b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
माथि रातो अक्षरमा लेखिएको सम्पूर्ण लाई Delete गर्नुहोस् र अब बाँकी यस्तो हुनेछ।
<b:includable id='main'></b:includable>
स्टेप ४ : त्यस पश्चात् यो ]]></b:skin> खोज्नुस्। तल दिईएको कोड ]]></b:skin> भन्दा माथी Paste गर्नुस्।
Code:
/*CUSTOM CONTACT FORM BY DHANRAJGURUNG.BLOGSPOT.COM */
.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 600px;
max-width: 100%;
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: 100%;
max-width: 100%;
margin-bottom: 10px;
height:40px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 100%;
height:100px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #eeeeee;
background: ##f6f6f6;
color: #fbb040;
width: 35%;
max-width: 50%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #0099cc;
color: #ffffff;
border: 1px solid #FAFAFA;
}
स्टेप ५ : Save Template मा क्लिक गरी टेम्प्लेट सेभ गर्नुस्। अब Pages मा गएर New Page मा क्लिक गरि नयाँ पेज बनाउनुस्।

Page Editor मा गएर HTML Mode मा क्लिक गरी तल दिईऐको Code पेस्ट (Paste) गर्नुस्।
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="fm_name">
Your Name:
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="fm_email">
E-mail Address *:
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear:both">
</div>
<div class="fm_message">
Message *:
<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" />
<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>
</div>
</div> 
स्टेप ६ : अन्तमा Page लाई Save गर्नुस् अनि तपाईले नयाँ Contact Form पाउनुहुनेछ, जुन यस प्रकारको देखिन्छ। नोट : आफ्नो ब्लग/वेबसाईट अनुरुप Edit/Customization गर्न सकिन्छ।

नोट : यसले Blogger Gadget Interface प्रयोग गर्ने भएको कारणले, ब्लगर अकाउन्ट मा राखिएको ईमेल ठेगानामा तपाईलाई ईमेल प्राप्त हुनेछ। तपाईले यो ईमेल ठेगाना तपाईको ब्लग को Admin Settings मा गएर परिवर्तन गर्न सक्नुहुनेछ।

आशा छ तपाईलाई यो ब्लगर टिप्स् ले पक्कै सहयोग पुर्याउनेछ। यो टिप्स् साथीहरु माझ Share गरी सहयोग गर्नुहोला। 
DR Gurung
A Learner (अज्ञान जस्तो ठूलो शत्रु अरु केही छैन।) 🙏🙏
Comments
First of all, thank you for taking the time to read my blog. It's much appreciated! If you would like to leave a comment, please do, I'd love to hear what you think!

Suggestions and/or questions are always welcome, either post them in the comment form or send me an email at drgurung82@gmail.com.

However, comments are always reviewed and it may take some time to appear. Always keep in mind "URL without nofollow tag" will consider as a spam.

To add an image:
[image] image_url [/image]

To add a code block:
[code] your_code [/code]

To add a quote:
[quote] your_quote [/quote]

To add a link:
[link] your_link_text | link_url [/link]