Blogger Blog me (Contact Us Page) Kaise Banaye - Contact Form

यदि आप भी अपने ब्लॉग पर Valuable Readers के लिए Contact फॉर्म बनाना चाहते है, तो आज हम इस Tutorial के माध्यम से बताएंगे, ब्लॉगर Blog में Contact Us पेज कैसे बनाये ?

WordPress यूजर के लिए यह Task बिलकुल easy है क्यूंकि उनके पास अपने वेबसाइट Customize के लिए Plugin होता है परन्तु ब्लॉगर पर इस तरह के काम को manual coding के द्वारा ही deal करनी पड़ती है।

लेकिन इस आर्टिकल में आप coding के through एक official Contact Us Form Create करने के बारे में सीखेंगे। ताकि कोई भी readers आपसे संपर्क बना सके।

यहाँ पर हम आपसे Contact us page बनाने का बिलकुल Easy तरीके के बारे में बात करेंगे जिसका Interface Readers के लिए बहुत ही simple होगा। यदि आप कुछ CSS (language) के बारे में जानते है तो Easily इसके Color और अन्य चीजों को भी Customize कर सकेंगे, तो आइये इसे शुरू करते है।

Blogger ब्लॉग में Contact us पेज कैसे बनाये ?

Contact us पेज अपने ब्लॉग पर Add करने के लिए निचे दिए गए Steps को फॉलो करें।

Step 1: blogger.com पर जाए और अपने अकाउंट को लॉगिन करें। यदि आप एक से अधिक blogs use करते है तो लिस्ट में उस ब्लॉग को चुनें जिसमे आप कांटेक्ट पेज बनाना चाहते है।

Step 2: Pages पर क्लिक करे, उसके बाद New Page पर क्लिक करें।

Step 3: सबसे पहले HTML view सेलेक्ट करे फिर दिए गए Code कॉपी करे और post editor में paste कर दें लेकिन उससे पहले यह जरूर देख ले कि आपका पेज बिलकुल clear है या नहीं। इसके अलावा पेज का नाम Contact या Contact Us लिख सकते है इसके साथ ही right side के option में Do not allow, hide existing सेलेक्ट करें फिर publish कर दें।

<div dir="ltr" style="text-align: left;" trbidi="on">
<form name="contact-form">
<i class="fa fa-pencil-square-o"></i> Name <br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <br />
<br />
<i class="fa fa-envelope-o"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span> <br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <br />
<br />
<i class="fa fa-keyboard-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br />
<input id="ContactForm1_contact-form-submit" type="button" value="Send" /> <br />
<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>
<br />
<style scoped="" type="text/css"> #comments,.post_meta,#blog-pager {display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:95%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);} #ContactForm1_contact-form-submit{font-family:'Open Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease} #ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style></div>

अब आप इसे Preview करके देख सकते है इसके साथ-साथ message send कर के इसे testing भी कर सकते है ।
Note : message करने पर यह आपके ब्लॉगर ईमेल account पर प्राप्त होगा।

हमे कमेंट में जरूर बताये ब्लॉगर में contact form कैसे बनाये hindi tutorial आपके लिए helpful रहा या नहीं।