Create Contact Us Page (Contact From) in Blogger | Tech Cods

Hello dosto apka swagat hai hamare blog me aur aj ka topic hai Create Contact Us Page (Contact From) in Blogger to mai apko bataunga blogger me contact us page kaise banate hai mai apko simple way me bataunga.

How to create contact us page in blogger

To desto apko contact us page create karne se pahile apko ye niche diye gayi  chize karni padegi tabhi apke contact us page me style apply hogi .

Apko pahile blogger.com pe sign in karna hai.

1) Blogger me contact widget add kaise kare

    

• Apko blogger ke dashboard me Layout me click kare.
• Fir sidebar me "Add a gadget" per click kare.

• Apko Scroll down karna hai aur niche Contact From ke side me blue + icon per click kare.

• Fir apko kuch nahi karna apko Save button per click karna hai.

• Fir Theme per click kare.
• Body me Edit HTML per click kare.

• [Mobile Users] crome browser ya any browser me menu bar me Find In Page pe click kare.
•  [Pc Users ] keybord me [ CTRL+F ] press kare.
• Aur  is  ]]></b:skin> code ko type kare and Enter kare. 

• Ab apko is code ko ]]></b:skin> tag ke Upar me paste karna hai.

div#ContactForm1 { 
display: none !important; 
}

• Fir apko Save button per click karna hai.

• Ab apko Pages per click kare fir New page per click kare 

• HTML section me click kare.
• Fir apko is niche diye gaye code ko paste karna hai

Best Contact Us Page Style Blogger 

<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
#contact{
    background-color:#fff;
    margin:30px 0 !important
}
#contact .contact-form-widget{
    max-width:100% !important
}
#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message{
    background-color:#FFF;
    border:1px solid #eee;
    border-radius:3px;
    padding:10px;
    margin-bottom:10px !important;
    max-width:100% !important
}
#contact .contact-form-name{
    width:47.7%;
    height:50px
}
#contact .contact-form-email{
    width:49.7%;
    height:50px
}
#contact .contact-form-email-message{
    height:150px
}
#contact .contact-form-button-submit{
    max-width:100%;
    width:100%;
    z-index:0;
    margin:4px 0 0;
    padding:10px !important;
    text-align:center;
    cursor:pointer;
    background:#27ae60;
    border:0;
    height:auto;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;
    text-transform:uppercase;
    -webkit-transition:all .2s ease-out;
    -moz-transition:all .2s ease-out;
    -o-transition:all .2s ease-out;
    -ms-transition:all .2s ease-out;
    transition:all .2s ease-out;
    color:#FFF
}
#contact .contact-form-button-submit:hover{
    background:#2c3e50
}
#contact .contact-form-email:focus,#contact .contact-form-name:focus,#contact .contact-form-email-message:focus{
    box-shadow:none !important
}
</style>

<br />
<div class="contact-form">
<div class="contact section" id="contact" style="display: block;">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />

                                <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />

                                <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>

                                <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />

                                <br />
<div style="text-align: center; width: 100%;">
<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>
</div>
</div>
</div>

• Publish button per click kare