5 stylish blogger contact page/form apke blog ke liye new in hindi

5 stylish blogger contact page/form apke blog ke liye new in hindi

hello frnds 
apko pata hai ki apke blog me contact form hona bahut jaruri hai ye apke visitors ke liye bahut importent hota hai,kabhi kabhi aisa ho jata hai ki kisi readers ko apse kuch puchna hota hai lekin apka contact,number,whats number facebook id ke na hote huye o readers nirash ho jate hai or ye apke liye bahut harm full hai to chaliye ham apko batate hai ki apko apne blog me ek bahut hi accha contact form kaise add karna hai,apko ye pata hoga ki apke blog pe defult contact us farm hoga lekin kuch samay me hamne isko bahut hi pretty bana diya hai isliye apko ham apko aaj top 5 pretty contact forum ki jankari denge
http://anytimehelp7.blogspot.com/p/contact-me.html
 jante hai ki contact box blog me kaise add karte hai?
aapne agr apne blog me contact form nhi add kiya hai to pahle apko ye karna chahiye ham apko batate  hai ki apko kaise add karna hai 
  1. sabse pahle apko apne blogger dashboard me login hona hai 
  2. uske baad apko LAYOUT dikhai dega uspe click karna hai 
  3. fir apko Add a Gadget  pe click karna hai 
  4. ab apko popup window show hoga usme apko MORE GADGET pe click karna hai 
  5. ab apko contact form pr click karna hai or apne template ko save karna hai
apne blog me contact us form add kar liye hai,lekin hamko apne blog ke liye defult nhi pretty contact box add karna hai isliye is box ko hide karna hoga 

 jante hai defult contact box ko hide kaise kare?
aap agr is defult forum ko hide karna chahte hai to isko follow kare
  1. apko apne blog ke dashboard me jana hai 
  2. waha pe apko template button dikhi dega uspe click karna hai 
  3. ab apko template editor me click krke ctrl+f press karna hai apko search box show hoga 
  4. usme apko ]]></b:skin> code search karna hai jab ye mil jaye to apko niche diya gaya ccs code uske uper pest karna hai 
ab apko ye code bhi add karna hai apne template me ye code apko apne template me </head> section ke niche pest karna hai 
href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>


  • ab apko save button pe click karna hai 
ab ham apko batate hai ki apko pretty contact us page kaise banana hai?

  • sabse paahle apko blogger ke dashboard me new page button pe click karna hai
  • ab apke samne ek blank page open hoga usme apko tittle me contact us,contact me etc likhna hai 
  • fir apko page editor me niche diye gaye kisi bhi ek style ka code pest karna hai or publish kar dena hai 
bas apko itna hi karna hai 

style 1:

<!-- Blogger Contact Form Powered By http://www.anytimehelp7.com/ -->
<style>
.contact-form-widget {color: #000;margin-left:auto;max-width: 100%;margin-right:auto;padding: 0px;width: 600px;}
.form_name, .form_email {float:left;width:48%;padding:5px;}
.form_message {padding:5px;}
.contact-form-name, .contact-form-email {font-size:16px;width: 100%;height:40px;max-width: 100%;margin-bottom: 10px;padding:10px;}
.contact-form-email-message {height:100px;width:100%;font-size:16px;max-width: 100%;padding:10px;margin-bottom:10px;}
.contact-form-button-submit {font-size:16px;height:30px;border-color: #C1C1C1;width: 20%;background: #E3E3E3;max-width: 20%;color: #585858;margin-bottom: 10px;}
.contact-form-button-submit:hover{color: #000000;border: 1px solid #FAFAFA;background: #ffffff;}
</style>

<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="form_name">
Your Name:
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="form_email">
E-mail Address *:
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear: both;">
</div>
<div class="form_message">
Message *:
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
<div style='display: none ! important;'><a href="http://www.blogornate.com" rel="dofollow">Widget</a></div>

style2:

<!-- Blogger Contact Form Powered By http://www.anytimehelp7.com/ -->
<style>
.contact-form-widget {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
 background-color: #eaeaea;
background: -moz-linear-gradient(top, #ffffff, #eaeaea);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0,    #ffffff), color-stop(1.0, #eaeaea));
     color: #444;
     border: 1px solid #cacaca;
     margin: 0 0 25px;
     max-width: 96%;
     font-size: 1.4em;
     padding: 8px 10px;
}

.contact-form-name, .contact-form-email {
width: 50%;
max-width: 50%;
margin-bottom: 10px;
}

.contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
</style>


<div class='widget ContactForm' id='ContactForm2'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Name</p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-mail *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Message *</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
  </div>
</div>
<div style='display: none ! important;'><a href="http://www.anytimehelp7.com" rel="dofollow">Widget</a></div>

style3:


<!-- Blogger Contact Form Powered By http://www.anytimehelp7.com/ -->
<style>
#ContactForm2{
background:#98AFC7;
}
.c-form{
border:1px solid #f5f5f5;
padding:0 0 20px 0;
overflow:hidden;
}
.c-form-left{
padding: 20px;
}
.c-form-right{
padding: 20px;
}
.contact-form-widget {
margin: 0 auto;
padding: 10px;
width: 250px;
max-width: 100%;
}
</style>

<div class='c-form'>
<div class='c-form-left'>
<div class='form' style='float:left;'>
 <div class='widget ContactForm' id='ContactForm2'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Name</p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-mail *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Message *</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea><br/>
<br/>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
  </div>
</div></div></div>

<div class='c-form-right'>
<div style='float: right;'>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: left;">
<a href="https://lh3.googleusercontent.com/-wQ3_a5q8StA/VuPkjJ2XJnI/AAAAAAAACJ8/Z7is6XgNPYIBvBeH0eGp0bCEPY-mgVi6ACCo/s94-Ic42/bo-contact-avatar.jpg" imageanchor="1"><img border="0" src="https://lh3.googleusercontent.com/-wQ3_a5q8StA/VuPkjJ2XJnI/AAAAAAAACJ8/Z7is6XgNPYIBvBeH0eGp0bCEPY-mgVi6ACCo/s94-Ic42/bo-contact-avatar.jpg" /></a></div>
<br />Address Line 1<br />Address Line 2<br />Address Line 3<br />State<br />Telephone: +49 30 47373795<br />E-mail: mail@blogornate.com     
</div>
</div>
</div></div>
<div style='clear: both;'></div>
<div style='display: none ! important;'><a href="http://www.anytimehelp7.com" rel="dofollow">Widget</a></div>
aapko yeha pe kuch replace karna hai janiye:

  • yellow:yeha pe apne profile url dena hai 
  • green:yeha pe apko apna profile url dena hai ya kuch or ap jo chahe de sakte hai
  • orenge:yeha pe apko address change karna hai

  style4:


<!-- Blogger Contact Form Powered By http://www.anytimwhlp7.com/ -->
<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 />
<div style='display: none ! important;'><a href="http://www.anytimehelp7.com" rel="dofollow">Widget</a></div>
<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>
 style5:


<!-- Blogger Contact Form Powered By http://www.anytimehelp7.com/ -->
<div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p class='text'>Name</p>
        <input class='name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p class='text'>E-Mail *</p>
        <input class='email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p class='text'>Message *</p>
        <textarea class='message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<img src="https://lh3.googleusercontent.com/-tt5br_2RGV8/VyEDTypnd-I/AAAAAAAAC6c/BOosOyiAZ28ih3Tm67Et8L4_dWV_4lSwACCo/s716/arrow.png" alt="Arrow" style="width:150px;height:35px;background:#808080;border:none;"/>
        <input class='btn' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
  </div>
<div style='display: none ! important;'><a href="http://www.anytimehlp7.com" rel="dofollow">Widget</a></div>

<style>
.contact-form-widget p.text{color:#fff;font-size:16px;font-weight:bold; font-family: sans-serif;line-height: 0.5em;text-transform:uppercase;}
.contact-form-widget {margin-right:auto;margin-left:auto;height: 100%;max-width: 90%;padding:30px;border-radius: 5px;border: 1px solid rgba(0,0,0,.2);background: rgba(0, 0, 0, 0.5);background-clip: padding-box;overflow: hidden;-moz-border-radius: 5px;-webkit-border-radius: 5px;-webkit-background-clip: padding-box;-moz-background-clip: padding;}
.form textarea{background: #afafaf;width: 93%;height: 120px;border: 1px solid #BDBDBD;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;background-clip: padding-box;-moz-background-clip: padding;-webkit-background-clip: padding-box;display:block;color:#000;font-size:18px;padding:12px 20px 0 15px;margin-bottom:20px;overflow:hidden;}
.form input {width: 60%;height: 46px;border: 1px solid #BDBDBD;border-radius: 4px;font-size:18px;color:#333;padding:0 20px 0 20px;display:block;margin-bottom:20px;background-clip: padding-box;-webkit-border-radius: 4px;-moz-border-radius: 4px;-webkit-background-clip: padding-box;-moz-background-clip: padding;}
.form input.name {background-image: url(https://lh3.googleusercontent.com/-OOXKCVxe0ig/VyEDUgHDn4I/AAAAAAAAC6g/glXdkCE_0joF-hh53mKsOwwu53uGgL6FwCCo/s512/pro-pic.png);background-position: 11px 8px;background-size: 28px 28px;background-repeat: no-repeat;padding-left:45px;}
.form input.email {background-image: url(https://lh3.googleusercontent.com/-MaujepkTvbg/VyEDTvc9MuI/AAAAAAAAC6Y/g5TIZ_ozKvEIvaoXv8pWURaviEcT3RR6QCCo/s512/msg-box.png);background-repeat: no-repeat;
padding-left:45px;background-position: 11px 8px;background-size: 28px 28px;}
.form input.message {background-image: url(https://lh3.googleusercontent.com/-U12Vo3ayUb8/VyEDTjZXdUI/AAAAAAAAC6k/hJmCL5il6VMMyM-iJ4ZONW3BjCJkVhvlgCCo/s512/pencil.png);background-repeat: no-repeat;background-size: 30px 30px;background-position: 11px 8px;padding-left:45px;}
.form input:focus, .form textarea:focus { -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);box-shadow: 0 0 5px 1px rgba(255,255,255,.5);overflow: hidden;}
.btn {background: #416b68;width: 138px !important;height: 45px;border-radius: 4px;border: 1px solid #253737;-webkit-border-radius: 4px;-moz-border-radius: 4px; float:right;background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));background: -moz-linear-gradient(top, #6da5a3, #416b68);background: -webkit-linear-gradient(top, #6da5a3, #416b68);background: -o-linear-gradient(top, #6da5a3, #416b68);background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);background: -ms-linear-gradient(top, #6da5a3, #416b68);padding: 10.5px 21px;box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;-webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;-moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;text-shadow: #333333 0 1px 0;color: #e1e1e1;}
.btn:hover {background: #416b68;border: 1px solid #253737;color: #fff;text-shadow: #333333 0 1px 0;background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));background: -moz-linear-gradient(top, #77b2b0, #416b68);background: -webkit-linear-gradient(top, #77b2b0, #416b68);background: -o-linear-gradient(top, #77b2b0, #416b68);background: -ms-linear-gradient(top, #77b2b0, #416b68);}
@media only screen and (max-width: 580px) {
.contact-form-widget{width: 88%;left: 3%;margin-left: 0;margin-right: 3%;padding-left: 3%;padding-right: 3%;}
</style>
 frnds apko ye post kaisi lagi aap hame bataye,agr apko is post me koi kami lag rahi hai to bhi hame bataye ham apke abhari rahenge,apko agr koi problem hai blogging se judi to aap hame bataye ham apki help karenge,aap hame online chat widget se contact kare apko just reply milega,or bhi bahut sari trick hai frnds to plzzz visit me everyday hamare forum me bhi aap apne sawal puche

thankxx for read this

Share this

Receive Quality Articles Straight in your Inbox by submitting your Email below.

Related Posts

Next
« Prev Post
Previous
Next Post »

3 comments

comments
gajabwap
12 November 2016 at 08:40 delete

nice post sir
sir mujhe apki website se backlink chahiye the
www.webinhindi.in

Reply
avatar
gaurav
12 November 2016 at 10:09 delete

hello dear kashyap
aapko hamare blog se back link mil chuki hai
thankxxx for comment

Reply
avatar
Vishal Jaiswal
30 November 2016 at 20:45 delete

Very nice post. I like this post. Brother....You are doing great....

Reply
avatar

hello readers
apko comment karne se pahle kuch bata diya jaye

1.ap comment me galat sabd ka prayog nhi karenge
2.ap internet se juda koi bhi sawal puch sakte h
3.ap koi bhi sawal bar bar n puche
agar aap chahte h ki apke comment ko publish nhi kiya jaye to bata dijiye ya ap HAMSE SAMPARK KARE form fill karke send kare
THANKXXXX

Subscribe to: Post Comments (Atom)

Ads Inside Post