Pourquoi les numéros de téléphone invalides plombent votre acquisition

Sur les campagnes paid que nous gérons chez Bricks, une situation revient régulièrement : les leads arrivent, les commerciaux appellent, et une grande partie des numéros ne fonctionne pas. Numéro désactivé, coupe directe, jamais en service.

Ce n'est pas un problème de ciblage. C'est un problème de formulaire.

Sur un compte que nous gérons, l'analyse de 126 leads générés via Meta Ads et Google Ads révélait ce résultat :

• 56% des leads avaient un numéro mort ou désactivé
• 19% n'avaient pas répondu au téléphone ni par mail
• Seulement 6% étaient en opportunité active

Le taux d'injoignabilité était uniforme sur tous les canaux : 67% sur Instagram, 73% sur Facebook, 82% sur Google. Le problème ne venait pas du ciblage publicitaire, il venait du formulaire de contact.

Quand un utilisateur remplit un formulaire Meta ou Google, rien ne l'empêche de saisir un numéro inventé, un numéro de convenance ou simplement un format incorrect. Le formulaire accepte tout, le lead entre dans le CRM, le commercial perd du temps, et le ROAS de la campagne chute.

Dans notre expérience, la mise en place d'une validation de format réduit le taux d'injoignabilité de 30 à 50% selon les marchés.

Pourquoi le champ téléphone HTML ne suffit pas ?

Valider un numéro de téléphone sur une landing page ne se résume pas à choisir le bon type de champ HTML. Le réflexe naturel est de penser que le champ de type tel valide le format du numéro. Ce n'est pas le cas.

Le type tel indique au navigateur mobile d'afficher un clavier numérique. Il ne vérifie ni la longueur, ni le format, ni la cohérence internationale du numéro saisi. Un utilisateur peut saisir 0000000000, 123, ou 4242420674844540 (16 chiffres, manifestement invalide) et le formulaire se soumettra sans aucune erreur.

La même chose s'applique aux builders no-code comme Webflow. Un champ de type "Phone" dans Webflow se comporte exactement comme un input[type="tel"] natif : aucune validation de format.

Pour filtrer les faux numéros, il faut une couche de validation externe.

Qu'est-ce que intl-tel-input et comment fonctionne-t-il ?

intl-tel-input est une librairie JavaScript open source qui ajoute un sélecteur de pays et une validation de format sur n'importe quel champ téléphone.

Concrètement, elle fait trois choses :

• Afficher un sélecteur de pays à gauche du champ, avec l'indicatif automatiquement détecté via la géolocalisation IP de l'utilisateur
• Valider le format du numéro selon les règles propres à chaque pays (longueur, préfixe réseau, structure)
• Retourner le numéro en format E.164 (ex. +33612345678) pour une intégration propre dans votre CRM

La librairie s'appuie sur la base de données libphonenumber de Google, qui couvre les formats de 240 pays. Un numéro français doit faire 10 chiffres après le +33. Un numéro américain doit respecter le format NANP. Un numéro australien doit commencer par 04 ou +614. Si le format ne correspond pas, la soumission est bloquée.

Comment intégrer intl-tel-input sur Webflow ?

L'intégration se fait via le Custom Code de Webflow, dans la section </body> de la page contenant votre formulaire.

Étape 1 : identifier l'ID du champ téléphone dans le DOM

Cette étape est destinée aux profils techniques ou à votre développeur. Si vous passez par une agence, transmettez-lui directement le code ci-dessous.

L'ID visible dans le Webflow Designer peut différer de celui publié dans le DOM. Avant d'écrire le sélecteur, vérifiez l'ID réel en ouvrant la console du navigateur sur la page publiée et en saisissant :

document.querySelectorAll('input[type="tel"]')

Le résultat indique l'ID exact du champ (ex. T-l-phone). Utilisez cet ID dans votre sélecteur.

‍

Étape 2 : coller le code dans le Custom Code Webflow

‍

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@23/build/css/intlTelInput.css">

