"Bootstrap Contact Form"
Bootstrap 3.3.0 Snippet by tylerobier777

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap Contact Form</title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> </head> <body> <div class="message_to"> <div class="message_text"> <center><i class="fa fa-envelope envelope"></i></center> </div> </div> <div class="message_to_email"> <div class="message_to_link"> <a href="#">some-email@something.com</a> </div> </div> <form action="" method="post"> <input type="text" name="email" class="form-control" placeholder="Please Enter Email" /> <input type="text" name="subject" class="form-control" placeholder="Please Enter Subject" /> <textarea name="message" id="message" cols="30" rows="10" class="form-control" placeholder="Enter Message Here"></textarea> <center><button type="submit" name="send_message" class="btn btn-primary btn-large btn-half btn-send"><i class="fa fa-send fa-2x"></i></button></center> </form> </body> </html>
body{ margin: 10px; } .btn{ border-radius: 0; } .form-control{ border-radius: 0; margin-bottom: 10px; } textarea{ resize: none; } .message_to{ padding: 10px 10px 10px 10px; background: lightgray; height: 40px; width: 40px; border-radius: 50%; margin-bottom: 10px; border: 2px solid rgba(0,0,0,.2); text-align: center; font-size: 20px; line-height: -10px; } .envelope{ position: relative; top: -5px; right: 2px; } .message_to_email{ height: 40px; width: 400px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; background: lightgray; position: absolute; left: 34px; line-height: 3em; top: 10px; z-index: -1; text-align: center; } .btn-half{ width: 320px; } .btn-send{ border-radius: 8px; }

Related: See More

Paper Kit
Contact Form
Bootstrap Contact Form
Bootstrap Contact Form

Questions / Comments: