Hi @garvitkothari2 I have moved your post here to preserve the original thread.
Writing a detailed post will help us solve your issue faster, generally speaking we need this:
Netlify Domain (.netlify.app)
Git Repo if you have one
Latest deploy logs (either copy and pasted or linked to)
Super quick suggestion, I’m pretty sure data-netlify-recaptcha is not intended to replace the data-netlify attribute.
Fix:
Try adding a data-netlify="true" attribute to your form.
@kylesloper In addition to your solution it seems @garvitkothari2 is submitting the form using JavaScript method. However the onsubmit method contains no code to send POST request to the action path. action="submit" should be action="/submit"
The onsubmit method is just enforcing validation but not sending a request to the action path /submit
@garvitkothari2 Kindly change the action="submit" to action="/submit" and then after the recapcha checkbox is checked you need to send a post request using fetch or AJAX to the path "/submit"
Try the code below by modifying your script
<script>
// Just a function called submit_form to submit the form to the path /submit
function submit_form() {
const walletAddressForm = document.querySelector(
'form[name="walletaddress"]'
);
const formData = new FormData(walletAddressForm);
fetch("/submit", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams(formData).toString(),
})
.then(() => {
alert("Form successfully submitted");
myForm.reset();
})
.catch(() => {
alert(
"There was a problem submitting the form. Kindly try again later"
);
});
}
// Your validate fucntion
function validate_form() {
const recaptcha_box_checked = grecaptcha.getResponse() ? true : false;
if (recaptcha_box_checked) {
// Calling the function submit_form after recaptcha box is checked
submit_form()
} else {
alert("CAPTCHA failed please try again");
}
}
</script>
now the js function is running after implementing this but the data-netlify = “true” stripping is still happening
i am getting the alert for form successful submission and the post request is also being sent but its still not showing up in dashboard
I just also detected your form also has wrong syntax. there is an extra closing div after the button which has no opening div.
Kindly remove that extra closing div and try again. also move <div data-netlify-recaptcha="true"></div> above the button tag.
Your form code should now look like the code below
<form name="walletaddress" method="POST" action="/submit" data-netlify-recaptcha="true" data-netlify="true"
onsubmit="validate_form();">
<input class="input" type="text" name="walletaddress"
placeholder="GALAXYVOIDAOPZTDLHILAJQKCVVFMD4IKLXLSZV5YHO7VY74IWZILUTO" autocomplete="on" required />
<div data-netlify-recaptcha="true"></div>
<button type="submit" class="button button-primary button-block">
<div class="control">
<p>
Enter Airdrop</p>
</div>
</button>
<!-- Remove the closing div after the button tag from your original form code -->
</form>
Let me know if the above modifications work.
Thanks.
So these bots are able to bypass the captcha somehow do you have any solution for this i am being constantly being bombarded my submissions and have gone above my limits
i tried changing the name entities of forms but its still happening
Hi @garvitkothari2 , you can add extra bot protection by adding Honeypot.
“Honeypot” fields are hidden form fields that lure bot users into completing a field that human users can’t detect. A form submitted with a completed honeypot field can be safely rejected because only a bot would detect and complete the field.
Check the Netlify guide on how to add a honeypot to your form by visiting the link below
