"Simple Contact Form"
Bootstrap 3.2.0 Snippet by bagde

<div class="container"> <div class="col-md-5"> <div class="form-area"> <form role="form"> <br style="clear:both"> <h3 style="margin-bottom: 25px; text-align: center;">Contact Form</h3> <div class="form-group"> <input type="text" class="form-control" id="name" name="name" placeholder="Name" required> </div> <div class="form-group"> <input type="text" class="form-control" id="email" name="email" placeholder="Email" required> </div> <div class="form-group"> <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" required> </div> <div class="form-group"> <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required> </div> <div class="form-group"> <textarea class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"></textarea> <span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span> </div> <button type="button" id="submit" name="submit" class="btn btn-primary pull-right">Submit Form</button> </form> </div> </div> </div>
.red{ color:red; } .form-area { background-color: #FAFAFA; padding: 10px 40px 60px; margin: 10px 0px 60px; border: 1px solid GREY; }
$(document).ready(function(){ $('#characterLeft').text('140 characters left'); $('#message').keydown(function () { var max = 140; var len = $(this).val().length; if (len >= max) { $('#characterLeft').text('You have reached the limit'); $('#characterLeft').addClass('red'); $('#btnSubmit').addClass('disabled'); } else { var ch = max - len; $('#characterLeft').text(ch + ' characters left'); $('#btnSubmit').removeClass('disabled'); $('#characterLeft').removeClass('red'); } }); });

Similar snippets: See More


Comments:

Tarek Siala 2016-09-23 22:56:51
    i like it
Elio Apolloni 2016-11-21 18:33:16
    I am sorry for the dumb question but how do we specify the target for the "submit" button? I'd like the form to send an e-mail to a specified e-mail address i own, can this be made? How?
Jorne Moonen 2017-01-19 16:10:03
    @elioapolloni:disqus There's no such thing as a stupid question or the only stupid question is the one that isn't asked ;)
Ned Redmond 2017-01-21 02:56:39
    Well, where's the answer?
Joshua 2017-06-15 16:44:38
    Just to let anyone know if you are using this from be sure to change the html from button to submit on the button type of any submit queries will not work

Commenting will be back soon.