Blocking non-work emails from form submissions

Hi,

I’d like to know how I can block form submissions using public emails and only let through submissions that use a work email. I’ve copied some code of this article however I’ve just seen a form submission go through despite using a gmail.com email.

The concerned page is a Collection page that serves as a template for all of our company’s whitepapers. I’ve implemented the code suggested by the article in the page before the /body tag.

If not possible to filter public emails, I’ll probably just switch to an embedded Hubspot form and rely on Hubspot’s blocking list. However, I did enjoy the idea of being able to add and remove domains manually to the blocking list, something that Hubspot unfortunately doesn’t allow.

Can someone please let me know what is wrong, and how I could fix this ?
Read-only link

Thank you for your help,

Regards,

Dorian

:wave: welcome to the forum.

The problem with using Regular Expressions or Javascript for this (the code in that linked thread) is that it’s easily bypassed by anyone and/or error prone as you’ve discovered.

I’d approach it differently but still keep the flexibility you’re looking for.

I’d send my form submission to a free Make.com (Integromat) account if you don’t already have one.

Then, have Make add it to Hubspot for me.

Lot’s of benefits taking this approach versus using a Hubspot form.

Here’s a quick overview:

Once it’s setup and you’re submitting native Webflow forms to Make, you can create a filter to only allow specific email domains to continue.

For example, I set one up to only allow emails from @nocodequest.com and block everything else.

Here’s what that looks like…

In the screenshot below you’ll notice the email submitted from my form meets that condition.

…and the filter that I setup allows the workflow to continue.

Notice the green checkmark and that the workflow continued to the second Make module.

Submitting the form again with an @example.com domain:

…and you can see that the filter blocked it from continuing in my workflow.

Here’s a quick build:

I’ve setup a simple Make Scenario with 2 modules.

In your case you’d have a Hubspot module in between (and maybe some other, fun creative things).

Now you can tap on the “setup a filter” icon.

Add the email submitted in the form as the condition to check, then the email domain you wish to allow.

And then select “Contains (case insensitive)” as the matching condition.

This says…

“Allow any email that has @nocodequest.com in it to continue with the workflow (regardless of upper or lower case entered by the user), otherwise block it and stop the workflow”.

When the filter blocks the workflow, it looks like the screenshot below.

Notice the workflow did not continue to the second module.

When the filter does not stop the workflow, it looks like the screenshot below.

Notice the second module was triggered in the workflow.

If you’d like to add more work emails, add an “OR” rule.

If you added both @nocodequest.com and @awesome-startup.com then this says…

“Any email matching @nocodequest.com OR @awesome-startup.com may continue with the workflow”.

What’s great about Make is its flexibility.

I cover a lot of this on my blog.

Here’s an example of one that’ll help you with this exact setup:

It covers that parts that I did not cover, here.

Also, I’ve exported the Make blueprint for you if you want to try it.

Then just import it into a new Make Scenario.

Easy peasy!

Dig around on the blog and you’ll find a TON more.

Feel free to ask questions here, I’ve got answers :smiley:

Have you tried using the HTML5 input pattern attribute?

In the designer, select your email input field and add this custom attribute;

  • Name: pattern
  • Value: ((?!@(gmail.com|yahoo.com|hotmail.com)).)*

Save and publish to staging on @webflow.io, and give it a try.
You should be able to enter any email, except those ending in @gmail.com, @yahoo.com, or @hotmail.com.

Add more to the list with another pipe and domain, e.g. |outlook.com.

Hi Michael,

Is it possible to edit the error message that comes up. The custom attribute works perfect, thank you.

Yes, sort of, you can add a title custom attribute. Check the bottom here.