Create Contact Form Page In Blogger-Blogspot Sites (In Nepali Language)
DR Gurung
कन्ट्याक्ट पेज सँग सँगै तपाईको ईमेल ठेगाना राख्दा राम्रो हुन्छ तर कोहि कोहि आफ्नो ईमेल ठेगाना दिन हिचकिचाउने हुनाले कन्ट्याक्ट पेज तयार गर्दा अति उत्तम हुन्छ।
ब्लगर वा ब्लगस्पट साईट मा कन्ट्याक्ट फर्म पेज बनाउनका लागि केही कोडिंग गर्नु पर्ने हुन्छ। तपाई लाई थाहा नै छ ब्लगर/ब्लगस्पट ले कन्ट्याक्ट फर्म सित्तैमा उपलब्ध गराएको हुन्छ तर दुर्भाग्यबस त्यो ग्याजेट को रुपमा साईड बार (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'>माथि रातो अक्षरमा लेखिएको सम्पूर्ण लाई 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/>
<br/>
<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>
<br/>
<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>
<br/>
<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%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
<b:includable id='main'></b:includable>स्टेप ४ : त्यस पश्चात् यो ]]></b:skin> खोज्नुस्। तल दिईएको कोड ]]></b:skin> भन्दा माथी Paste गर्नुस्।
Code:
/*CUSTOM CONTACT FORM BY DHANRAJGURUNG.BLOGSPOT.COM */स्टेप ५ : Save Template मा क्लिक गरी टेम्प्लेट सेभ गर्नुस्। अब Pages मा गएर New Page मा क्लिक गरि नयाँ पेज बनाउनुस्।
.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;
}
Page Editor मा गएर HTML Mode मा क्लिक गरी तल दिईऐको Code पेस्ट (Paste) गर्नुस्।
<div class="widget ContactForm" id="ContactForm1">स्टेप ६ : अन्तमा Page लाई Save गर्नुस् अनि तपाईले नयाँ Contact Form पाउनुहुनेछ, जुन यस प्रकारको देखिन्छ। नोट : आफ्नो ब्लग/वेबसाईट अनुरुप Edit/Customization गर्न सकिन्छ।
<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>
नोट : यसले Blogger Gadget Interface प्रयोग गर्ने भएको कारणले, ब्लगर अकाउन्ट मा राखिएको ईमेल ठेगानामा तपाईलाई ईमेल प्राप्त हुनेछ। तपाईले यो ईमेल ठेगाना तपाईको ब्लग को Admin Settings मा गएर परिवर्तन गर्न सक्नुहुनेछ।
आशा छ तपाईलाई यो ब्लगर टिप्स् ले पक्कै सहयोग पुर्याउनेछ। यो टिप्स् साथीहरु माझ Share गरी सहयोग गर्नुहोला।
Tags
DR Gurung
A Learner
(अज्ञान जस्तो ठूलो शत्रु अरु केही छैन।) 🙏🙏
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]