Spam protection for Bubble.io

Bubble.io and OOPSpam


I love no-code platforms. Bubble.io is perhaps one of the first and leading no-code solutions out there. It’s amazing how fast people can build with these platforms. Our first no-code app was Integromat app which made it easy to add a spam filter to Integromat automated workflows.

Today, I’m excited to announce our official Bubble.io plugin. I say “official” because someone already developed an unofficial OOPSpam plugin for Bubble with our API, however, it’s not functional as it is not up to date. So we decided to take matters into our hands.

The plugin can be used to prevent spam in contact forms, review systems, or anywhere where spam messages may come. In this article, we will demonstrate it with a contact form.

1. Setting up a contact form

First, we need a contact form with different fields so we could connect our “Check for spam” action. This action will run when a visitor submits a contact form message. I’ll start with a pre-made template Bubble provides, called Startly - Startup Landing Page. It comes already built-in contact form.

Visit your dashboard on Bubble and create a new app. The pop-up would let you quickly get started with a pre-made template or you could start from a blank template.

Contact Form on Bubble.io app

CONTACT US button is where all the magic happens. At the end of the article when a visitor clicks the button it should:

  1. Collect all the information from the contact form fields
  2. Show “Thank you” message
  3. Check if the submission is spam
    1. If spam, Terminate the flow
    2. If not, Send an email ✉️
  4. Done 🎉

2. Installing OOPSpam & ipiphy Bubble plugins

One of the five fields OOPSpam API allows you to pass is senderIP. While it is not necessary to send a visitor’s IP, it helps with spam detection. For that, we need to install the ipiphy plugin by Bubble. It is a simple plugin that would allow us to get a visitor’s IP.

The second plugin we need to install is our beloved OOPSpam Spam Detection plugin for Bubble.

Visit the Plugins tab in the template editing mode and click Add plugins. Search and install both OOPSpam and ipiphy.

Installing OOPSpam Spam filter to Bubble app

ipiphy plugin doesn’t need any configuration. For the OOPSpam plugin we need get an API key. For that create a new account on the OOPSpam dashboard. Once registered and verified our email, we need to click the Copy to copy the API key.

OOPSpam Dashboard

Go back to Bubble and navigate to Plugins->OOPSpam Spam Detection and paste the API key we just copied.

We are done with a plugin setup. Time to move on adding spam filtering functionality to our contact form

3. Configuring spam filter

Here is the flow we’d like to achieve:

Contact Form Bubble flow

Visit Workflow tab then select When Button CONTACT US is clicked. Let’s add our first step action by clicking Click here to add an action and selecting Check for Spam action from the Plugins category.

OOPSpam Bubble action

Now we have to pass all the necessary data to the plugin. Once you add the action a popup appears and allows us to input information. As of now, OOPSpam takes five inputs.

{
   "senderIP": <>,
   "content": <>,
   "checkForLength": <>,
   "allowedLanguages" : <>,
   "allowedCountries" : <>
}

On Bubble, <> stands for dynamic data. It means we can manually enter data or insert the output from a different plugin.

If you don’t need allowedLanguages or allowedCountries just enter empty array [""].

After setting up all these fields, you should have something like this:

OOPSpam Bubble setup

At this point, our plugin is ready to handle upcoming spam. Now we need to show the “Thanks for the submission” message and set up termination flow logic (when not to send an email).

4. Terminate this workflow: it’s spam, don’t send email

Let’s add a thank you message. For step 2, add a new Show an element action and choose the Popup Thank you for your message element. This element comes with the template. You could show any different success message here.

A spammer/bot will see this conformation and move on to another websites to spam. But we still have work to do. With each contact form submission, an email will be sent to a site owner. To stop overflowing your inbox with a spam message, we need to terminate submission before it sends an email.

OOPSpam provides a Spam Score (Score) for every submission. We recommend terminating flow based on Score field. This is a number between 0-6. Usually, a score of 3 or above is considered spam.

For that, we add a new Terminate this workflow action then Result of step 1 (OOPSpam - Check for spam)). Here grab the value of Score field and let action know that if Score is 3 or greater then terminate this flow.

Terminate this flow

For our last step, add a new Send email action and fill out all the information you need from the contact form. This action will run if the submission isn’t spam.

Send email action

That is it! We are all set. Now we have a functioning contact form with a spam filter on a Bubble website.

Have a spam-free day!

Get an API key and test with free API calls→ Get OOPSpam Anti-Spam WordPress Plugin→