<form id="myFormId" action="/forms/cases.ashx?form=demo_ajax_example-recaptcha_v3&isSubscription=false" name="demo_ajax_example-recaptcha_v3" method="post" enctype="multipart/form-data">
<label for="FirstName">First Name</label>
<input type="text" id="FirstName" name="FirstName" required>
<label for="LastName">Last Name</label>
<input type="text" id="LastName" name="LastName" required>
<label for="Email">Email</label>
<input type="email" id="Email" name="Email" required>
<label for="NotRequired">Not Required</label>
<input type="text" id="NotRequired" name="NotRequired" >
<script>
'use strict';grecaptcha.ready(function(){function e(a){grecaptcha.execute("6Ld5QIoUAAAAAKznGOlK7z6mgqJ8ajRUc3CK5M17",{action:'general_form_demo_ajax_example_recaptcha_v3'}).then(function(b){document.querySelector(".g-recaptcha-response-v3-demo_ajax_example-recaptcha_v3").value=b;a&&a()})}window.customFormSubmit=new Event("customFormSubmit");let a=document.querySelector(".g-recaptcha-response-v3-demo_ajax_example-recaptcha_v3").closest("form");if(null!=a){let d=!0,b=0,c=document.getElementById("paymentFields_"+a.getAttribute("name"));a.onsubmit = function(f){f.preventDefault(); if (d) return b++,d = !1,a.CMS_CustomSubmit = new Event("CMS_CustomSubmit",{cancelable:!0}),e(function(){c?"true"===c.dataset.paymentEnabled?(a.dispatchEvent(window.customFormSubmit),b=0,d=!0):a.dispatchEvent(window.customFormSubmit):(a.CMS_CustomSubmit.data={form:a},a.dispatchEvent(a.CMS_CustomSubmit))}),!1;0<b&&b++;if(1<b)return alert("Form submission is in progress."),!1};c||a.addEventListener("CMS_CustomSubmit",function(c){c.defaultPrevented?(b=0,d=!0):a.submit()})}else e()}); </script>
<input type="hidden" class="g-recaptcha-response-v3-demo_ajax_example-recaptcha_v3" name="g-recaptcha-response-v3">
<input class="button" type="submit" value="Submit">
</form>
<div id="msgId"></div>
<script>
var myForm = document.getElementById("myFormId");
var message = document.getElementById("msgId");
myForm.addEventListener("CMS_CustomSubmit", function(event) {
event.preventDefault();
//AJAX form submit below
var action = myForm.action + "&jsonResponse=1";
fetch (action, {
method: 'POST',
body: new FormData(myForm)
}).then(function (r) {
return r.json();
}).then(function (response) {
// do any validation or other custom stuff here
console.log(response);
if (response.Error && response.Error > 0) {
message.classList.add("error");
message.innerHTML = response.ErrorMessages.join("\r\n");
} else {
var msg = "";
for (var i=0;i<response.Fields.All.length;i++) {
msg += response.Fields.All[i].Name + ': ' + response.Fields.All[i].Value + '<br>';
}
myForm.style.display = 'none';
message.classList.remove("error");
message.classList.add("success");
message.innerHTML = '<h4>Success!</h4><p>' + msg + '</p>';
// If wanting to then redirect form, uncomment below:
// window.location = response.FormRedirectLink;
}
});
});
</script>
{
"Name": "DEMO AJAX Example reCaptcha v3",
"Alias": "demo_ajax_example-recaptcha_v3",
"IsSubscription": false,
"EnableDefaultJSValidation": false,
"Fields": [
{
"Name": "Email",
"Alias": "Email",
"CreatedDateTime": "2021-06-28T18:03:40.451619",
"UpdateDateTime": "0001-01-01T00:00:00",
"Type": 7,
"IsMandatory": true,
"FieldGroupType": 1,
"Order": 2,
"Options": [],
"Id": "1415",
"FormId": "1387"
},
{
"Name": "reCAPTCHA v3",
"Alias": "ReCAPTCHAV3",
"CreatedDateTime": "2021-06-28T18:03:40.45162",
"UpdateDateTime": "0001-01-01T00:00:00",
"Type": 9,
"IsMandatory": false,
"FieldGroupType": 1,
"Order": 4,
"Options": [],
"Id": "1417",
"FormId": "1387"
},
{
"Name": "First Name",
"Alias": "FirstName",
"CreatedDateTime": "2021-06-28T18:03:40.451617",
"UpdateDateTime": "2022-05-11T15:32:06.413082",
"Type": 7,
"IsMandatory": true,
"FieldGroupType": 1,
"Order": 0,
"Options": [],
"Id": "1413",
"FormId": "1387"
},
{
"Name": "Last Name",
"Alias": "LastName",
"CreatedDateTime": "2021-06-28T18:03:40.451618",
"UpdateDateTime": "2022-05-11T15:32:06.413082",
"Type": 7,
"IsMandatory": true,
"FieldGroupType": 1,
"Order": 1,
"Options": [],
"Id": "1414",
"FormId": "1387"
},
{
"Name": "Not Required",
"Alias": "NotRequired",
"CreatedDateTime": "2021-06-28T18:03:40.45162",
"UpdateDateTime": "2022-05-11T15:32:06.413082",
"Type": 7,
"IsMandatory": false,
"FieldGroupType": 2,
"Order": 3,
"Options": [],
"Id": "1416",
"FormId": "1387"
}
],
"PaymentAmount": 0.0,
"ModuleItemId": 0,
"FormType": "Generic",
"ModuleName": "",
"UniqueId": "1a0a0cf1-2e8d-4001-98ec-6dbaaa2cdbc3",
"Parent": {
"Value": {
"Id": 2612,
"ModuleLayoutName": "Page Detail",
"Enabled": true,
"ReleaseDate": "2018-11-24T18:00:00",
"ExpiryDate": "2099-12-10T18:00:00",
"Weighting": 0,
"Item_Rating": 0,
"CodeEditor": true,
"ExternalId": 0,
"DisableForSiteSearch": false,
"Author_Name": null,
"Author_Url": null,
"Author": 0,
"SEOTitle": null,
"CustomProperties": "{}",
"LastUpdatedDate": "2021-07-13T01:05:34.371572",
"Module_Alias": "Page",
"Module_Id": 1522,
"ParentName": "demo-cs",
"ParentUrl": "/demo-cs",
"Name": "AJAX Form reCaptcha v3",
"UrlSlug": "ajax-form-recaptcha-v3",
"Url": "/demo-cs/ajax-form-recaptcha-v3",
"MetaDescription": null,
"ShowPageForSearchEngine": true,
"CanonicalLink": null,
"MetaTitle": null,
"ParentId": 2224,
"Url_List": [
"/demo-cs/ajax-form-recaptcha-v3"
],
"ParentId_List": [
2224
],
"EnableAMP": false,
"AMPContent": null,
"SocialMetaTags": null,
"OpenGraphPropertiesValue": null,
"SeoPriority": 0.5,
"Description": "{% component type: \"form\", alias: \"demo_ajax_example-recaptcha_v3\", layout: \"\", collectionVariable: \"formData\" %}\r\n{% capture form %}{% component type: \"form\", alias: \"demo_ajax_example-recaptcha_v3\" %}{% endcapture %}\r\n\r\n<h1>Basic AJAX Form Submission Demo (with reCaptcha v3)</h1>\r\n<div class=\"grid-x grid-padding-x\">\r\n <div class=\"cell medium-6\">\r\n <p>{{form}}</p>\r\n </div>\r\n <div class=\"cell medium-6\">\r\n <ul class=\"tabs\" data-tabs id=\"code-tabs\">\r\n <li class=\"tabs-title is-active\"><a href=\"#panel1\" aria-selected=\"true\">Form Code</a></li>\r\n <li class=\"tabs-title\"><a data-tabs-target=\"panel2\" href=\"#panel2\">Liquid Output</a></li>\r\n </ul>\r\n <div class=\"tabs-content\" data-tabs-content=\"code-tabs\">\r\n <div class=\"tabs-panel is-active\" id=\"panel1\">\r\n <pre>{{form | escape}}</pre>\r\n </div>\r\n <div class=\"tabs-panel\" id=\"panel2\">\r\n <pre>{{formData | escape }}</pre>\r\n </div>\r\n </div>\r\n </div>\r\n</div>",
"TemplateName": "DEMO Companion Site",
"ItemCategories": null,
"ItemCategoryIdList": null,
"ItemTags": null,
"SiteSearchKeywords": null,
"ID": 2612,
"CreatedByMemberId": "0",
"IsHome": false,
"Pagination": null,
"OpenGraphProperties": {
"title": null,
"type": null,
"url": null,
"locale": null,
"image": null
},
"Parent": null,
"TemplateVirtualPointer": {
"Pointer": 8491950041332711514,
"TypeId": 1977186194,
"InstanceId": 90,
"DbTypeId": 1977186194,
"DbInstanceId": 90
},
"Params": {}
},
"Type": 5
},
"ReCaptcha_Sitekey": "6Ld5QIoUAAAAAKznGOlK7z6mgqJ8ajRUc3CK5M17",
"Params": {
"type": "form",
"alias": "demo_ajax_example-recaptcha_v3",
"layout": "",
"collectionvariable": "formData"
}
}
