Use recaptcha v3 without form and button - recaptcha

Question

I would like to use recaptcha on our forms but our forms are specific as they are made by our CMS Sitefinity. They have no <form> eitheir <button>. Its structure looks like this:
<div class="sfFormsEditor sfTopLbls ">
[...]
<div class="g-recaptcha" data-sitekey="Site key"></div>
<div class="sfFormSubmit sfSubmitBtnMedium">
<input type="submit" value="Envoyer la demande" data-sitekey="Site key" data-callback="onSubmit" data-action="submit">
</div>
</div>
I tried to use this script:
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
$(".sfFormSubmit input").attr('data-sitekey','Site key');
$(".sfFormSubmit input").attr('data-callback','onSubmit');
$(".sfFormSubmit input").attr('data-action','submit');
$(document).ready(function(){
$(".sfFormSubmit input").on('click',function(){
e.preventDefault();
grecaptcha.execute('Site key', {action: 'submit'});
});
});
</script>
The captcha is visible but when filling the form without clicking on the captcha, the form is submitted.
Is there a way to use recaptcha on such a form?
Thank you
Best
Sophie

Answer 1

You need to build a custom field control. For webforms, you can start here:
https://www.progress.com/documentation/sitefinity-cms/tutorial-build-a-custom-field-control-webforms-
It may look something like this:
ReCaptcha.ascx
<%# Control Language="C#" %>
<%# Register Assembly="Telerik.Sitefinity" TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" %>
<% if ( !Request.RawUrl.ToLower().Contains("/sitefinity/content/forms/entries/") ) { %>
<script src='https://www.google.com/recaptcha/api.js'></script>
<asp:Label runat="server" ID="titleLabel" CssClass="sfTxtLbl" Text="Captcha" AssociatedControlID="TextBox1" Visible="false" />
<div class="sfFieldWrp" style="display: none;">
<asp:TextBox ID="TextBox1" CssClass="sfTxt" runat="server" Text="OK" />
<sf:SitefinityLabel runat="server" ID="descriptionLabel" WrapperTagName="div" CssClass="sfDescription" />
<sf:SitefinityLabel runat="server" ID="exampleLabel" WrapperTagName="div" CssClass="sfExample" />
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="g-recaptcha" data-sitekey="__YourReCaptchaSiteKey___"></div>
</div>
<% } %>
ReCaptcha.cs
// not including the full code, as most of it is auto-generated, but here are
// the most important methods:
public override bool IsValid()
{
// check the captcha with google
var encodedResponse = HttpContext.Current.Request.Form["g-Recaptcha-Response"];
var isCaptchaValid = ReCaptchaModel.Validate(encodedResponse);
return isCaptchaValid;
}
ReCaptchaModel.cs
public class ReCaptchaModel
{
public bool Success { get; set; }
public List<string> ErrorCodes { get; set; }
public static bool Validate(string encodedResponse)
{
if (string.IsNullOrEmpty(encodedResponse)) return false;
var client = new WebClient();
var secret = __YourReCaptchaSecretKey__ ;
if (string.IsNullOrEmpty(secret)) return false;
var googleReply = client.DownloadString(string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}", secret, encodedResponse));
var serializer = new JavaScriptSerializer();
var reCaptcha = serializer.Deserialize<ReCaptcha>(googleReply);
return reCaptcha.Success;
}
}
ReCaptcha.js
Type.registerNamespace("SitefinityWebApp.CustomControls.FormControls.CustomFormWidgets.ReCaptcha");
SitefinityWebApp.CustomControls.FormControls.CustomFormWidgets.ReCaptcha.ReCaptcha = function (element) {
this._textbox = null;
this._dataFieldName = null;
SitefinityWebApp.CustomControls.FormControls.CustomFormWidgets.ReCaptcha.ReCaptcha.initializeBase(this, [element]);
}
SitefinityWebApp.CustomControls.FormControls.CustomFormWidgets.ReCaptcha.ReCaptcha.prototype = {
/* --------------------------------- set up and tear down ---------------------------- */
/* --------------------------------- public methods ---------------------------------- */
// Gets the value of the field control.
get_value: function () {
return jQuery(this._textbox).val();
},
// Sets the value of the text field control depending on DisplayMode.
set_value: function (value) {
jQuery(this._textbox).val(value);
},
/* --------------------------------- event handlers ---------------------------------- */
/* --------------------------------- private methods --------------------------------- */
/* --------------------------------- properties -------------------------------------- */
get_textbox: function () {
return this._textbox;
},
set_textbox: function (value) {
this._textbox = value;
},
get_dataFieldName: function () {
return this._dataFieldName;
},
set_dataFieldName: function (value) {
this._dataFieldName = value;
}
}
SitefinityWebApp.CustomControls.FormControls.CustomFormWidgets.ReCaptcha.ReCaptcha.registerClass('SitefinityWebApp.CustomControls.FormControls.CustomFormWidgets.ReCaptcha.ReCaptcha', Telerik.Sitefinity.Web.UI.Fields.FieldControl);