"Simple Contact Form"
Bootstrap 3.2.0 Snippet by bagde

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <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'); } }); });

Related: See More


Questions / Comments:

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

Joshua () - 1 year ago - Reply 0


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?

Elio Apolloni () - 1 year ago - Reply 0


inside the form where you defin itsuch as <form> than you add attrebute action like this. <form action="http://sendEmail.com">

For sending email you usually have a function you call to send email. But yeah the answer to your question is that, you need to add action. Do some digging. you will get there

nokins () - 2 months ago - Reply 0


@elioapolloni:disqus There's no such thing as a stupid question or the only stupid question is the one that isn't asked ;)

Jorne Moonen () - 1 year ago - Reply 0


Well, where's the answer?

Ned Redmond () - 1 year ago - Reply 0


i like it

Tarek Siala () - 2 years ago - Reply 0