<body>
<div class="col-md-6 offset-md-3 mt-5">
<a target="_blank" href="https://getform.io?ref=codepenHTML">
<img src='https://i.imgur.com/Z2Nyxsm.png'>
</a>
<br>
<a target="_blank" href="https://getform.io?ref=codepenHTML" class="mt-3 d-flex">Get your free endpoint now</a>
<h1>Getform.io HTML Form with Google invisible reCaptcha(v3) Example</h1>
<form accept-charset="UTF-8" action="https://getform.io/f/bc42bd5f-dca6-4965-9444-a4b324d95dc0" method="POST" enctype="multipart/form-data" target="_blank">
<div class="form-group">
<label for="exampleInputEmail1" required="required">Email address</label>
<input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputName">Name</label>
<input type="text" name="name" class="form-control" id="exampleInputName" placeholder="Enter your name" required="required">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Favourite Platform</label>
<select class="form-control" id="exampleFormControlSelect1" name="platform" required="required">
<option>Github</option>
<option>Gitlab</option>
<option>Bitbucket</option>
</select>
</div>
<hr>
<div class="form-group mt-3">
<label class="mr-2">Upload your CV:</label>
<input type="file" name="file">
</div>
<input type="hidden" id="captchaResponse" name="g-recaptcha-response" />
<hr>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
h1 {
font-size: 20px;
margin-top: 24px;
margin-bottom: 24px;
}
.grecaptcha-badge {
display: none;
}
img {
height: 40px;}grecaptcha.ready(function() {
grecaptcha.execute("6Lc1zqcUAAAAAGjsx7EfSOZGnYmUXRpLqzPirbu5", {action: "homepage"})
.then(function(token) { document.getElementById('captchaResponse').value = token;
});
});
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.