<style>
  .iti { width: 100%; }
  .iti__selected-country { background: transparent; }
  #phone-error {
    display: none;
    color: #e24b4a;
    font-size: 13px;
    margin-top: 4px;
  }
  .submit-btn-disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
  }
</style>

<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@23/build/js/intlTelInput.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {

  const phoneInput = document.querySelector('input[type="tel"]');
  if (!phoneInput) return;

  const form = phoneInput.closest('form');
  const submitBtn = form.querySelector('input[type="submit"], button[type="submit"], .w-button');

  const errorMsg = document.createElement('div');
  errorMsg.id = 'phone-error';
  errorMsg.textContent = 'Numéro de téléphone invalide';
  phoneInput.parentNode.insertBefore(errorMsg, phoneInput.nextSibling);

  const iti = window.intlTelInput(phoneInput, {
    utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@23/build/js/utils.js",
    initialCountry: "auto",
    geoIpLookup: function(callback) {
      fetch("https://ipapi.co/json")
        .then(res => res.json())
        .then(data => callback(data.country_code))
        .catch(() => callback("fr"));
    },
    preferredCountries: ["fr", "ae", "us", "gb"],
    separateDialCode: true
  });

  submitBtn.classList.add('submit-btn-disabled');
  submitBtn.setAttribute('disabled', true);

  function validate() {
    if (iti.isValidNumber()) {
      errorMsg.style.display = 'none';
      phoneInput.style.borderColor = '';
      phoneInput.value = iti.getNumber();
      submitBtn.classList.remove('submit-btn-disabled');
      submitBtn.removeAttribute('disabled');
    } else {
      submitBtn.classList.add('submit-btn-disabled');
      submitBtn.setAttribute('disabled', true);
      if (phoneInput.value.length > 4) {
        errorMsg.style.display = 'block';
        phoneInput.style.borderColor = '#e24b4a';
      }
    }
  }

  phoneInput.addEventListener('input', validate);
  phoneInput.addEventListener('countrychange', validate);

});
</script>

‍

Points d'attention

preferredCountries : listez en priorité les pays de vos marchés cibles. Dans l'exemple ci-dessus, France, UAE, USA et UK remontent en tête du sélecteur.

Sélecteur du bouton : .w-button est la classe Webflow standard. Si votre bouton a une classe différente, ajustez le sélecteur en conséquence.

Webhooks Zapier : la logique de désactivation du bouton est compatible avec les intégrations Zapier de Webflow. Le formulaire se soumet normalement une fois le numéro validé.

‍

Quelles sont les limites de la validation par format ?

intl-tel-input valide le format du numéro de téléphone sur votre landing page, pas son existence. Un numéro syntaxiquement correct mais attribué à une ligne désactivée passera la validation.

Dans la majorité des comptes que nous analysons chez Bricks, la validation par format suffit à diviser par deux le taux d'injoignabilité sur les premières semaines.

Pour aller plus loin, la seule solution qui garantit l'existence et l'activité du numéro est la vérification OTP (one-time password) : un SMS avec un code à 6 chiffres que l'utilisateur doit saisir avant de soumettre le formulaire. Cette approche peut être implémentée via Twilio Verify, avec un coût d'environ 0,05€ par vérification.

Sur des budgets paid importants avec un objectif de leads B2B qualifiés, l'OTP est le niveau de validation recommandé. La friction additionnelle n'affecte pas les prospects sérieux, et elle élimine mécaniquement les soumissions de mauvaise qualité.

‍

Conclusion

56% de leads injoignables sur une campagne, c'est autant de budget publicitaire qui ne génère aucun retour. Dans la majorité des comptes que nous analysons chez Bricks, ce problème vient du formulaire, pas du ciblage.

intl-tel-input est la première barrière à mettre en place, rapide à intégrer, sans impact sur l'expérience utilisateur pour les prospects légitimes, et compatible avec tous les builders no-code. Pour les campagnes avec des budgets plus conséquents et des objectifs de qualification stricts, l'OTP Twilio est l'étape suivante.

Si vous souhaitez auditer la qualité de vos leads et identifier les points de friction dans votre funnel d'acquisition, prenez rendez-vous directement ici.