Blogger me contact us form page kaise banaye(Contact us form builder)

Blogger me contact us form page kaise banaye-Hello Friend's मैं विवेक आपका एक बार फिर स्वागत करता हु हमारे इस Blog में। Friends जैसा की आपको पता है कि यदि आप एक नया blog/wapsite बनाते है और यदि आप उस blog/wapsite से पैसा कमाना चाहते है तो उसके लिए आपको Google या किसी और Company का ads लगाना पड़ता है। और यदि आप Google का Ads लगाते है तो इसके लिए आपको Google Adsense का Approvel लेना पड़ता है।

Blogger Me Contact Us Form Page Kaise Banate Hai

मैं आपको बता दू की blog/wapsite पर google adsense का approvel लेना इतना आसान नहीं है, इसके लिए Google ने बहुत सारे guidlines दिए हुए है। इसी guidlines में से एक Guidline ये है कि यदि आपको Google adsense का approvel चाहिए अपने blog/wapsite पर तो आपको अपने blog/wapsite पर कम से कम 4 Page तो बनाना ही पड़ेगा

इन 4 page का नाम नीचे दिए गए है।

About Us Page
Contact Us Page
Privacy Policy
Disclaimer

ये 4 Page तो आपको बनाना ही पड़ेगा यदि आपको अपने Blog/Wapsite पर Google Adsense का approvel चाहिए तो। लेकिन इस Post में मैं आपको केवल Contact Us Page बनाना सिखाऊंगा।

वैसे तो आपके Blog के Layout में Google द्वारा दिया गया Bydefault Contact Us का Gadget होता है। जिसको आप अपने blog के Sidebar , Footer, या Header में लगा सकते है लेकिन उसको आप अपने Blog के Page में नहीं लगा सकते है।

यदि आपको अपने Blog के पेज में Contact Us का Page बनान है तो मैं उसी के बारे में आपको आज बताने वाला हु। वैसे तो आपको Youtube पर या बहुत सारे Blog में Contact Us Page को कैसे बनाया जाए ये मिल जायेगा। लेकिन उन लोगो के द्वारा बताया गया Contact us पेज उतना अच्छा नहीं होता है जितना मैं आपको इस Blog में बताने वाला हु। मैं आपको बिलकुल Pro , Stylish Look में दिखने वाला Contact Us Page बनाने के बारे में बताने वाला हु। जो सायद बहुत कम लोगो ने बताया होगा।

Contact Us Page बनाने के लिए नीचे में दिए गए Steps को Follow करे।

Step 1:

सबसे पहले आप अपने Blog में Login हो जाइये। इसके बाद आपको अपने blog के HTML Section में जाना है। वहा पर आपको EDIT HTML पर Click करना है। जिससे आपके Blog का HTML दिख जायेगा।

अब Simply आपको HTML में कही भी एक बार अपने Mouse से Right Click करना है , और Keyboard से (Control+F) Button press कर देना है जिससे Search Box दिखने लगेगा। अब आपको Search Box में नीच दिए गए Code1 को Copy करके Pest कर देना है। और एक बार Enter Button click कर देना है। जिससे आपको आपके HTLM में ये Code दिखने लगेगा।

Code 1:

]]></b:skin>

Step 2:

अब आपको Code के Just ऊपर Code 2 को Pest करना है। Code 2 नीचे है।

Code 2:

#ContactForm1{display: none !important;}

अब Save Button पर click करके HTML को Save कर देना है। आपका आधा काम हो चूका है। बाकी का आधा काम नीचे दिए गए step में देखते है।

Step 2:

अब आपको मैं नीचे में 5 बहुत ही अच्छे अच्छे बिलकुल Professional दिखने वाला Contact Us Form का Code दे रहा हु जिसको लगाने से आपका Contact Us पेज बहुत ही सुन्दर दिखेगा।

Contact Form 1

