<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 ----------> <div class="center"><button data-toggle="modal" data-target="#squarespaceModal" class="btn btn-primary center-block">Click Me</button></div> <!-- line modal --> <div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <!-- content goes here --> <form id="contact" action="" method="post"> <h3 class="text-center">Quick Contact</h3> <h4 class="text-center">Contact us today, and get reply with in 24 hours!</h4> <fieldset> <input placeholder="Your name" type="text" tabindex="1" required autofocus> </fieldset> <fieldset> <input placeholder="Your Email Address" type="email" tabindex="2" required> </fieldset> <fieldset> <input placeholder="Your Phone Number" type="tel" tabindex="3" required> </fieldset> <fieldset> <textarea placeholder="Type your Message Here...." tabindex="4" required></textarea> </fieldset> <div class="modal-footer"> <div class="btn-group btn-group-justified" role="group" aria-label="group button"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button> </div> <div class="btn-group btn-delete hidden" role="group"> <button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button> </div> <div class="btn-group" role="group"> <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button> </div> </div> </div> </form> </div> </div> </div> </div>

.modal-body{ padding:0px !important; } .center { margin-top:50px; } .modal-footer { padding-top: 20px; } .modal-footer .btn-group button { height:40px; border-top-left-radius : 0; border-top-right-radius : 0; border: none; border-right: 1px solid #ddd; } .modal-footer .btn-group:last-child > button { border-right: 0; } #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; } #contact { padding:25px; } #contact h3 { color: #F96; display: block; font-size: 30px; font-weight: 400; } #contact h4 { margin:5px 0 15px; display:block; font-size:13px; } fieldset { border: medium none !important; margin: 0 0 10px; min-width: 100%; padding: 0; width: 100%; } #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact textarea { width:100%; border:1px solid #CCC; background:#FFF; margin:0 0 5px; padding:10px; } #contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact textarea:hover { -webkit-transition:border-color 0.3s ease-in-out; -moz-transition:border-color 0.3s ease-in-out; transition:border-color 0.3s ease-in-out; border:1px solid #AAA; } #contact textarea { height:100px; max-width:100%; resize:none; } #contact button[type="submit"] { cursor:pointer; width:100%; border:none; background:#0CF; color:#FFF; margin:0 0 5px; padding:10px; font-size:15px; } #contact button[type="submit"]:hover { background:#09C; -webkit-transition:background 0.3s ease-in-out; -moz-transition:background 0.3s ease-in-out; transition:background-color 0.3s ease-in-out; } #contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); } #contact input:focus, #contact textarea:focus { outline:0; border:1px solid #999; } ::-webkit-input-placeholder { color:#888; } :-moz-placeholder { color:#888; } ::-moz-placeholder { color:#888; } :-ms-input-placeholder { color:#888; }