How do I add an email typo checker to a React app?

Load https://contactlint.com/widget.js once with your publishable key, add data-contactlint to the email input, and optionally point data-contactlint-hint at an empty element for the hint. Inputs rendered later are covered, and clicking the suggestion updates React state through the normal onChange.

How do I add it to a WordPress form plugin that does not allow custom attributes?

Add the script tag with data-selector="input[type=email]" to the site footer, for example with a wp_footer action in functions.php. The widget then checks every matching email field.

Why does the widget do nothing on my staging site?

A publishable key only answers requests from the origins you listed. Add the staging domain, or http://localhost with its port for local development, to the key. Each key accepts up to 5 origins.

Does the widget work with fields that appear after the page loads?

Yes. It listens for focus changes on the whole page, so fields in modals, multi-step forms and single-page app routes are checked without extra code.

Home / Add the Email Typo Checker to React, WordPress and Site Builders

Add the Email Typo Checker to React, WordPress and Site Builders

Published 2026-10-17

The ContactLint widget shows Did you mean jane@gmail.com? under an email field when the domain looks like a typo, and a short note when the domain cannot receive mail or is disposable. This page shows how to add it where you cannot hand-edit plain HTML: React apps, WordPress form plugins and site builders. For the basics, start with the widget setup guide.

Before you start: a publishable key for every domain you use

Create a publishable key with your secret key (free at /signup) and list every origin the form runs on: your live domain, a staging domain if you have one, and http://localhost:PORT for local development. A key accepts up to 5 origins.

curl -X POST https://contactlint.com/v1/widget/keys \
  -H "Authorization: Bearer YOUR_SECRET_KEY" \
  -H "content-type: application/json" \
  -d '{"origins":["https://yoursite.com","http://localhost:5173"],"daily_cap":200}'

How the script finds email fields

By default it checks any input with the data-contactlint attribute.
If you cannot add attributes (most form builders), put data-selector on the script tag instead, for example data-selector="input[type=email]", and it checks every matching input.
It listens on the whole page, so fields that appear later (a modal, a second form step, a route change in a single-page app) are covered without any extra code.
The hint goes in a new line right after the input. To put it somewhere else, add data-contactlint-hint="some-id" to the input and the hint is written into the element with that id.

React

Load the script once, in index.html or your root layout:

<script src="https://contactlint.com/widget.js" data-key="cl_pub_..." defer></script>

Mark the input and give the hint its own element, so the widget never adds nodes inside markup React manages:

function EmailField({ value, onChange }) {
  return (
    <>
      <input type="email" value={value} onChange={e => onChange(e.target.value)}
             data-contactlint data-contactlint-hint="email-hint" />
      <p id="email-hint"></p>
    </>
  );
}

Controlled inputs work: when someone clicks the suggestion, the widget sets the value the way React expects and fires an input event, so your onChange runs and your state gets the corrected address. To act on the result, for example to disable the submit button for disposable addresses, listen for the contactlint:result event:

const ref = useRef(null);
const [blocked, setBlocked] = useState(false);
useEffect(() => {
  const el = ref.current;
  const onResult = e => setBlocked(e.detail.verdict === 'invalid' || e.detail.disposable);
  el.addEventListener('contactlint:result', onResult);
  return () => el.removeEventListener('contactlint:result', onResult);
}, []);
// <input ref={ref} ... />

WordPress

Form plugins usually do not let you add a custom attribute to the email field, so use data-selector. Add this to your theme's functions.php or a code snippets plugin:

add_action('wp_footer', function () {
  echo '<script src="https://contactlint.com/widget.js" data-key="cl_pub_..." data-selector="input[type=email]" defer></script>';
});

This checks every email field on the site, including comment and checkout forms. To limit it to one form, use a narrower selector such as #signup-form input[type=email].

Webflow and other site builders

Paste the same script tag, with data-selector="input[type=email]", into your site's footer custom code setting. If the builder gives your site a staging domain, add that domain to the publishable key's origins too, or the widget stays silent there.

Limits and costs

Each check uses one check from your account: 100 free checks per month, then credit packs from $9 for 5,000 (see pricing). A field is only checked when it loses focus with a new value. Publishable keys are limited to 10 checks per minute per visitor network, 30 per minute per key, and a daily cap you choose. The widget never blocks a form by itself, and it does not confirm that a mailbox exists. For a check that cannot be skipped, also validate on the server.

Get a free API key. 100 checks per month, no card required.