Add Contact Us Page (Contact Form) in Blogger
नमस्कार दोस्तो ! स्वागत है आपका Techly360 ब्लॉग में।तो आज के इस आर्टिकल में हम बात करने वाले है Contact Us Page के बारे में।की यह Contact Us Page क्या है और इस पेज को हम अपने ब्लॉगर में कैसे लगा सकते है।तो अगर आपको ये सब चीजे जानना है तो आप इस आर्टिकल को अंत तक पढ़ते रहिये।
Contact Us Page क्या है?
Contact Us Page क्यो जरूरी है?
आपको पता होगा कि अब एडसेंस कितना सख्त हो चुका है।अगर आपको अब अप्रूवल चाहिए तो आपको अपने ब्लॉग पर कुछ पेज बनाने होते है।जिसमे एक जरुरी पेज 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 हो चुका है।अब आपको नीचे के स्टेप्स को फॉलो करना है।
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) का आर्टिकल कैसा लगा।आप नीचे कमेंट बॉक्स में कमेंट करके जरूर बताएं।या किसी प्रकार का सुझाव देना भी चाहते है तो आप नीचे कमेन्ट बॉक्स में अपनी राय हमारे साथ साझा कर सकते है।
