Blogger Me Contact Us Page (Contact Form) Kaise Add Kare

Add Contact Us Page (Contact Form) in Blogger

नमस्कार दोस्तो ! स्वागत है आपका Techly360 ब्लॉग में।तो आज के इस आर्टिकल में हम बात करने वाले है Contact Us Page के बारे में।की यह Contact Us Page क्या है और इस पेज को हम अपने ब्लॉगर में कैसे लगा सकते है।तो अगर आपको ये सब चीजे जानना है तो आप इस आर्टिकल को अंत तक पढ़ते रहिये।

Contact Us Page क्या है?

तो पहले हम यह जानते है कि Contact Us Page क्या है।यह एक पेज होता है।जिसने ब्लॉग के ओनर से contact करने के लिए एक फॉर्म होता है।अगर हम किसी ब्लॉग के ओनर तक हमारी बात को पहुचाना है तो हमे इस Contact Us के फॉर्म को भरना पड़ता है।इस फॉर्म में तीन खण्ड होते है।पहला जिसमे आपको अपना नाम, दूसरा जिसमे आपका ईमेल एड्रेस और तीसरा जिसमे आपको क्या मैसेज भेजना है वो मैसेज लिखना होता है।और send बटन पर क्लिक करना है।जिससे कि आपका मैसेज ब्लॉग के ओनर तक पहुच जाता है।

Contact Us Page क्यो जरूरी है?

अगर आप ब्लॉगिंग करते है और ब्लॉग से पैसे कमाने की सोच रहे है।तो मन मे सबसे पहले Adsense का बात आता है।क्योकि एडसेंस Google का एक प्रोडक्ट है।जिसकी मदद से हम अपने ब्लॉग पर Ads दिखाकर पैसे कमा सकते है।लेकिन Ads दिखाने के लिए पहले एडसेंस से अपने ब्लॉग के लिए अप्रूवल लेना पड़ता है।जब अप्रूवल मिल जाता है तो हम अपने ब्लॉग पर एडसेंस के ads दिखा सकते है और पैसे कमा सकते है।

आपको पता होगा कि अब एडसेंस कितना सख्त हो चुका है।अगर आपको अब अप्रूवल चाहिए तो आपको अपने ब्लॉग पर कुछ पेज बनाने होते है।जिसमे एक जरुरी पेज Contact Us Page है।तो आप कैसे अपने ब्लॉग में इस Contact Us Page को लगा सकते है।तो नीचे मैने Step by Step बताया है।तो आप इन Steps को फॉलो करें और आसानी पुर्वक अपने ब्लॉग में Contact Us Page पेज लगाए।



Step 1- आपको सबसे पहले अपने ब्लॉगर के टेम्प्लेट में एक Gadget add करना है।इसके लिए आपको नीचे के स्टेप्स को फॉलो करना है।

• आपको ब्लॉगर के डैशबोर्ड में जाएं।
• अब लेआउट ऑप्शन पर क्लिक करे।
• अब आपको Add a Gadget पर क्लिक करे।
• अब आपको Contact Form पर क्लिक करके Add करना है।

अब आपके टेम्प्लेट में Contact Form सफलतापूर्वक Add हो चुका है।अब आपको नीचे के स्टेप्स को फॉलो करना है।

Also Read- Meta Tag Generator Tool For Blogger

Step 2- ये दूसरा स्टेप इस Contact Form को Hide करने के लिए है।क्योकि यह Contact Form टेम्पलेट में अच्छा नही दिखता है तो नीचे एक CSS Code मिलेगा।इस कोड को टेम्प्लेट में Add करने से यह Contact Form आपके टेम्प्लेट से Hide हो जाएगा।तो नीचे स्टेप्स फॉलो करें।

• आप Theme ऑप्शन पर क्लिक करे।
• अब आपको Edit HTML पर क्लिक करना है।
• अब आपको अपने कीबोर्ड में CTRL+F प्रेस करना है।
• अब एक सर्च बॉक्स ओपन होगा।
• इस सर्च बॉक्स में ]]></b:skin> टाइप करना है और एंटर क्लिक करना है।
• अब नीचे एक CSS कोड दिया गया है इस कोड को कॉपी करना है।
• अब इस कॉपी किये गए कोड को ]]></b:skin> के ऊपर पेस्ट करके सेव कर दे।

div#ContactForm1 {
               display: none !important;
               }

अब आपका CSS सफलतापूर्वक Add हो गया है।साथ ही आपका Contact Form भी Hide हो चुका है।



Step 3- अब आपका सभी Steps टेम्प्लेट में Add हो चुका है।अब आपको अपने पेज में Contact Form add करना है।इसके लिए आपको नीचे के स्टेप्स फॉलो करना है।

• आपको सबसे पहले पेज ऑप्शन पर क्लिक करके New Page पर क्लिक करना है।
• अब आपको HTML टैब पर क्लिक करना है।
• अब नीचे एक HTML कोड दिया गया है।कोड को कॉपी कर ले।
• अब कॉपी किये गए कोड को पेज के HTML में जाकर पेस्ट कर दे और सेव कर दे।

<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>

अब आपका Contact Us Page (Contact Form) तैयार हो चुका है।तो आप इस प्रकार से किसी भी ब्लॉगर ब्लॉग में इस प्रकार का Contact Us Page बना सकते है।


निष्कर्ष-आपको यह Contact Us Page (Contact Form) का आर्टिकल कैसा लगा।आप नीचे कमेंट बॉक्स में कमेंट करके जरूर बताएं।या किसी प्रकार का सुझाव देना भी चाहते है तो आप नीचे कमेन्ट बॉक्स में अपनी राय हमारे साथ साझा कर सकते है।