How we make contact form in html and css

This is vary beautiful form that created in to web languages 1.Html (Hyper Text Markup Language) 2.CSS (Custom Style Sheet ). In first language you make the layout of the form and in second language use for the style of the form .The form that show in the picture there Html and Css coding are bellow

HTML code.

<div class="inner-body conta">
<div class="left-con" style="
    width: 350px;
    height: 300px;
    margin-top: 134px;
">
<div>
<h3>Get In Touch</h3>
<p>howtip@gmail.com</p>
<div class="social-ico">
<ul>
<li>
<a href="#" target="_blank">
<img src="http://www.adcreatorsdemo.com.au/cleopatra/wp-content/themes/cleopatra/images/fb-b.png">
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="http://www.adcreatorsdemo.com.au/cleopatra/wp-content/themes/cleopatra/images/insta.png">
</a>
</li>
<li>
<a href="#">
<img src="http://www.adcreatorsdemo.com.au/cleopatra/wp-content/themes/cleopatra/images/pin-b.png">
</a>
</li>
</ul>
</div>
</div>
</div><div class="right-con">
<h3>have a question?</h3>
<div role="form" class="wpcf7" id="wpcf7-f122-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/contact-us/#wpcf7-f122-o1" method="post" class="wpcf7-form" novalidate>
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="122">
<input type="hidden" name="_wpcf7_version" value="4.6.1">
<input type="hidden" name="_wpcf7_locale" value="en_US">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f122-o1">
<input type="hidden" name="_wpnonce" value="22467ffb7b">
</div>
<p><label> Your Name*<br>
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label> Your Phone*<br>
    <span class="wpcf7-form-control-wrap your-phone"><input type="tel" name="your-phone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label> Your Email*<br>
    <span class="wpcf7-form-control-wrap email"><input type="email" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label> Your Message<br>
    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div> </div>

</div>

Css code.

.middle-text a , a.checkout-button.button.alt.wc-forward , a.cancel-proceed, .wpcf7-form-control.wpcf7-submit{
    width: 297px;
    height: 77px;
    display: inline-block;
    font-size: 25px;
    color: #fff;
    background: #000 url(images/border.jpg);
    background-size: 100% 10%;
    background-position: 0% 100%;
    background-repeat: no-repeat;
    border-radius: 0;
    font-family: 'HelveticaNarrow', sans-serif;
    line-height: 77px;
    text-transform: uppercase;
    padding: 0;
border:none;
}

.wpcf7-form-control.wpcf7-submit:hover , .wpcf7-form-control.wpcf7-submit:active, .wpcf7-form-control.wpcf7-submit:focus{
background: #000 url(images/border.jpg);
    background-size: 100% 10%;
    background-position: 0% 100%;
    background-repeat: no-repeat;
text-decoration:underline;
border:none;
.inner-body.conta {
    text-align: center;
}

.left-con, .right-con {
    display: inline-block;
    text-align: center;
    vertical-align: top;
}

.left-con {
    border: 1px solid;
    height:410px;
    position: relative;
margin:45px 10px 0 0;
max-width:470px;
width:100%;
}


.left-con > div{
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    height: 240px;
    margin: auto;
}

.right-con {
margin:45px 0 0 10px;
max-width:514px;
    width: 100%;

}
.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--downloads { display:none; }
.left-con h3, .right-con h3 {
    font-size: 35px;
    color: #c39682;
    font-family: 'HelveticaNarrow', sans-serif;
    text-transform: uppercase;
    font-weight: normal;
margin-top:0;
}

.left-con h2 {
    font-family: 'HelveticaNarrow', sans-serif;
    font-size: 38px;
    font-weight: normal;
    margin-bottom: 0;
    line-height: 35px;
}

.left-con p {
    font-size: 24px;
    font-family: 'HelveticaNarrow', sans-serif;
    font-weight: bold;
}

.left-con ul {
    padding: 0;
}

.left-con li {
    display: inline-block !important;
    margin: 0 15px !important;
}

.right-con form p {
    text-align: left;
    margin-bottom: 22px;
}

.right-con form p  label {
text-transform :uppercase;
    font-family: 'HelveticaNarrow', sans-serif;
font-size:14px;
}

.right-con form p input {
    width: 100%;
    height: 25px;
    border: 1px solid black;
}

.right-con form p textarea {
height:95px;
    border: 1px solid black;
    width: 100%;
resize:none;
}

.right-con form p:nth-child(6) {
    text-align: center;
}
                                                  
Share on Google Plus

About Abdul Hameed

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

0 comments :

Post a Comment