Examples
Basic Setup
The simplest possible setup - validate all email inputs with default settings:
<!DOCTYPE html>
<html>
<head>
<title>Email Validation Example</title>
</head>
<body>
<form>
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</form>
<script src="https://verifyforge.com/widget/verifyforge.min.js"></script>
<script>
verifyforge('apiKey', 'your_public_api_key');
</script>
</body>
</html>
Business Email Only
Block free email providers (Gmail, Yahoo, etc.) to collect only business emails:
<script src="https://verifyforge.com/widget/verifyforge.min.js"></script>
<script>
verifyforge('apiKey', 'your_public_api_key');
verifyforge('allow', {
states: ['deliverable', 'risky'],
free: false, // Block free providers
role: false, // Block role accounts
disposable: false // Block disposable emails
});
verifyforge('messages', {
free: 'Please use your company email address.',
role: 'Please use your personal work email.',
disposable: 'Temporary email addresses are not allowed.'
});
</script>
Newsletter Signup
Allow all valid emails including free providers:
<form id="newsletter">
<input type="email" name="email" placeholder="Enter your email" required>
<button type="submit">Subscribe</button>
</form>
<script src="https://verifyforge.com/widget/verifyforge.min.js"></script>
<script>
verifyforge('apiKey', 'your_public_api_key');
verifyforge('allow', {
states: ['deliverable', 'risky'], // Allow most emails
free: true, // Allow Gmail, Yahoo, etc.
role: true, // Allow info@, contact@
disposable: false // Block temp emails
});
</script>
Multiple Forms with Different Rules
Validate different forms with different requirements:
<form id="business-form">
<input type="email" name="work-email" placeholder="Work email">
<button>Submit</button>
</form>
<form id="newsletter-form">
<input type="email" name="personal-email" placeholder="Personal email">
<button>Subscribe</button>
</form>
<script src="https://verifyforge.com/widget/verifyforge.min.js"></script>
<script>
verifyforge('apiKey', 'your_public_api_key');
// Business form - strict rules
document.querySelector('#business-form input[type=email]')
.addEventListener('verified', function(event) {
const data = JSON.parse(event.detail.verificationData.body);
if (data.freeProvider) {
this.setCustomValidity('Please use your business email');
}
});
// Newsletter form - lenient rules
verifyforge('ignoredForms', ['newsletter-form']); // Skip widget validation
</script>
Custom Validation UI
Replace the default UI with your own custom styling:
<style>
.email-field {
position: relative;
}
.email-status {
margin-top: 8px;
padding: 8px 12px;
border-radius: 4px;
font-size: 14px;
}
.email-status.success {
background: #d1fae5;
color: #065f46;
}
.email-status.error {
background: #fee2e2;
color: #991b1b;
}
.email-status.loading {
background: #e0e7ff;
color: #3730a3;
}
</style>
<div class="email-field">
<input type="email" id="email" name="email">
<div id="email-status" class="email-status" style="display: none;"></div>
</div>
<script src="https://verifyforge.com/widget/verifyforge.min.js"></script>
<script>
verifyforge('apiKey', 'your_public_api_key');
const emailInput = document.querySelector('#email');
const statusDiv = document.querySelector('#email-status');
// Show custom loading state
emailInput.addEventListener('input', function() {
if (this.value.includes('@')) {
statusDiv.className = 'email-status loading';
statusDiv.textContent = 'Verifying...';
statusDiv.style.display = 'block';
} else {
statusDiv.style.display = 'none';
}
});
// Show custom validation result
emailInput.addEventListener('verified', function(event) {
if (event.detail.accepted) {
statusDiv.className = 'email-status success';
statusDiv.textContent = 'Email verified!';
} else {
statusDiv.className = 'email-status error';
statusDiv.textContent = event.detail.message;
}
statusDiv.style.display = 'block';
});
emailInput.addEventListener('error', function(event) {
statusDiv.className = 'email-status error';
statusDiv.textContent = 'Could not verify email';
statusDiv.style.display = 'block';
});
</script>
Typo Suggestions
Automatically suggest corrections for common typos:
<div>
<input type="email" id="email" name="email">
<div id="suggestion" style="display: none; margin-top: 8px;">
Did you mean <a href="#" id="suggestion-link"></a>?
</div>
</div>
<script src="https://verifyforge.com/widget/verifyforge.min.js"></script>
<script>
verifyforge('apiKey', 'your_public_api_key');
const emailInput = document.querySelector('#email');
const suggestionDiv = document.querySelector('#suggestion');
const suggestionLink = document.querySelector('#suggestion-link');
emailInput.addEventListener('verified', function(event) {
const data = JSON.parse(event.detail.verificationData.body);
if (data.suggestion) {
// Show clickable suggestion
suggestionLink.textContent = data.suggestion;
suggestionDiv.style.display = 'block';
suggestionLink.onclick = function(e) {
e.preventDefault();
emailInput.value = data.suggestion;
suggestionDiv.style.display = 'none';
// Trigger validation of corrected email
emailInput.dispatchEvent(new Event('input'));
};
} else {
suggestionDiv.style.display = 'none';
}
});
</script>
Prevent Form Submission
Block form submission until email is validated and accepted:
<form id="signup-form">
<input type="email" id="email" name="email" required>
<button type="submit" id="submit-btn">Sign Up</button>
</form>
<script src="https://verifyforge.com/widget/verifyforge.min.js"></script>
<script>
verifyforge('apiKey', 'your_public_api_key');
const form = document.querySelector('#signup-form');
const emailInput = document.querySelector('#email');
const submitBtn = document.querySelector('#submit-btn');
let emailVerified = false;
emailInput.addEventListener('verified', function(event) {
emailVerified = event.detail.accepted;
submitBtn.disabled = !emailVerified;
});
emailInput.addEventListener('input', function() {
// Disable submit while typing
emailVerified = false;
submitBtn.disabled = true;
});
form.addEventListener('submit', function(event) {
if (!emailVerified) {
event.preventDefault();
alert('Please wait for email verification to complete');
}
});
</script>
React Integration
Use the widget in a React application:
import { useEffect, useRef, useState } from 'react';
function EmailInput() {
const inputRef = useRef(null);
const [status, setStatus] = useState({ type: '', message: '' });
useEffect(() => {
const input = inputRef.current;
if (!input) return;
const handleVerified = (event) => {
if (event.detail.accepted) {
setStatus({ type: 'success', message: 'Email verified!' });
} else {
setStatus({ type: 'error', message: event.detail.message });
}
};
const handleError = (event) => {
setStatus({ type: 'error', message: 'Verification failed' });
};
input.addEventListener('verified', handleVerified);
input.addEventListener('error', handleError);
return () => {
input.removeEventListener('verified', handleVerified);
input.removeEventListener('error', handleError);
};
}, []);
return (
<div>
<input
ref={inputRef}
type="email"
name="email"
className="email-input"
/>
{status.message && (
<div className={`status-${status.type}`}>
{status.message}
</div>
)}
</div>
);
}
// In your app initialization
useEffect(() => {
if (window.verifyforge) {
window.verifyforge('apiKey', 'your_public_api_key');
}
}, []);
Vue Integration
Use the widget in a Vue application:
<template>
<div class="email-field">
<input
ref="emailInput"
type="email"
v-model="email"
@verified="handleVerified"
@error="handleError"
/>
<div v-if="status.message" :class="`status-${status.type}`">
{{ status.message }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
email: '',
status: { type: '', message: '' }
};
},
mounted() {
if (window.verifyforge) {
window.verifyforge('apiKey', 'your_public_api_key');
}
},
methods: {
handleVerified(event) {
if (event.detail.accepted) {
this.status = { type: 'success', message: 'Email verified!' };
} else {
this.status = { type: 'error', message: event.detail.message };
}
},
handleError(event) {
this.status = { type: 'error', message: 'Verification failed' };
}
}
};
</script>
Analytics Tracking
Track email validation results in your analytics:
<script src="https://verifyforge.com/widget/verifyforge.min.js"></script>
<script>
verifyforge('apiKey', 'your_public_api_key');
// Track all email validations
document.addEventListener('verified', function(event) {
if (event.target.matches('input[type=email]')) {
const data = JSON.parse(event.detail.verificationData.body);
// Google Analytics
gtag('event', 'email_validated', {
accepted: event.detail.accepted,
state: data.state,
is_disposable: data.disposable,
is_free: data.freeProvider,
is_role: data.roleAccount
});
// Segment
analytics.track('Email Validated', {
accepted: event.detail.accepted,
state: data.state,
disposable: data.disposable,
free: data.freeProvider,
role: data.roleAccount
});
}
});
</script>