Best Webflow Phone Validation API & Email Verification Integration 2025

<!-- 1lookup Webflow Integration Script -->
<script src="https://cdn.1lookup.io/webflow/v1/1lookup.min.js"></script>
<script>
  // Initialize 1lookup with your API key
  window.onelookup = window.onelookup || {};
  window.onelookup.config = {
    apiKey: 'YOUR_API_KEY',
    theme: 'auto', // 'light', 'dark', or 'auto'
    position: 'inline', // 'inline' or 'tooltip'
    validateOnBlur: true,
    validateOnSubmit: true
  };
</script>

<!-- In Webflow Designer: -->
<!-- 1. Select your email input field -->
<!-- 2. Add class: "lookup-email" in the Settings panel -->
<!-- 3. Select your phone input field -->
<!-- 4. Add class: "lookup-phone" in the Settings panel -->

<!-- The HTML output will look like this: -->
<form class="contact-form">
  <input type="email" 
         class="email-field lookup-email" 
         name="email" 
         placeholder="Enter your email" 
         required>
         
  <input type="tel" 
         class="phone-field lookup-phone" 
         name="phone" 
         placeholder="Enter your phone" 
         required>
         
  <input type="submit" value="Submit" class="submit-button">
</form>

/* Validation feedback styling */
.lookup-valid {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

.lookup-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.lookup-validating {
  border-color: #3b82f6 !important;
  position: relative;
}

/* Validation message styling */
.lookup-message {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.lookup-message.success {
  color: #10b981;
}

.lookup-message.error {
  color: #ef4444;
}

/* Loading spinner */
.lookup-validating::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid #3b82f6;
  border-radius: 50%;
  border-top-color: transparent;
  animation: lookup-spin 1s linear infinite;
}

@keyframes lookup-spin {
  to { transform: translateY(-50%) rotate(360deg); }
}