A simple contact form. (Alternative design)
Font Awesome Required for icons in form
Code:
<link rel="stylesheet" href="../../css/font-awesome.min.css">Code:
<div class="row justify-content-md-center">
<div class="col-md-6">
<div class="card border-primary">
<div class="card-header bg-primary text-white"><i class="fa fa-paper-plane" aria-hidden="true"></i> Contact Us</div>
<div class="card-body">
<form action="#">
<div class="form-group">
<label for="exampleInputEmail">Your Email:</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope" aria-hidden="true"></i></span>
<input type="email" class="form-control" placeholder="your@email.com">
</div>
</div>
<div class="form-group">
<label for="exampleInputName">Your Name:</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" placeholder="John Doe">
</div>
</div>
<div class="form-group">
<label for="exampleInputMessage">Your Message:</label>
<textarea name="message" class="form-control" rows="5"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
</div>
</div>
</div>