"Awesome Form Complaints Or Suggestions Via E-mail"
Bootstrap 3.3.0 Snippet by ndang17

<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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link type="text/css" rel="stylesheet" href="http://dinus.org/assets/mail/mailtip.css"/> <script type="text/javascript" src="http://dinus.org/assets/mail/jquery.mailtip.js"></script> <div class="container"> <div class="row"> <center><h2>Awesome Form Complaints Or Suggestions Via E-mail</h2></center> <div class="col-md-4"></div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <div class="col-md-12 row" style="padding:0px;margin-bottom:10px;"> <div class="col-md-2"> <img src="http://dinus.org/img/fakultas/FIK/cs/cs.svg"> <div style="margin-left:30px;"> <img src="http://dinus.org/img/fakultas/FIK/cs/cs.png" width="70px" height="70px" class="img-circle" style="border:3px solid #052C52;"> </div> </div> <div class="col-md-10"> <hr> <p style="padding-left:55px;font-size:1.3em;"><strong>Zaskia Amanda</strong></p> </div> </div> <form> <table class="table"> <tr> <td> <input type="email" class="form-control" id="mailtip2" placeholder="Your e-mail"> </td> </tr> <tr> <td> <input class="form-control" type="text" placeholder="Subject"> </td> </tr> <tr> <td> <textarea class="form-control" rows="4" placeholder="Message text . . ."></textarea> </td> </tr> <tr> <td> <button class="btn btn-danger btn-sm" style="width: 100%;"><i class="fa fa-envelope-o" style="padding-right: 5px;"></i> Send</button> </td> </tr> </table> </form> </div> </div> </div> </div> </div> </div> <!-- Created By : Nandang Mulyadi --> <div class="container"> <div class="row"> <center> <footer>Dev : Nandang Mulyadi <cite title="Source Title">Indonesia</cite></footer> <p style="color:#b1b1b1;"> Thank's to <br> University Of Dian Nuswantoro Semarang <br> http://fortawesome.github.io/, http://loading.io/ , http://www.jqueryscript.net/ ,http://bootsnipp.com/ </p> </center> </div> </div>
body { background-color:#f1f1f1; } div.center{ margin-left:400px; }
$(function (){ var info = $('.info'); $('#mailtip2').mailtip({ onselected: function (mail){ info.text('you choosed email: ' + mail) } }); });

Related: See More


Questions / Comments: