@MikeS,
Dealing with spam submissions can be frustrating, especially when your forms are being targeted by bots. While it's true that Unbounce doesn’t have a built-in reCaptcha feature, there are a few workarounds you can consider to reduce or eliminate spam:
-
Honeypot Fields: Add a hidden field to your form that human users won’t fill out, but bots typically will. If the field is filled out, you can filter out that submission as spam.
-
Custom reCaptcha Integration: If you're comfortable with a bit of coding, you can manually integrate Google reCaptcha with your Unbounce form using the Custom HTML element. It requires some work but can effectively block bots.
-
Third-Party Tools: Use third-party tools like Akismet or CleanTalk, which can integrate with your forms and provide an additional layer of spam protection.
-
Form Field Validation: Implementing strong form field validation can sometimes trip up bots, especially if they’re not designed to handle custom validation rules.
-
Email Validation Services: Use services like ZeroBounce or NeverBounce to validate email addresses in real-time, reducing the chance of spammy submissions getting through.
I hope one of these solutions helps! If you need detailed guidance on any of these methods, feel free to ask.
Good luck with your microsite!
Thanks for all of these suggestions.
Would you be able to give me more guidance for option #2 - custom reCaptcha integrations?
@MikeS Sure! Here’s a step-by-step guide to integrating Google reCaptcha with your Unbounce form:
Step 1: Set Up Google reCaptcha
- Go to the reCaptcha website: Google reCaptcha Admin Console.
- Register your site:
- Add your website's domain.
- Choose reCaptcha v2 ("I'm not a robot" Checkbox) or reCaptcha v3 (invisible badge).
- Accept the reCaptcha terms of service and submit the form.
- Copy your site key and secret key: You'll need these for the integration.
Step 2: Add reCaptcha Script to Your Unbounce Page
-
Edit your Unbounce page: Go to the Unbounce page where your form is located.
-
Add the reCaptcha script:
Step 3: Add reCaptcha to Your Form
-
Add an HTML element to your form:
- Drag and drop an "HTML" element from the Unbounce builder onto your form, where you want the reCaptcha box to appear.
-
Insert the reCaptcha widget code:
Step 4: Handle reCaptcha Verification
-
Form Submission Script: You need to verify that the reCaptcha was completed before allowing the form submission. Add another script in the "Javascripts" section, but this time place it "Before Body End."
Here’s a sample script:
-
document.querySelector('#your-form-id').addEventListener('submit', function (e) {
e.preventDefault();
var response = grecaptcha.getResponse();
if (response.length === 0) {
alert("Please complete the reCaptcha");
return false;
} else {
this.submit();
}
});
Replace '#your-form-id'
with the actual ID of your form, which you can find by inspecting the form in your browser’s developer tools.
Step 5: Test Your Integration
- Preview the Page: Publish or preview the Unbounce page.
- Test the Form: Fill out the form, complete the reCaptcha, and submit to ensure everything is working as expected.
Step 6: Server-Side Validation (Optional but Recommended)
For additional security, you can perform server-side validation to ensure the reCaptcha response is valid. This requires sending the reCaptcha response token to your server, where it can be validated with Google’s API.
This should guide you through integrating reCaptcha with your Unbounce forms. If you run into any issues or need further clarification on any of the steps, feel free to ask!
@Md_Mahinur_Khan it’s nice to see people active in the community but please reconsider your approach.
Copy/pasting AI response without actual experience can send people down rabbit holes for hours or even worse do some serious damage to their campaigns.
You don’t have to answer every question in the community if you don’t know the answer or have no experience on a given topic.
You can’t effectively implement Google’s reCAPTCHA on an Unbounce page because you DON’T have access to the back-end. PERIOD.
Your sample script is also most likely going to submit the form anyway. That’s not the right way to prevent an Unbounce form from being submitted.
Hi @Hristian, Thanks so much for correcting me. I’ll definitely reconsider to help make this community better!
I understand that I’m using AI, but I don't just rely on AI for every post. I test solutions myself first, taking time to experiment and work with the code before sharing. I've solved many problems using AI, but I also avoid posts where I don’t feel confident. I only participate in those I’m comfortable with and then use AI to validate my approach. This helps me save time while still contributing to the community.
Now, I’m going to reply to your message about Google’s reCAPTCHA:
You can’t effectively implement Google’s reCAPTCHA on an Unbounce page because you DON’T have access to the back-end. PERIOD.
To implement reCAPTCHA v3, we would need back-end/server scripts, which we can’t control with Unbounce, and I agree with that. However, the invisible reCAPTCHA available in v2 (as well as in v3) is very possible and super easy to implement. Also, reCAPTCHA v2 with the "I'm not a robot" checkbox has already been implemented on the Unbounce page I shared in the post above that you disagreed with: https://ub.grooic.com/google-recaptcha/
Your sample script is also most likely going to submit the form anyway. That’s not the right way to prevent an Unbounce form from being submitted.
You can check this video for above quote:
Let me know if you have any questions or concerns. Thank you!