Bootstrap 3 - Form inside modal
by redoak2000
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalNorm">
open Modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Contact Form
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form action="form.php" method="POST">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control"
id="name" placeholder="Enter Name"/>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control"
id="email" placeholder="Email Address"/>
</div>
<div class="form-group">
<label for="name">Phone No.</label>
<input type="text" class="form-control"
id="phone" placeholder="Enter Phone No."/>
</div>
...
CSS
.modal-body .form-horizontal .col-sm-2,
.modal-body .form-horizontal .col-sm-10 {
width: 100%
}
.modal-body .form-horizontal .control-label {
text-align: left;
}
.modal-body .form-horizontal .col-sm-offset-2 {
margin-left: 15px;
}