How to Restrict Free Email Domains on Form Fill Out in 2021

[Chris_Goelkel]

Is there a new way to do this since this old Blog Article in 2014. This doesn't seem to work for me. 

If you reference this old post (https://developers.marketo.com/blog/restrict-free-email-domains-on-form-fill-out/) it says you can block whatever domain you want on the front side of the form. But I believe some calls have changed, and the script is not working.  Has anyone else run across this issue?

This seems like a out of date method, is there a better way?

[SanfordWhiteman · Accepted solution]

Use the new FormsPlus::EmailPattern JS.

You can see a demo here:

MktoForms2 :: FormsPlus-EmailPattern [simple demo]

Download the JS library from the CodePen HTML pane (direct download link here) and re-host it in your Design Studio.

Then add the code from the CodePen JS pane anywhere after your form embed. Add blockable domains to the invalidDomains array. It accepts 3 different formats:

mailbox@example.com  - matches one specific email address

example.com - matches all mailboxes @ that domain

mailbox@ - blocks that mailbox @ any domain

(actually it does even more cool stuff but I haven't had time to document it yet!)

[SanfordWhiteman · Accepted solution]

Use the new FormsPlus::EmailPattern JS.

You can see a demo here:

MktoForms2 :: FormsPlus-EmailPattern [simple demo]

Download the JS library from the CodePen HTML pane (direct download link here) and re-host it in your Design Studio.

Then add the code from the CodePen JS pane anywhere after your form embed. Add blockable domains to the invalidDomains array. It accepts 3 different formats:

mailbox@example.com  - matches one specific email address

example.com - matches all mailboxes @ that domain

mailbox@ - blocks that mailbox @ any domain

(actually it does even more cool stuff but I haven't had time to document it yet!)

[plane]

Thanks for this clever script @SanfordWhiteman! I'm trying to implement it alongside your validation of a string field for websites (from this post) but it looks like the form can be submitted if one of the two (email or website) is correct. Is there a way I can roll these two together into one custom validator script? 

Thanks for all your help!!

[SanfordWhiteman]

I edited both samples so they will persist the submittable state properly (i.e. if one sets it to false, the other will persist that value and stop the form from submitting). Should probably work this little method into a blog post.

[plane]

One other question now that you've updated these @SanfordWhiteman - do I need to re-pull teknkl-formsplus-emailpattern-1.0.3.js from your direct download link, or just copy the updated JS from the codepen/forum post?

[SanfordWhiteman]

The external JS didn't change. Just the way the onValidate listener works.

[VDimitrov]

@SanfordWhiteman I'm having the same issue as Plane: form validation works when an incorrect email is entered, but after changing it to a valid email, the form does not submit. Refreshing the page and entering a valid email does work. Any insight on how to fix that and make it submit when changing an incorrect email to a correct one?

[BobLodi]

Same issue here. If I enter a "wrong" email, it shows the alert, but if I change the email to a "good" one, it doesn't submit. If I reload the form and fill it out again, it will submit, FWIW.

[SanfordWhiteman]

This is expected, since the test form is connected to a real Marketo instance!

When the form would successfully submit, I instead stop the submission from going on the wire.

[plane]

Sorry @SanfordWhiteman, I think I'm confused. I was testing this on my live forms (and live marketo instance). If I enter a "blocked" email, and hit submit, I get the invalid email error as expected, but if I then change the email to a valid one (note, I haven't refreshed the page) and then click submit again, nothing happens. The form does not submit, no error message, just a broken button. 

I would assume that the desired expected results would be "blocked email + submit = check email -> throw error," then when you correct the email, the results would be "allowed email + submit = check email -> submit form"

Could you please explain a little more if I'm missing something? Thanks again for all of your help on this!!

[SanfordWhiteman]

That’s not the normal behavior in production, though it is deliberately that way in the CodePen. Please link to your page.

[plane]

Ah, I see. Here's one of the forms we're currently using it on: https://terakeet.com/seo-blog/content-strategy-playbook-download/ 

To test try using the email "test@gmai.com" we block the domain "gmai" as a misspelling of gmail. enter that email then click the submit button, you should get an error asking for a valid business email. If you change the email to test@gmail.com and then click submit, it should work but doesn't. 

Thanks for taking a look @SanfordWhiteman !

[Brian_Horace]

Was there ever a resolution to this one? I am having the same issue where once I correct the email it still wont submit unless I refresh the page. @SanfordWhiteman 

[SanfordWhiteman]

Well, if properly deployed as in the demo page there's no such issue. So you'd have to link to the URL where isn't working for you.

[Brian_Horace]

thanks @SanfordWhiteman for your reply, here is my staging site.

https://rambunctious-bettong-staging.cl-us-east-1.servd.dev/demo

username: fiscalnote

password: buildingblocks

[SanfordWhiteman]

In your case, because you don't have a validator stack, use

 mktoForm.submittable(true);

instead of

 mktoForm.submittable(originalSubmittable);

[Brian_Horace]

Could I possibly ask one more related question @SanfordWhiteman ? A few years ago we hired an agency to build us an area for gated assets. I can get the script to tell me that the email "should be a business email" but it still delivers the asset and I'm not sure why.

https://rambunctious-bettong-staging.cl-us-east-1.servd.dev/whitepapers/spot-policy-trends-influence...

username: fiscalnote
password: buildingblocks

[SanfordWhiteman · Accepted solution]

Because they failed to account for onValidate chain in their code, setting submittable(true) no matter what else was running.

[Brian_Horace]

Thank you for this, it was uber helpful and we were able to get it to work.

[plane]

@SanfordWhiteman, I'm having a little trouble with this now that I'm doing some additional testing. It looks like the validation works (I get the error/alert if I use an email on my disallow list) but when I correct the email to an allowed one AFTER having tried a disallowed one, the form won't submit. Any thoughts as to what might be causing this?

[plane]

Awesome, thank you @SanfordWhiteman!! You should definitely work this into a blog post, it'd be helpful to see the build out explained!! I'd also love to see what other cool stuff the email validator script does.