RECAPTCHA - GOOGLE
HTML
<link rel="stylesheet" href="http://manos.malihu.gr/tuts/custom-scrollbar-plugin/demo_files/jquery.mCustomScrollbar.css">
<script type="text/javascript" src="http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<section class="content-back" id="homecontent">
<div class="content-container">
<div class="scroller-back">
<form accept-charset="UTF-8" action="/sendcontact" class="new_contact" data-remote="true" id="new_contact" method="post">
<div class="field">
<label for="contact_name">Name</label>
<br>
<input id="contact_name" name="contact[name]" size="30" type="text">
</div>
<div class="field">
<label for="contact_email">Email</label>
<br>
<input id="contact_email" name="contact[email]" size="30" type="text">
</div>
<div class="field">
<label for="contact_message">Message</label>
<br>
<textarea cols="40" id="contact_message" name="contact[message]" rows="20" style="height:200px;width:300px;resize:vertical;"></textarea>
</div>
<div class="field">
<script type="text/javascript" src="//www.google.com/recaptcha/api/challenge?k=6LdSjOMSAAAAAOBDYtQohZkbTOeI_fxTzuU8FKP9&lang="></script>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha.js"></script>
...
CSS
.content-back {
float: right;
width: 100%;
height:371px;
overflow: hidden;
background: #1abc9c;
}
.scroller-back {
height:320px;
padding-bottom: 15px;
padding-right: 0;
}
JavaScript
$(".scroller-back").mCustomScrollbar({
advanced:{
updateOnContentResize: true
}
});
$("#recaptcha_response_field").focus(function() {
$(".scroller-back").mCustomScrollbar("scrollTo",this);
});