Prevent spam in form submissions

Updated

Use Webflow settings to keep your form submissions free of spam.

If you’ve published your site to the webflow.io staging subdomain or to a custom domain using a Site plan, you can enable email notifications for form submissions received on your site. And, if you fully own a website (that is, it’s not a client’s site), then you can also access this data under Forms in your Site settings and in the Editor.

There are four main methods of preventing spam in form submissions: CAPTCHA systems, bot blocking, spam filtering, and the honeypot technique.

CAPTCHA systems

CAPTCHA (“Completely Automated Public Turing test to tell Computers and Humans Apart”) systems are authentication tests designed to differentiate bots from human site visitors. Webflow supports CAPTCHA systems via the reCAPTCHA field, which asks site visitors to identify themselves as human before submitting a form.

While CAPTCHA systems are effective at preventing automated spam, they can negatively impact user experience, and can also be circumvented by more advanced bots.

Bot blocking

Webflow supports bot blocking through a native site-level setting:

  1. Go to Site settings > Forms > Spam Protection
  2. Turn on bot blocking
  3. Publish your site

Webflow’s bot blocking setting uses AI to analyze mouse movements, inputs, and other signals on your site to separate bots from valid site users and block form submissions from bots. When this setting is enabled, bot blocking applies to all forms on your site. You can use this alongside other spam prevention methods like reCAPTCHA and spam filtering.

How to style submit buttons when bot blocking is enabled

When bot blocking is enabled on your site, submit buttons are disabled while bot protection loads. You can use the Disabled state in the Style panel to control how submit buttons appear while bot protection is loading.

You can also use CSS via custom code to target the initial loading state of a form and style the button before submission, like so:

<style>
input[type="submit"].w-form-loading {
  // Replace with your CSS styles
}
</style>

For additional control, such as to set the button text to a “Loading…” indicator, you can also use JS via custom code:

<script>
$(document).ready(function () {
  // Replace with the class of the specific button you want to customize
  const $btn = $('.my-submit-button');
  if ($btn.length === 0) return;

  // Store the original text of the button and update it to 'Loading...'
  const originalText = $btn.val();
  $btn.val('Loading...');

  // Observe the button for changes in its class attribute
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (
        mutation.type === 'attributes' &&
        mutation.attributeName === 'class'
      ) {
        const isLoading = $btn.hasClass('w-form-loading');

        if (!isLoading) {
          $btn.val(originalText);
        }
      }
    });
  });

  // Start observing the button
  observer.observe($btn[0], {
    attributes: true,
    attributeFilter: ['class'],
  });
});
</script>

Spam filtering

Webflow supports spam filtering through a native site-level setting: 

  1. Go to Site settings > Forms > Spam Protection
  2. Turn on spam filtering

Spam filtering checks all form data sent on your site to determine and filter out spam submissions. When this setting is enabled, spam filtering applies to all forms on your site.

Honeypot technique 

The honeypot technique is a spam-defense technique that uses a hidden form field to detect spam. When a bot fills out the hidden field, the form submission is recognized as spam and discarded.

To use the honeypot technique on your Webflow site, you can include a hidden form field in your form and use custom code to block form submissions. Learn more about using the honeypot technique in Webflow.

Related articles