Bootstrap snippet: Compose message form

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: form,message,email



<!-- /.modal compose message --> <div class="modal show" id="modalCompose"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header modal-header-info"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title"><span class="glyphicon glyphicon-envelope"></span> Compose Message</h4> </div> <div class="modal-body"> <form role="form" class="form-horizontal"> <div class="form-group"> <label class="col-sm-2" for="inputTo"><span class="glyphicon glyphicon-user"></span>To</label> <div class="col-sm-10"><input type="email" class="form-control" id="inputTo" placeholder="comma separated list of recipients"></div> </div> <div class="form-group"> <label class="col-sm-2" for="inputSubject"><span class="glyphicon glyphicon-list-alt"></span>Subject</label> <div class="col-sm-10"><input type="text" class="form-control" id="inputSubject" placeholder="subject"></div> </div> <div class="form-group"> <label class="col-sm-12" for="inputBody"><span class="glyphicon glyphicon-list"></span>Message</label> <div class="col-sm-12"><textarea class="form-control" id="inputBody" rows="8"></textarea></div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-warning pull-left">Save Draft</button> <button type="button" class="btn btn-primary ">Send <i class="fa fa-arrow-circle-right fa-lg"></i></button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal compose message -->
@import url('http://fonts.googleapis.com/css?family=Open+Sans:200,300'); body { background-color:#333; font-family: 'Open Sans',Arial,Helvetica,Sans-Serif; } .modal-header-info { color:#fff; padding:9px 15px; border-bottom:1px solid #eee; background-color: #5bc0de; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
Dey-Dey

Compose message form

Dey-Dey
  Jun 2nd 2014, 20:03
3.2K Views