Add email validation to Bubble forms

Setup

1. Open your app's editor, then Settings, then the SEO / metatags tab.
2. Paste the snippet below into the Script in the body box.
3. Deploy the app, or run it in a preview of the live version.
4. Open the published page (not the editor preview) and type jane@gmial.com into the field. You should see a suggestion to use gmail.com under it. Try x@mailinator.com to see the disposable-address error.

<script src="https://simpleverifier.com/widget.js" defer></script>
<script>
  // Turns the widget on for every email field on the page, including fields the builder adds later.
  function svAttachAll() {
    if (!window.SimpleVerifier) return;
    document.querySelectorAll('input[type="email"]').forEach(function (input) {
      SimpleVerifier.attach(input);
    });
  }
  document.addEventListener("DOMContentLoaded", function () {
    svAttachAll();
    new MutationObserver(svAttachAll).observe(document.body, { childList: true, subtree: true });
  });
</script>

Limits on Bubble

• Bubble inputs are drawn by Bubble's own script, so a hint placed by the widget can look different from your design. Style it with the .sv-hint classes in your page CSS.
• The widget only gives a hint and sets the browser's validity state. Bubble workflows run by their own script, so it will not stop a Sign up workflow. Check the email in the workflow itself as well.
• Blocking a submit relies on the browser's own form validation. If a builder sends the form with its own script instead, the hint under the field still appears but the form may go through, so test on the published page.

Check that the mailbox exists

The widget checks format, typos, throwaway domains and role addresses in the browser. It cannot tell whether a mailbox exists, because that needs an API key and anything in a web page can be read by visitors. For that, call the API from the server that receives the form. See the API docs, the full form widget page with Node, PHP and Python examples, and pricing.

Related: API docs.

Common questions

How do I check the mailbox from inside Bubble?

Use Bubble's API Connector to call the SimpleVerifier verify endpoint, keep your key in a private header, and only continue the workflow when the status is not invalid. Never put the key in a page element.

Does the widget stop the Sign up workflow?

No. It marks the field and shows a message. To really block a sign-up, add a condition on the workflow that uses the API result.

Can I use it on the free Bubble plan?

The settings box for scripts depends on your plan, so check your Bubble plan. The API Connector approach works wherever you can call an external API.

Is the form widget free?

Yes. The widget runs in the visitor's browser, needs no account or API key and has no usage limit. Checks that confirm the mailbox exists use the SimpleVerifier API from a server, which comes with Pro, Business and Agency, from $39/month.