HTML
<div class="tb-contact-form-widget"> <form name="contact-form"> <div class="form-name"><span><i class="fa fa-pencil-square-o"></i> Your Name: </span><br /><input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div> <div class="form-email"><span><i class="fa fa-envelope-o"></i> E-mail Address *: </span><br /><input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div><div style="clear: both;"></div><div class="form-message"> <span><i class="fa fa-keyboard-o"></i> Message *:</span><br /><textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><div class="srbtn"><input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Submit" /><input type="reset" class="btn-reset" value="Clear" /></div><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><h3>Our Social Sites</h3><ul class="b-social-buttons"><li><a href="#" class="btn-lg"><i class="fa fa-twitter"> <span class="network-name">Twitter</span></i></a></li><li><a href="#" class="btn-lg"><i class="fa fa-facebook"> <span class="network-name">Facebook</span></i></a></li><li><a href="#" class="btn-lg"><i class="fa fa-youtube-play"> <span class="network-name">Youtube</span></i></a></li></ul></div></form></div>{codeBox}
CSS
.tb-contact-form-widget{background-color:#A4A4A4;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR6XCuabVRVby6ZTJCcu94PN2asCt1dtzyh8y9KvVhUhmF8ex7UzxiN7GlKC-O0bhwyJ74y00M9Ly26sYZY244X7IlJVRCwpSVaSE4cFPHqh3OvU4dwcRqz9XAB6I4kzsT6d5OzI6qTP8n/s1600/to-contact-img-2.jpg");background-repeat: repeat;background-position: 100% 100%;color:white;padding:25px;}.srbtn{display:inline-block;}.cform-button, .btn-reset{background-color:#f1f1f1;padding:5px 30px;}.cform-button:hover {background-color: #2980b9;color: #fff;}.btn-reset:hover {background-color: red;color: #fff;}.tb-contact-form-widget h3{text-align:center;margin:20px 0;padding:10px 0;border-top: 1px dotted #f5f5f5;}.c-form-name, .c-form-email { width: 50%; max-width: 50%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}.c-form-email-message { width: 95%; max-width: 95%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;-moz-border-radius: 5px;-webkit-border-radius: 5px;-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}.c-form-name, .c-form-email, .c-form-email-message input:focus{background-color: #FFF;box-shadow: 0 0 0 1px #E8C291 inset;border-color: #E8C291;outline: none;-moz-box-shadow: 0 0 0 1px #e8c291 inset;-webkit-box-shadow: 0 0 0 1px #E8C291 inset;}.b-social-buttons{list-style-type:none;text-align:center;}.b-social-buttons li{display:inline-block;padding:15px;background-color:#f5f5f5;border-radius:5px;}.b-social-buttons li a{color:#333;text-decoration:none;}#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:100%;margin-top:35px;}{codeBox}