Add email validation to Elementor forms
In Elementor, add the widget script with Elementor Pro's Custom Code (location Body - End), or with an HTML widget on the page. The snippet then attaches the widget to every email field, including Elementor's form widget.
Before you start
Custom Code is an Elementor Pro feature. Without Pro, the HTML widget on the page works.
Setup
- In WordPress go to Elementor, then Custom Code, and choose Add New. Or, without Pro, drag an HTML widget onto the page.
- Name it SimpleVerifier, paste the snippet below, set the location to Body - End, and publish.
- Reload the page that holds your form.
- 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 Elementor
- Elementor lets you set attributes on a widget's wrapper but not on the email input inside a form field, so the snippet attaches the widget by field type.
- It does not run in the Elementor editor, only on the live page.
- For a server-side mailbox check, the WordPress plugin lists Contact Form 7, WPForms and Gravity Forms rather than the Elementor form.
- 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: WordPress plugin, Zapier.
Common questions
- Do I need Elementor Pro?
- The form widget itself is a Pro feature, and so is Custom Code. If you have a form from another plugin, an HTML widget is enough to hold the snippet.
- Can I use a header and footer plugin instead?
- Yes. Any place that adds a script to the footer of the page works the same way.
- Does it check the mailbox exists?
- No, the widget works in the browser. Use the API from a webhook, Zapier or Make for that.
- 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.