Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Sliding engage form">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur optio soluta nam sapiente ad fugiat cupiditate distinctio veniam consectetur nemo laborum consequatur corporis excepturi, quisquam esse repellat! Nobis, quibusdam, perferendis!
​
  <button class="btn cta-button" id="cta-engage">Engage your community</button>
    <div class="arrow-up no-top-margin"></div>
</div>
  <section class="engage-form-section gray-bg">
    <button type="button" class="close">&times;</button>
  <h2 class="h1 text-center">Fill up this form and we will get in touch with you</h2>
  <p class="text-center brand-color-1-text">(All fields are mandetory)</p>
  <div class="col-md-6 col-centered">
    <form class="form-horizontal">
      <div class="form-group">
        <label for="name" class="col-sm-2 control-label">Name :</label>
        <div class="col-sm-10">
          <input type="text" class="form-control form-field" id="name">
        </div>
      </div>
      <div class="form-group">
        <label for="email" class="col-sm-2 control-label">Email :</label>
        <div class="col-sm-10">
          <input type="email" class="form-control form-field" id="email">
        </div>
      </div>
      <div class="form-group">
        <label for="company" class="col-sm-2 control-label">Company :</label>
        <div class="col-sm-10">
          <input type="text" class="form-control form-field" id="company">
        </div>
      </div>
      <div class="form-group">
        <label for="country" class="col-sm-2 control-label">Country :</label>
        <div class="col-sm-10">
          <input type="text" class="form-control form-field" id="country">
        </div>
      </div>
      <div class="form-group">
        <label for="city" class="col-sm-2 control-label">City :</label>
        <div class="col-sm-10">
          <input type="text" class="form-control form-field" id="city">
        </div>
      </div>
      <div class="form-group">
        <label for="msg" class="col-sm-2 control-label">Leave a message :</label>
        <div class="col-sm-10">
          <textarea></textarea>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-10 col-md-offset-2 text-center">
          <button type="submit" class="btn brand-btn">Submit</button>
        </div>
      </div>
    </form>
  </div>
</section>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Chandrikapro
0viewers