Blogger Blog Me Contact Form Page Kaise Banaye

2

How to add contact us form in blogger or wordpress blog in hindi? agar aap ek new blogger ho or aap apne blog me contact us page create karna cahate ho ya apne blog me Contact Form Page Add karna cahate ho to aaj es post me main aapko bataunga ki asani se free me apne wordpress or Blogger Blog Me Contact Form Page Kaise Banaye?

Agar aapke blog me contact form ka page hai or aap usse Bore ho chuke hai aapko uska design pasand nhi aa rha hai ya aap aapke blog me contact us page hai he nhi, or aap apne blog me contact form add karna cahate ho to aaj es post me main aapko bataunga ki Blogger Blog Me Contact Form Page Kaise Banaye?


Blog Me Social Follow Button Kaise Add Kare? or Blog Posts Me Social Share Button Kaise Add Kare? uske baare me maine phele se he bataya hua hai, lekin aaj es post me ham jainge ki asani se free me apne wordpress or Blogger Blog Me Contact Form Page Kaise Banaye?

Blogger Blog Me Contact Form Page Kaise Banaye?

#1: Sabse phele apne blog ke admin panel me login kare. edit html me jaker ]]></b:skin> ko Ctrl+F dbaker search kare. search karne ke baad uske upar neeche diye gye code ko copy karke paste kare.

#ContactForm1{

display:none;
}
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#cccccc;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
box-shadow: 1px 1px 5px #ccc;
}
#contact_wrap h3{
color: #e8f3f9;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#ContactForm1_contact-form-name{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://2.bp.blogspot.com/-GoNmkIDybR0/UZuZDpVOXaI/AAAAAAAAEO8/pNPaQU1aiwQ/s1600/user.png)no-repeat 10px center; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://3.bp.blogspot.com/-zGxMJ_C5R60/UZuZGnKgcuI/AAAAAAAAEPE/KwPOHFuBffc/s1600/pen.png)no-repeat 10px center; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 270px; 
height: 150px; 
margin: 5px auto; 
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://1.bp.blogspot.com/-QduNKpNbFyQ/UZuZPuE_OfI/AAAAAAAAEPU/Rv4C4Kic2I0/s1600/msg2.png)no-repeat 10px 10px; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px; 
height: 30px; 
float: right; 
color: #FFF;
padding: 0; 
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}

#2: Es code ko paste karne ke baad apne blog ke pages me jaker ek contact form ka new page create kare. agar phele se he hai to edit par click kare.

#3: Edit par click karne ek baad HTML par click kare.


#4: HTML par click karne ke baad neeche diye gye code ko copy kare paste karde.

<div id="contact_wrap"><h3>Contact Us</h3><form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" 
size="30" type="text" value="" /><input id="ContactForm1_contact-form-email" 
name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" 
name="email-message" placeholder="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<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></div><style type="text/css">#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}</style>

Now All Done! ab aapka kaam ho chuka hai. ab aapka awesome contact form page ban chuka hai. aap cahe to check kar sakte hai. aapka contct form kuch es type se dikhega.

to guys es trha se aap aasani se apne blogger blog me contact us page bana sakte ho. agar wordpress user ho to aap contact form 7 plugin ki help se aasani se apne blog me contact form add kar sakte ho.

umeed hai aapko blog me contact us page create karne ka tarika pata chal gya hoga or aap jaan gye honge ki asani se free me apne wordpress or Blogger Blog Me Contact Form Page Kaise Banaye?

agar aapko en steps me koi problem aa rhi hai, to neeche comment me puch sakte ho. or agar aapko yeh article helpful laga ho, to social media par share jarror kare.


Rate this post

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here