Blogger me Contact Us Page Kaise Banaye | Contact Us Form

blogger क्या है, इसके बारे में आप अच्छी तरह जानते हैं, देखा जाये तो blogger CMS (Content management system) के लिए एक बेहतर प्लेटफार्म है, जिसके माध्यम से आप लोगों से आसानी पूर्वक जुड़ सकते है. जिसका माध्यम Contact Us Page होता है, अगर आप visitors को बार बार अपना email address नहीं बताना चाहते हो तो आप अपने blog में contact form add कीजिये ये बहुत ही अच्छा तरीका है visitors बढाने का blog में contact form add करने के लिए आपको बस थोड़ी सी coding setting करनी है, ताकि आप आसानी से Contact Us Page बना सकें. क्योंकि blogger में आसानी से Contact Us Page नहीं बनाया जा सकता, इसके लिए Third Party की मदद लेनी पढ़ती हैं, जिसके चलते हम Plugin का इस्तेमाल करके, (website contact form) Contact Us Page बना सकते हैं, 

लेकिन ज्यादातर ये Service's मूल्यों पर आधारित होती हैं, जिसके कारण सभी के लगभग कंपनियां अपने विज्ञापन या अपनी प्रमोशन के लिए ही फ्री में प्रोविडे करती हैं. इन plugin पर वे अपने टाइटल का इस्तेमाल करके अपनी प्रमोशन करती हैं. आज के इस आर्टिकल में, हम आपको बतायेंगे कि CSS का इस्तेमाल करके हम बिना किसी कॉपीराइट के Contact Us Page कैसे बना सकते हैं, तो चलिए समझते हैं कि blogger में Contact Us Page कैसे बना सकते है.

चेतावनी: कृपया अपने blogger की टेम्पलेट और पोस्ट्स का बैकअप डाउनलोड कीजिए, ताकि किसी गलती के कारण आपका काम और बढ़ जाये.

सबसे पहले अपने blogger के Blogger » Theme » Edit HTML में जाएँ, और CTRL+F की मदद से ]]></b:skin>  को खोजें, ठीक इसके आगे निचे दिए कोड को पेस्ट कीजिए.

.sidebar .widget.ContactForm {
    display: none!important;
}
#contact{
    background-color:#fff;
    margin:30px 0 !important
}
#contact .contact-form-widget{
    max-width:100% !important
}
#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message{
    background-color:#FFF;
    border:1px solid #eee;
    border-radius:3px;
    padding:10px;
    margin-bottom:10px !important;
    max-width:100% !important
}
#contact .contact-form-name{
    width:47.7%;
    height:50px
}
#contact .contact-form-email{
    width:49.7%;
    height:50px
}
#contact .contact-form-email-message{
    height:150px
}
#contact .contact-form-button-submit{
    max-width:100%;
    width:100%;
    z-index:0;
    margin:4px 0 0;
    padding:10px !important;
    text-align:center;
    cursor:pointer;
    background:#27ae60;
    border:0;
    height:auto;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;
    text-transform:uppercase;
    -webkit-transition:all .2s ease-out;
    -moz-transition:all .2s ease-out;
    -o-transition:all .2s ease-out;
    -ms-transition:all .2s ease-out;
    transition:all .2s ease-out;
    color:#FFF
}
#contact .contact-form-button-submit:hover{
    background:#2c3e50
}
#contact .contact-form-email:focus,#contact .contact-form-name:focus,#contact .contact-form-email-message:focus{
    box-shadow:none !important
}

इसके बाद, Blogger » Pages » Create New Page में जाएँ और Page Title में, contact-us लिख कर Publish करें, अब इसी Page के HTML Editor में जाएँ और निचे दिए कोड को पेस्ट करके पब्लिश कर दीजिए. 

<div class="contact-form">
<div class="contact section" id="contact" style="display: block;">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
                                <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
                               <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
                                <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
                                <br />
<div style="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>
</div>
</div>
</div>
</div>
</div>

Sidebar में contact फॉर्म दिखने के लिए, Blogger » Layout » Add Element में जाकर Contact Form सेलेक्ट कीजिए. दोस्तों ऊपर दिए गये कोड्स, Sora Templates में पहले से होते हैं. Contact Us पेज बनाने के लिए HTML का ही इस्तेमाल कीजिए.

यदि आप contact us पेज बनाने के लिए अपने ईमेल का इस्तेमाल करना चाहते हैं, तो निचे कोड को Contact Us Page के HTML में पेस्ट कीजिए

<form id="kontak" name="contact-form">
  <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
  <input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email" type="text" value="" />
  <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="message body" rows="5"></textarea>
  <input id="ContactForm1_contact-form-submit" type="button" value="Submit"/>
  <div style="max-width: 222px; text-align: center; width: 100%;">
    <div id="ContactForm1_contact-form-error-message"></div>
    <div id="ContactForm1_contact-form-success-message"></div>
  </div>
</form>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '6600000000000000066';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6600000000000000066','//www.mera-bharat.online/','6600000000000000066');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '6600000000000000066', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>

ऊपर दिए कोड में कुछ बदलाव होंगे, जिनमे आपके ब्लॉग की ID और आपके blogger का यूआरएल आदि है, blogger की आईडी जानने के लिए पेज एडिट करते समय अपने ब्राउज़र ऊपर लिंक यूआरएल देखें. इसके बाद Publish बटन पर क्लिक कर दीजिए.

दोस्तों आप को ये जानकारी कैसी लगी, कृपया comment बॉक्स में अपना अनुभव मेरे साथ साँझा करें.

Share Share Tweet Share Share Share