How to Reduce Spam on Webflow Forms with Usebasin

At Paddle Creative, we understand the frustrations that can come with using Webflow's built-in form submission system. Issues like spam, missing notifications, and problematic form submissions can significantly impact your workflow and client satisfaction. In this guide, we’ll show you how to bypass these common problems by integrating UseBasin, a reliable alternative for managing form submissions.

Common Issues with Webflow Forms

If you’ve worked with Webflow long enough, you’ve likely encountered some of these issues:

• Spam Submissions: Webflow's outdated ReCaptcha V2 often fails to block modern spam bots.
• Accidental Unsubscribes: Clients can inadvertently unsubscribe from their own form submissions.
• Intermittent Form Failures: Submissions can inexplicably stop working.
• Missing Notifications: Default notifications for actions like orders often go missing.
• Limited Features: Webflow forces you to upgrade to a Business plan for essential features like file uploads, even with low volume.
• Unhelpful Support: Webflow support can be less than helpful, often attributing issues to user error or offering no solution at all.

The Solution: UseBasin

Instead of struggling with Webflow’s form issues, we recommend using UseBasin. This service offers improved deliverability scores, better spam protection, and supports file uploads with minor modifications. Here’s how to set it up.

Why UseBasin?

• Better Deliverability: UseBasin has a deliverability score of 7.6/10, significantly higher than Webflow's native forms.
• Enhanced Spam Protection: Integrates with modern spam filters like hCaptcha and BotPoison.
• File Uploads: Supports file uploads without needing to upgrade to Webflow's Business plan.
• Reliable Notifications: Ensures you receive form submission notifications consistently.

Step-by-Step Guide to Setting Up UseBasin with Webflow

Step 1: Create a UseBasin Account

1. Sign Up: Go to UseBasin and create an account.
2. Create a New Form: Once logged in, create a new form in UseBasin. Name it appropriately for easy identification.

Step 2: Integrate UseBasin with Webflow

1. Copy the Form URL: In UseBasin, you will get a unique URL for your form. Copy this URL.
2. Add URL to Webflow Form:some text
   • In Webflow, select your form.
   • Go to the Form Settings and paste the UseBasin form URL into the "Action" field.

Step 3: Add Custom JavaScript for Form Submission

To handle form submissions correctly, add the following JavaScript to your Webflow project:

‍

<!-- Project Settings > Custom Code > Footer Code -->

<script type="text/javascript">

 $('form[action^="https://usebasin.com"]').each(function (i, el) {

 var form = $(el);

 form.submit(function (e) {

 e.preventDefault();

 var action = form.attr("action");

 $.ajax({

 url: action,

 method: "POST",

 data: form.serialize(),

 dataType: "json",

 success: function () {

 $(form).hide();

 $(".w-form-done").show();

 },

 error: function () {

 $(".w-form-fail").show();

 }

 });

 });

 });

</script>

‍

Paste this script into the footer code section of your project settings.

Step 4: Set Up Spam Protection

UseBasin supports modern spam protection tools. Here’s how to set up hCaptcha:

1. Create an hCaptcha Account: Go to hCaptcha and create an account.
2. Add a Site in hCaptcha: Add your Webflow site and get the Site Key.
3. Add hCaptcha to Webflow Form:some text
   • Copy the following script and paste it into the head section of your Webflow pages with forms:
   • html
   • Copy code

<script src="https://js.hcaptcha.com/1/api.js" async defer></script>

• Add the hCaptcha widget right before the submit button in your Webflow form:
• html
• Copy code

<div class="h-captcha" data-sitekey="your_site_key"></div>

4. Configure UseBasin: In your UseBasin form settings, select hCaptcha for spam protection and paste the Secret Key from your hCaptcha account.

Step 5: Enable File Uploads

To enable file uploads with UseBasin:

1. Modify Form Settings: Follow the documentation provided by UseBasin for enabling file uploads. This typically involves minor tweaks to the form settings.
2. Add File Input: Add a file input field to your Webflow form.

Conclusion

Switching to UseBasin from Webflow’s native form submission system can save you from a multitude of headaches, ensuring reliable form submissions, improved spam protection, and consistent notifications. At Paddle Creative, we highly recommend UseBasin for its superior performance and ease of integration.

For more tips and tutorials, visit our blog or contact us at Paddle Creative. Let’s make your website stand out with unique and creative design elements!

‍