Bootstrap Responsive Contact Form


This tutorial we will learn How to create a Responsive Contact Form using Bootstrap.


Creating and customizing these bootstrap contact form is quite easy. In this example I have included Contact Form which you can create easily, let’s start.

I’ve used Bootstrap V 3.3.7 – here download it. Otherwise, you can use CDN if you do not want to download it.

This Contact Form you can edit and customize to use which you want.

Code Example:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Responsive Contact Form</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
      body{
        background-color: #f1f1f1;
      }
      .contact-form{
        margin: 50px auto;
        padding: 25px 20px 10px;
        background: #3a1975;
        box-shadow: 2px 2px 4px #ab8de0;
        border-radius: 5px;
        color: #fff;
      }
      .contact-form h2{
        margin-top: 0px;
        margin-bottom: 15px;
        padding-bottom: 5px;
        border-radius: 10px;
        border: 1px solid #25055f;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-8 col-xs-12 col-md-offset-3 col-sm-offset-2">
          <div class="contact-form">
            <form action="" method="post">
              <h2 class="text-center">Contact Us</h2>            
              <div class="row">
                <div class="col-md-6 col-xs-12">
                  <div class="form-group">
                    <input type="text" name="first_name" class="form-control" placeholder="First Name*" required="required"/>
                  </div>
                </div>
                <div class="col-md-6 col-xs-12">
                  <div class="form-group">
                    <input type="text" name="last_name" class="form-control" placeholder="Last Name*" required="required"/>
                  </div> 
                </div>     
              </div>
              <div class="form-group">
                <input type="email" name="email" class="form-control" placeholder="Your Email*" required="required"/>
              </div>
              <div class="form-group">
                <input type="text" name="subject" class="form-control" placeholder="Subject"/>
              </div>        
              <div class="form-group">
                <textarea name="message" rows="8" class="form-control" placeholder="Your Message*" required="Your Message"></textarea>
              </div>
              <div class="form-group">
                <input type="submit" value="Send Message" class="btn btn-primary btn-block btn-lg"/>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

Output: