AT Valid Widget — Demo & Integrationen

Echtzeit-E-Mail-Validierung für jedes Formular. Unten ausprobieren, dann das Snippet für Ihre Plattform kopieren.

↓ Zu den Integrationsbeispielen

Vor der Nutzung der Demo ist eine Sicherheitsprüfung erforderlich

Detaillierte Validierung

Vollständiges Ergebnis mit Score, Note und Kennzeichen

E-Mail

Score

Note

Wegwerf-Adresse

Kostenloser Anbieter

Auto-Validierung (Widget-Modus)

widget.js mit Zulassungsregeln, HTML5-Validierung, preventSubmit

// Widget events will appear here...

Programmatische API

ATValid.validate(email, callback) — validieren ohne DOM-Bindung

// Programmatic result will appear here...

Integrationsbeispiele

Ein Script-Tag, ein ATValid.init(). Ersetzen Sie pk_live_… durch den öffentlichen Schlüssel aus app.atvalid.com/apis (auf Ihre Domains beschränken).

Reines HTML — Schnellstart

Jede Website: vor </body> einfügen. Jedes input[type="email"] wird beim Verlassen des Feldes geprüft.

<!-- Add before </body> -->
<script src="https://www.atvalid.com/widget/v2/widget.js"></script>
<script>
  ATValid.init({
    publicKey: 'pk_live_your_public_key_here',
    preventSubmit: true            // block the submit while the email is invalid
  });
</script>

Das Widget nutzt einen MutationObserver, daher werden später eingefügte Formulare (AJAX, SPAs, Page-Builder) automatisch erkannt. An die Adresse wird nichts gesendet — die Prüfung erfolgt serverseitig.

Alle Optionen, Zulassungsregeln und Meldungen

Standardwerte angezeigt. messages.sub (v2.1) liefert einen konkreten Grund statt eines allgemeinen „ungültig“.

ATValid.init({
  publicKey: 'pk_live_your_public_key_here',
  selector: 'input[type="email"]',   // which inputs to bind
  validateOn: 'blur',                // 'blur' | 'input'
  verifyAfterDelay: 1000,            // ms after typing stops (validateOn: 'input')
  timeout: 10,                       // seconds
  showFeedback: true,                // message under the input
  preventSubmit: false,              // block submit when blocked/invalid
  formValidation: false,             // HTML5 setCustomValidity()
  blockOnRateLimit: false,
  statusAppendTo: null,              // CSS selector or element for the feedback
  ignoredForms: [],                  // form names/ids to skip
  ignoredInputs: [],                 // input names/ids to skip

  allow: {
    states: ['deliverable', 'risky', 'unknown'],  // 'undeliverable' is never accepted by default
    free: true,                      // Gmail, Outlook, Yahoo…
    role: true,                      // info@, sales@, admin@…
    disposable: false                // temp-mail domains
  },

  messages: {
    checking: 'Verifying email...',
    valid: 'Valid email address',
    invalid: 'This email appears to be invalid',
    disposable: 'Disposable email addresses are not allowed',
    role: 'Role-based email addresses are not allowed',
    free: 'Free email addresses are not allowed',
    suggestion: 'Did you mean {suggestion}?',
    networkError: 'Could not verify email. Please check your connection.',
    rateLimited: 'Too many requests. Please wait a moment.',
    noCredits: 'Validation service temporarily unavailable',
    error: 'Could not verify email at this time',
    // v2.1 — specific reasons (partial overrides are fine)
    sub: {
      not_found: 'This mailbox does not exist',
      mailbox_full: 'This mailbox is full and cannot receive email',
      null_mx: 'This domain does not accept email',
      no_mx: 'This domain has no mail server',
      blacklist: 'This email domain is blacklisted',
      parked: 'This domain is parked and does not receive email',
      no_reply: 'No-reply addresses cannot be used',
      greylist: 'The mail server asked us to try again later',
      toxic: 'This email address cannot be accepted',
      catch_all: 'We could not confirm this mailbox exists',
      smtp_unknown: 'The mail server did not respond',
      suspicious: 'This email address looks suspicious'
    }
  },

  onValidate: function (email, result) { console.log(email, result); },
  onError: function (email, error) { console.error(email, error.code, error.message); }
});

WordPress — Contact Form 7, WPForms, Gravity Forms, Elementor, Formidable, Ninja Forms

In footer.php vor </body> einfügen oder per Plugin „Insert Headers and Footers“ / „WPCode“ (Site-weiter Footer).

<script src="https://www.atvalid.com/widget/v2/widget.js"></script>
<script>
  ATValid.init({
    publicKey: 'pk_live_your_public_key_here',
    selector: [
      '.wpcf7-email',                          // Contact Form 7
      '.wpforms-field-email input',            // WPForms
      '.gfield input[type="email"]',           // Gravity Forms
      '.elementor-field-type-email input',     // Elementor Forms
      '.frm_form_field input[type="email"]',   // Formidable
      '.nf-form-cont input[type="email"]',     // Ninja Forms
      'input[type="email"]'                    // anything else
    ].join(', '),
    validateOn: 'blur',
    preventSubmit: true,
    allow: { disposable: false, role: false }
  });
</script>

Contact Form 7 rendert nach einem AJAX-Submit neu — das Widget bindet sich automatisch erneut. Wenn ein Plugin JS cacht/minifiziert, widget.js vom Zusammenfassen ausschließen.

RD Station — Landingpages & Pop-ups

Landingpage → Einstellungen → „Benutzerdefinierter Code (HTML/JS)“ → vor </body>. RD-Formulare laden dynamisch; das Widget wartet darauf.

<script src="https://www.atvalid.com/widget/v2/widget.js"></script>
<script>
  ATValid.init({
    publicKey: 'pk_live_your_public_key_here',
    selector: 'input[type="email"], input[name="email"]',
    preventSubmit: true,
    formValidation: true,     // RD's own validation shows our message
    allow: { disposable: false }
  });
</script>

Für RD-Station-Formulare, die in Ihre eigene Website eingebettet sind (Script-Embed), fügen Sie dasselbe Snippet auf der Seite mit dem Embed ein.

HubSpot — Formulare, Landingpages, Pop-ups

Einstellungen → Website → Seiten → Erweitert → „Site-Footer-HTML“ (oder pro Seite). HubSpot-Formulare werden dynamisch gerendert — automatische Erkennung.

<script src="https://www.atvalid.com/widget/v2/widget.js"></script>
<script>
  ATValid.init({
    publicKey: 'pk_live_your_public_key_here',
    selector: 'input[type="email"], .hs-input[name="email"]',
    preventSubmit: true,
    allow: { disposable: false }
  });

  // Optional: re-scan when HubSpot signals a form is ready
  window.addEventListener('message', function (e) {
    if (e.data && e.data.type === 'hsFormCallback' && e.data.eventName === 'onFormReady') {
      ATValid.refresh();
    }
  });
</script>

Mailchimp — eingebettetes Anmeldeformular

Nach dem Mailchimp-Embed-Code auf Ihrer Website einfügen (von Mailchimp gehostete Landingpages erlauben kein eigenes JS).

<!-- your Mailchimp embed form is above -->
<script src="https://www.atvalid.com/widget/v2/widget.js"></script>
<script>
  ATValid.init({
    publicKey: 'pk_live_your_public_key_here',
    selector: '#mc-embedded-subscribe-form input[type="email"], #mce-EMAIL',
    validateOn: 'input',        // validate while typing (debounced 1s)
    verifyAfterDelay: 1000,
    preventSubmit: true,
    allow: { disposable: false, role: false }
  });
</script>

Google Tag Manager — Custom-HTML-Tag

Tag-Typ „Benutzerdefiniertes HTML“, Trigger „Alle Seiten“ (oder nur Seiten mit Formularen). Funktioniert in jedem CMS ohne Theme-Änderung.

<script>
  (function () {
    var s = document.createElement('script');
    s.src = 'https://www.atvalid.com/widget/v2/widget.js';
    s.async = true;
    s.onload = function () {
      ATValid.init({
        publicKey: 'pk_live_your_public_key_here',
        preventSubmit: true,
        allow: { disposable: false },
        onValidate: function (email, result) {
          // push to the dataLayer for GA4 / conversion rules
          window.dataLayer = window.dataLayer || [];
          window.dataLayer.push({
            event: 'atvalid_email_verified',
            atv_accepted: result.accepted,
            atv_state: result.state,
            atv_sub_status: result.subStatus,
            atv_score: result.score
          });
        }
      });
    };
    document.head.appendChild(s);
  })();
</script>

Das Snippet benötigt kein „document.write unterstützen“. Der onValidate-Callback pusht ein Event in den dataLayer für GA4 / Conversion-Regeln.

Webflow, Wix, Shopify, Squarespace — Site-weiter Custom Code

Webflow: Projekteinstellungen → Custom Code → Footer. Wix: Einstellungen → Custom Code → Body-Ende. Shopify: theme.liquid vor </body>. Squarespace: Einstellungen → Erweitert → Code-Injektion → Footer.

<script src="https://www.atvalid.com/widget/v2/widget.js"></script>
<script>
  ATValid.init({
    publicKey: 'pk_live_your_public_key_here',
    // covers Webflow (.w-input), Wix, Shopify (customer/contact forms) and Squarespace
    selector: 'input[type="email"], input.w-input[type="email"], input[name="customer[email]"], input[name="contact[email]"]',
    preventSubmit: true,
    allow: { disposable: false }
  });
</script>

Der Shopify-Checkout erlaubt kein eigenes JS: Widget in Shop-Formularen (Newsletter, Kontakt, Konto) nutzen und für den Checkout die REST-API serverseitig.

React / Next.js

Einmal laden, an Ihr Input binden, beim Unmount zerstören. In Next.js die Komponente mit 'use client' kennzeichnen.

import { useEffect } from 'react';

export function ContactForm() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://www.atvalid.com/widget/v2/widget.js';
    script.async = true;
    script.onload = () => {
      window.ATValid.init({
        publicKey: 'pk_live_your_public_key_here',
        selector: '#email-input',
        preventSubmit: true,
        formValidation: true,
        allow: { disposable: false },
        onValidate: (email, result) => console.log(email, result.accepted, result.subStatus)
      });
    };
    document.body.appendChild(script);
    return () => {
      window.ATValid && window.ATValid.destroy();
      document.body.removeChild(script);
    };
  }, []);

  return (
    <form>
      <input id="email-input" type="email" placeholder="Email" />
      <button type="submit">Submit</button>
    </form>
  );
}

Nach clientseitiger Navigation mit neuen Formularen ATValid.refresh() aufrufen (oder auf den standardmäßig aktiven MutationObserver vertrauen).

Vue 3 / Nuxt

Gleiche Idee mit onMounted / onBeforeUnmount. In Nuxt innerhalb von <ClientOnly> oder einer Client-Komponente halten.

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';

let script;
onMounted(() => {
  script = document.createElement('script');
  script.src = 'https://www.atvalid.com/widget/v2/widget.js';
  script.async = true;
  script.onload = () => window.ATValid.init({
    publicKey: 'pk_live_your_public_key_here',
    selector: '#email',
    preventSubmit: true,
    allow: { disposable: false }
  });
  document.body.appendChild(script);
});
onBeforeUnmount(() => {
  window.ATValid && window.ATValid.destroy();
  script && script.remove();
});
</script>

<template>
  <form><input id="email" type="email" /><button>Submit</button></form>
</template>

Callbacks, DOM-Events und das Ergebnisobjekt (v2.1)

onValidate verwenden oder atv:verified / atv:error am document abhören.

document.addEventListener('atv:verified', function (e) {
  var r = e.detail.result;
  // r = {
  //   valid: true|false,            // API-level verdict
  //   accepted: true|false,         // passed your allow rules → decides the submit
  //   state: 'deliverable'|'risky'|'unknown'|'undeliverable',
  //   subStatus: 'ok'|'not_found'|'mailbox_full'|'disposable'|'null_mx'|'no_mx'|'typo'|
  //              'blacklist'|'parked'|'no_reply'|'greylist'|'catch_all'|'suspicious'|
  //              'role_based'|'toxic'|'smtp_unknown'|'risky'|'invalid',   (v2.1)
  //   toxicity: 0..5,               // reputation risk (≥3 is never accepted)  (v2.1)
  //   catchAllConfidence: 0..10|null, // evidence the mailbox exists on a catch-all domain (v2.1)
  //   score: 0..100, grade: 'A'..'F',
  //   disposable, free, role: booleans,
  //   suggestion: '[email protected]' | null,   // typo fix (clickable in the feedback)
  //   email: '[email protected]',
  //   raw: { ...full API response }
  // }
  if (!e.detail.accepted) console.log('blocked:', r.subStatus);
});

document.addEventListener('atv:error', function (e) {
  // e.detail.error: NETWORK_ERROR | TIMEOUT | RATE_LIMITED | NO_CREDITS |
  //                 DOMAIN_BLOCKED | AUTH_ERROR | API_ERROR | PARSE_ERROR | NO_KEY
  console.warn(e.detail.email, e.detail.error);
});

Attribut am Input	Werte	Bedeutung
`data-atv-valid`	"true" \| "false"	Von Ihren Regeln akzeptiert (das prüft `preventSubmit`)
`data-atv-state`	deliverable \| risky \| unknown \| undeliverable	Abgeleiteter Zustand
`data-atv-bound`	"1"	Widget ist an dieses Input gebunden

Programmatische API — ohne DOM-Bindung

Bei Bedarf validieren (z. B. vor einem XHR-Submit), neu scannen, Cache leeren, abbauen.

// Validate a single address (publicKey optional if init() already ran)
ATValid.validate('[email protected]', 'pk_live_your_key', function (result) {
  console.log(result.accepted, result.state, result.subStatus, result.score, result.toxicity);
});

ATValid.refresh();     // re-scan the DOM for new email inputs (SPA navigation)
ATValid.clearCache();  // forget the 5-minute in-page cache
ATValid.destroy();     // remove listeners, observer, styles and feedback

Limits für öffentliche Schlüssel: 60 Anfragen/Min pro Schlüssel und 30/Min pro Besucher-IP. Ergebnisse werden 5 Minuten in der Seite gecacht — dieselbe Adresse erneut einzugeben kostet nichts.

Styling

Das Widget injiziert minimales CSS; jede Klasse lässt sich in Ihrem Stylesheet überschreiben.

.atv-input-valid    { border-color: #22c55e !important; box-shadow: 0 0 0 3px rgba(34,197,94,.1) !important; }
.atv-input-invalid  { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.1) !important; }
.atv-input-checking { border-color: #9ca3af !important; }

.atv-feedback   { font-size: .8125rem; margin-top: .25rem; font-family: inherit; }
.atv-valid      { color: #22c55e; }
.atv-invalid    { color: #ef4444; }
.atv-checking   { color: #9ca3af; }
.atv-suggestion { color: #d97706; cursor: pointer; text-decoration: underline; }
.atv-suggestion:hover { color: #b45309; }