Add email validation to Carrd forms
In Carrd, add an Embed element of type Code, set it to hidden, and paste the widget into it. It then checks every email field on the page. Carrd forms have no custom attribute, so the snippet attaches the widget to them.
Before you start
Embed elements need a Carrd Pro plan.
Setup
- In the Carrd editor add a new element and choose Embed.
- Set Type to Code and Style to Hidden, and set the code to load at the end of the body if the option is shown.
- Paste the snippet below into the Code field and save.
- Publish the site.
- 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 Carrd
- Embeds are a Pro feature, so the widget cannot be added on the free plan.
- It does not run in the editor preview, only on the published site.
- 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.
Common questions
- Does it work on Carrd's free plan?
- No. Embed elements are part of Carrd Pro. On the free plan, check addresses after the form is sent with a Zapier or Make step.
- Does it work with the built-in Carrd form?
- It checks any email input on the published page, which includes the Carrd form element.
- Does the page need a backend?
- No. The widget runs in the browser. Live mailbox checks need your API key, so they run on a server or in Zapier or Make.
- 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.