Add email validation to Framer forms

Setup

1. Open your project, then Site settings and the General tab. Scroll to Custom code.
2. Paste the snippet below into the End of body tag box and save.
3. Publish the site.
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 Framer

• It does not run in the Framer canvas or preview, only on the published site.
• It attaches to every email field on every page, including a newsletter box in the footer. To limit it, change the selector in the snippet to your form's own field.
• An Embed component can also hold the snippet, but it is placed inside an iframe on some layouts and then cannot see fields outside it. Site settings is the reliable place.
• 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: Zapier, Make.

Common questions

Can I use an Embed component instead of Site settings?

Only if the email field is inside the same embed. Custom code in Site settings runs on the page itself, which is why we use it.

Does it work on the free Framer plan?

Custom code needs a paid site plan. On the free plan, use a webhook or Zapier or Make to check addresses after the form is sent.

Will it also check Framer's newsletter or contact form fields?

It checks any input of type email that is on the published page, which includes Framer's form fields.

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.