<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 ----------> <div class="container"> <div class="uc-tabs"> <ul id="myTabs" class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a></li> <li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a></li> </ul> <div id="myTabContent" class="tab-content"> <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab"> <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> <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab"> <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> </div> </div> </div> </div>

.container { margin:20px; } .uc-tabs>.nav li:first-child{ margin-left: 15px; } .uc-tabs>.nav >li>a { padding: 5px 15px; } .uc-tabs>.tab-content{ padding: 5px; } .red{ color:red; }

$(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'); } }); });