.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%}.contactf-name,.contactf-email{float:left;width:50%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 15px;padding:10px;font-size:14px;color:#010101;background:#F8F8F8;border:1px solid #1554db;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-name,.contact-form-email{height:33px}.contact-form-email-message{height:130px}.contactf-message{position:relative}.contactf-message:after,.contactf-message:before{border-bottom:50px solid transparent;border-left:80px solid #F8F8F8;bottom:-32px;content:'';position:absolute;right:50%;margin-right:-100px}.contactf-message:before{border-left:80px solid #1554db;bottom:-34px;right:50.3%;margin-right:-101px}.cbluebutton{margin-top:25px;width:30%;height:35px;float:right;font-size:15px;color:#fff;display:inline-block;text-align:center;background:linear-gradient(to bottom,#339ad9 0%,#224bbc 100%);box-shadow:0 1px 1px rgba(34,75,188,0.5);border:0;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.cbluebutton span .contact-form-button-submit{background:linear-gradient(to bottom,#52b1e2 0%,#397fd0 100%);font:bold 16px "Helvetica Neue",sans-serif;height:35px;width:100%;color:#FFF;text-shadow:0 1px 1px #224BBC;display:inline-block;box-shadow:0 1px 1px rgba(255,255,255,0.3) inset;cursor:pointer;outline:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}

</style>

<br />

</div>

</div>

</div>

</form>

</div>

Contact Form 2

.widget.ContactForm{z-index:1}.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px 0;background:#F8F8F8;-webkit-border-radius:2%;-moz-border-radius:2%;border-radius:2%}.contact-form-widget .form{width:91%;margin:0 auto}.ribbon{font:16px Arial;text-transform:capitalize;text-shadow:0 1px 2px rgba(0,0,0,0.25);position:relative;background:#0000ff;color:#fff;text-align:center;padding:1em 2em;margin:0 -16px}.ribbon:before,.ribbon:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid rgba(0,0,0,0.1);z-index:-1}.ribbon:before{left:-1.7em;border-right-width:1.2em;border-left-color:transparent}.ribbon:after{right:-1.7em;border-left-width:1.2em;border-right-color:transparent}.ribbon .ribbon-content:before,.ribbon .ribbon-content:after{content:"";position:absolute;display:block;border-style:solid;border-color:#0000ff transparent transparent;bottom:-1em}.ribbon .ribbon-content:before{left:0;border-width:1em 0 0 1em}.ribbon .ribbon-content:after{right:0;border-width:1em 1em 0 0}.contactf-name,.contactf-email,.contactf-message{text-align:left;margin-top:25px;color:#0000ff;font-size:13px}.contactf-name,.contactf-email{float:left;width:100%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:10px 0 0;padding:10px;font-size:12px;color:#010101;border-color:#001bff;border-width:1px;box-shadow:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.contact-form-name,.contact-form-email{height:35px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:37px;font:normal 12px Arial;outline:none;letter-spacing:1px;color:#fff;text-align:center;cursor:pointer;text-shadow:1px 1px 0 rgba(0,0,0,0.1);color:#F8F8F8;border:1px solid #ff0000;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#fed970) to(#febd4b));background:-webkit-linear-gradient(#ff0000,#ff0000);background:-moz-linear-gradient(#fed970,#febd4b);background:-ms-linear-gradient(#fed970,#febd4b);background:-o-linear-gradient(#fed970,#febd4b);background:linear-gradient(#f0000,#f0000);-pie-background:linear-gradient(#fed970,#febd4b)}.contact-form-button-submit:active{color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#febd4b) to(#fed970));background:-webkit-linear-gradient(#ff0000,#ff0000);background:-moz-linear-gradient(#febd4b,#fed970);background:-ms-linear-gradient(#febd4b,#fed970);background:-o-linear-gradient(#febd4b,#fed970);background:linear-gradient(#febd4b,#fed970);-pie-background:linear-gradient(#febd4b,#fed970)}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}

</style>

<strong class="ribbon-content">Contact Us an Email</strong></h2>

Your name:<input class="contact-form-name" id="ContactForm1_contact-form-name" name="Name" onblur="if (this.value == "") {this.value = "Name";}" onfocus="if (this.value == "Name") {this.value = "";}" size="30" type="text" value="Name" /></div>

E-mail address *:<input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" onblur="if (this.value == "") {this.value = "E-mail address";}" onfocus="if (this.value == "E-mail address") {this.value = "";}" size="30" type="text" value="E-mail address" /></div>

</div>

Message *:<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type Your Message Here..." onblur="if (this.value == "") {this.value = "Type your message here...";}" onfocus="if (this.value == "Type your message here...") {this.value = "";}" placeholder="Type your message here..." rows="5" value="Type your message here..."></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND MESSAGE" /><br />

</div>

</div>

</form>

</div>

Contact Form 3

.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}.contactf-name,.contactf-email{float:left;width:48.25%}.contactf-name{margin-right:3.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 20px;padding:10px 15px;font-size:12px;letter-spacing:1px;color:#010101;background:#F3F3F3;border:medium none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:37px}.contact-form-email-message{height:170px}.contact-form-button-submit,.contact-form-button-submit:hover{width:100%;height:35px;font:normal 12px Arial;letter-spacing:1px;color:#F8F8F8;display:block;outline:none;margin-bottom:20px;text-align:center;background:#ff0000;border:0;cursor:pointer}.contact-form-button-submit:active{outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}

</style>

इन सब code को कैसे और कहा लगाना है अब ये भी जान लीजिए।

Step 3:

सबसे पहले आप इनमे से किसी भी 1 कोड को copy कर लीजिये। इसके बाद आप अपने blog के Deskboard में आ जाइये। वहा पर आपको Page के Option को click करना है फिर New Page पर click करना हैं। और page के ऊपर में उसका Title Contact Us दे दीजिये।

अब Page के Left side में आपको Compose और HTML दिख रहा होगा। वहा पर आपको HTML पर click करना है। और Copy किये हुए Code को यहाँ पर Pest कर देना है और ऊपर में Publish button पर click कर देना है।

Step 4:

अब अपने Blog के Layout में जाइये। वह पर आपको एक काम करना है, उसके बिना ये Contact Us Page work नहीं करेगा। करना ये है कि आपको अपने Blog के Layout Section के Sidebar या Footer में कही भी Google द्वारा Bydefault दिया गया Contact Form Gadget को add कर लेना है।

बस आपका Conatct Us Form रेडी है।

Conclusion

तो मई आशा करता हु की ये Post आपको काफी पसंद आया होगा। यदि कोई दिक्कत आता है तो मुझे Comment Box में जरूर बताइये