Blogger Me Contact Form Kaise Banaye hindi me

Blogger में contact form को add करना एक कठिन काम है, क्योंकि यह WordPress जैसे plugins को allow नहीं करता है. Blogspot के अधिकांश blogger third-party sites (foxyform, jotform) जैसे की मदद लेते हैं.

Blogger का अपना contact form widget उपलब्ध है, लेकिन ये इस्तेमाल करने के लिए अच्छी या आकर्षक नहीं हैं. इसलिए आज हम सीखेंगे कि blogger के लिए custom contact form कैसे बनाया जाए.

Add Blogger Stylish Contact Page

मैंने इस tutorial को तीन section में विभाजित किया है, Contact Gadget add करें, Gadget को Hide करें और एक new page में आधिकारिक code को implement करें .

A) Contact Gadget add करें

सबसे पहले, आपको अपने blog पर blogger contact form widget जोड़ना होगा. यह आपके contact form की कार्यक्षमता को enable करेगा. इसकेलिए क्या करना है?

Step 1: अपने Blogger Dashboard/ Overview पर जाएं.

Step 2: Menu से Layout section को select करें.

Step 3: यहां Add a Gadget पर click करें.

Step 4: एक popup show और More Gadgets पर click करेंगे.

Step 5: Contact Form Gadget पर Blue Plus Button पर click करें और फिर इसे Save करें.

अब आपने अपने blog पर Blogger Contact Form Widget को successfully add करलिया है. Next आपको इस default contact widget को hide करना होगा ताकि Contact Us page को अधिक stylish बनाया जाए.

B) Gadget को Hide करें

Default Blogger contact form को छिपाने के लिए आपको इन steps को follow करना होगा.

Step 1: Template menu पर click करें और Edit HTML button पर जाएं.

Step 2: अब HTML area पर tap करें और keyboard पर ctrl + F button दबाएं.

Step 3: एक search box दिखाई देगा, यहां आप यह code ]]> </ b: skin> type करके Enter करें.

Step 4: अब बस इस code ]]> </ b: skin> के ऊपर छोटा CSS code paste करें.

div#ContactForm1 {
display: none !important;
}

अपने template को Save और you are done.

C) Contact Form को Page में add करें

अब आप blogger के लिए static Contact Us पेज बना सकते हैं. ऐसा करने के लिए, हमें अपने blog पर एक contact page बनाना होगा।

• Pages section में जाएं और New page button पर click करें.
• Contact Us/Contact के साथ Page Title भरें और HTML tab पर click करें.
• अब following code को copy करें और page के HTML mode में paste करें.

Copy Complete Code from Here

<form  name="contact-form"><span><i class="fa  fa-pencil-square-o"></i> Name </span><br />  <input id="ContactForm1_contact-form-name" name="name" size="30"  type="text" value="" /> <br /> <br /> <span><i  class="fa fa-envelope-o"></i> Email Address <span  style="color: #f56954; font-size: x-small; font-weight:  bold;">important</span></span> <br /> <input  id="ContactForm1_contact-form-email" name="email" size="30"  type="text" value="" /> <br /> <br /> <span><i  class="fa fa-keyboard-o"></i> Content <span style="color:  #f56954; font-size: x-small; font-weight:  bold;">important</span></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><a href="https://oyepandeyji.com/"><span style="color: white;">oyepandeyji</span></a></div>

• अब आप Options पर जाएं. Readers Comments के अन्दर Don’t allow, hide existing को select करें और Done button पर click करें.
• Page को Publish करें, आप अपने ब्लॉग पर contact form को देखसकते हैं.

इस contact form से भेजे गए messages को admin email पर deliver होता है.

मुझे उम्मीद है कि अब आपको पता चल गया होगा कि Blogger में contact us page कैसे add करें. यदि आपको success message के बाद भी कोई message नहीं मिलता है, तो मैं Contact widget को reinstalation करने की सलाह दूंगा.

अगर आपको CSS और javascript snippets से निपटने में पर्याप्त knowledge है, तो आप better visual के लिए page को customize करसकते हैं.

इस post को अपने blogger दोस्तों के साथ share करना न भूलें.