Traduire des formulaires Webflow : libellés, erreurs et e-mails

Tu as le site Webflow en quatre langues et le formulaire de contact est encore à moitié en espagnol. Les libellés ont été traduits, pas le placeholder. Le bouton affiche « Envoyer ». Et quand quelqu'un le remplit depuis Berlin, il voit apparaître un « Thank you! Your submission has been received! » que personne n'a écrit.

Un formulaire Webflow n'est pas un bloc de texte : ce sont six couches distinctes, et chacune se traduit d'une manière différente. Les libellés et le bouton sont du texte normal. Les placeholders sont des attributs HTML. Les messages de succès et d'erreur vivent dans des divs masqués qui n'apparaissent qu'à l'envoi. La validation de champ obligatoire est affichée par le navigateur. Et l'email de confirmation est envoyé par Webflow depuis ses réglages, en dehors de la page. Lantis traduis automatiquement les cinq premières couches, y compris les attributs (placeholder, aria-label, title, alt) et le texte qui s'affiche après l'envoi ; la sixième, l'email, se configure dans Webflow.

Résumé rapide

• Un formulaire, c'est six couches. Libellés, placeholders, bouton, message de succès, message d'erreur et email de notification. Les passer en revue un par un est la seule façon de ne pas laisser de texte dans la langue d'origine.
• Les placeholders sont des attributs, pas du texte. Beaucoup de traductions les laissent intacts parce qu'ils ne se trouvent pas entre des balises HTML ; Lantis traduit placeholder, aria-label, title y alt.
• Les messages de succès et d'erreur sont masqués dans le HTML. Webflow les affiche à l'envoi, il faut donc les traduire même s'ils ne sont pas visibles au chargement de la page.
• La validation « remplissez ce champ » ne vient pas de toi. C'est le navigateur qui la génère dans sa propre langue ; elle ne se traduit ni depuis Webflow ni depuis un proxy.
• L'email de confirmation se configure formulaire par formulaire dans Webflow, et il n'y en a qu'un seul : si tu reçois des demandes en plusieurs langues, décide dans quelle langue il sera rédigé ou passe par un outil externe.
• Avec Lantis le formulaire est servi traduit depuis le serveur sur l'URL de chaque langue (/fr/contacto), à partir de 3,50 $/mois.

Les six couches d'un formulaire Webflow

La première phrase est la réponse : un formulaire Webflow mêle texte visible, attributs HTML, éléments masqués, messages du navigateur et e-mails envoyés par Webflow, et chaque groupe se traduit à un endroit différent.

Les deux lignes des messages sont celles qui passent le plus souvent à la trappe, car elles ne sont pas visibles dans l'éditeur. On les traitera à part.

Étiquettes, placeholders et bouton

Ces trois-là, c'est la partie facile, avec une nuance technique qui explique pourquoi tant de formulaires restent à moitié traduits.

Les balises (<label>) et tout texte d'aide sont du texte normal : ils se traduisent comme le reste de la page.

Le placeholder n'est pas du texte, c'est un attribut. Dans le HTML, il apparaît comme <input placeholder="Tu correo">. Un outil qui ne parcourt que les nœuds de texte le rate et le champ reste dans la langue d'origine. Lantis traduit explicitement les attributs placeholder, aria-label, title y alt, donc le texte gris du champ et les libellés accessibles changent aussi de langue.

Le bouton d'envoi non plus n'est pas du texte. Webflow le génère comme <input type="submit" value="Enviar">, et il possède en plus une seconde valeur, le texte « en attente » affiché pendant le traitement de l'envoi. Si tu ne traduis que le visible, le bouton peut revenir à l'espagnol pendant une demi-seconde au moment même de l'envoi.

Et un conseil d'ordre : n'utilise pas le placeholder comme étiquette. Sans <label> c'est un problème d'accessibilité dans n'importe quelle langue, et en traduisant, vous perdez la trace de quel champ correspondait à quoi. Les attributs et l'accessibilité par langue, on les aborde aussi dans traduire les images et les textes alternatifs.

Les messages de succès et d'erreur : là où tout le monde se plante

Webflow insère dans le HTML deux blocs masqués pour chaque formulaire : celui de réussite (« Thank you! Your submission has been received! ») et celui d'erreur (« Oops! Something went wrong while submitting the form. »). Ils sont présents sur la page dès le départ, avec display: none, et le JavaScript de Webflow les affiche à l'envoi.

Cela a deux conséquences :

• Avec un proxy de traduction, ils se traduisent tout seuls, car ils font partie du HTML servi. Lantis traduit le HTML côté serveur et surveille en plus les changements du DOM, donc le texte qui apparaît après l'envoi est lui aussi traduit.
• Avec Webflow Localization, il faut aller les chercher. Le panneau de réglages du Form Block avec les états de succès et d'erreur se gère dans la locale principale ; dans les locales secondaires, la solution pratique que décrivent les utilisateurs sur le forum Webflow c'est d'ouvrir le Navigator, de sélectionner l'élément de texte dans le div de succès ou d'erreur et de le traduire à cet endroit. Il y a une demande ouverte dans la wishlist de Webflow pour que ces réglages soient visibles dans les locales ajoutées.

La preuve que vous avez bien fait les choses est toute bête et presque tout le monde l'oublie : envoie réellement le formulaire dans chaque langue. C'est le seul moment où ces deux textes sont visibles.

La validation du navigateur, ce n'est pas vous qui la traduisez

Lorsque vous laissez un champ obligatoire vide et que « Remplissez ce champ » ou « Please fill out this field » s'affiche, ce message ne vient ni de Webflow ni de votre site : il est généré par le navigateur à partir de l'attribut required, et l'affiche dans la langue du navigateur ou du système d'exploitation du visiteur, comme le documente MDN, dans son guide sur la validation des formulaires.

Autrement dit : une personne dont le navigateur est en allemand verra cet avertissement en allemand même si ton site est en espagnol, et il n'y a rien à traduire. Si tu veux maîtriser le texte, la seule solution est une validation maison en JavaScript, et les messages deviennent alors du texte de ta page (et là, oui, ils se traduisent). Ça ne vaut pas la peine de se battre avec ça, sauf pour des formulaires longs ou payants : sur un formulaire de contact à quatre champs, le message du navigateur est en plus celui que le visiteur reconnaît.

L'email de confirmation et celui d'avertissement

Ici s'arrête ce qu'une couche de traduction peut faire et commence la configuration de Webflow. Il y a deux emails distincts : la notification que vous recevez avec les données de l'envoi (c'est vous qui la lisez, peu importe la langue) et celui que reçoit la personne qui remplit le formulaire, qui est bien du contenu destiné au client.

En octobre 2025, Webflow a déplacé les réglages de notification des formulaires depuis les réglages du site vers le panneau de chaque Form Block dans le Designer, selon sa blog personnel; l'onglet Forms des réglages du site continue d'enregistrer les envois, expliqués dans le documentation sur les envois de formulaire. Ce qui compte pour un site multilingue : ce texte est unique par formulaire, pas un par langue.

Tu as trois solutions raisonnables :

1. Un formulaire par langue, chacun sur la page de sa langue et avec son propre texte de notification. C'est la solution la plus propre si vous utilisez Localization et que vous avez peu de langues.
2. Un e-mail en anglais pour toutes les langues, court et neutre. Efficace en B2B et évite de maintenir six textes.
3. Un service externe (celui que vous utilisez déjà pour l'email marketing ou les automatisations) qui reçoit l'envoi et envoie la confirmation dans la langue indiquée dans un champ masqué du formulaire.

Pour la troisième option, un champ masqué contenant la langue de la page suffit. Si vous vendez en ligne, le problème est le même qu'avec les e-mails de commande et nous le développons dans traduire le tunnel de commande et les e-mails de votre boutique.

Étape par étape : bien traduire un formulaire Webflow

1. Place le formulaire sur la page de chaque langue. Avec Lantis, vous n'avez rien à faire : /fr/contacto sert déjà la même page traduite. Avec Localization, vérifie le formulaire dans chaque locale.
2. Passez en revue champ par champ: libellé, placeholder, texte d'aide et bouton. Regarde le formulaire dans la langue concernée, pas la liste des traductions.
3. Envoie le formulaire de test et vérifie le message de succès. S'il s'affiche en anglais, c'est le div caché de Webflow.
4. Force l'erreur (déconnecte le réseau ou laisse un champ mal rempli) et vérifie le message d'erreur.
5. Décide de la langue de l'email de confirmation et configurez-le dans le panneau du Form Block.
6. Ajoutez un champ masqué avec la langue si tu comptes automatiser les réponses. Ça te sert à répondre dans la bonne langue même si la notification n'arrive que dans une seule.
7. Fige dans le glossaire les termes qui ne doivent pas être traduits : nom du produit, noms de formule, « newsletter » si tu le souhaites.
8. Vérifiez le SEO de la page du formulaire avec le vérificateur de SEO multilingue: URL par langue, hreflang et canonical. La configuration du hreflang dans Webflow, pas à pas, se trouve dans hreflang dans Webflow.

Erreurs fréquentes

• Traduire uniquement ce qui est visible au chargement. Les messages de succès et d'erreur sont masqués dans le HTML et ce sont justement ceux que lit le visiteur lorsqu'il a déjà décidé de vous écrire.
• Oublier le placeholder. C'est l'erreur la plus visible : une étiquette en français et « Votre courriel » à l'intérieur du champ.
• Se battre avec la validation du navigateur. Ce n'est pas ton texte. Si tu le veux dans ta langue, fais-le avec ta propre validation en JavaScript.
• Partir du principe que l'email de confirmation est traduit. Il ne quitte pas la page, donc aucune couche de traduction n'y touche.
• Deux formulaires portant le même nom. Webflow regroupe les envois par le nom du formulaire. Si tu dupliques celui de contact par langue et que tu les nommes pareil, tu perds la trace de quelle langue a envoyé quoi.

Un formulaire à moitié traduit ne se remarque pas sur la page d'accueil : il se remarque au seul moment où quelqu'un allait t'écrire.

Quand choisir Webflow Localization plutôt que Lantis

Choisis Localisation si tu veux des formulaires différents par langue (champs différents, autre destinataire, autre texte de notification), si tu as une ou deux langues et si tu paies déjà l'extension. Consulté en octobre 2026 sur la page de tarification de Webflow, le niveau Essential coûte 12 $ par locale et par mois en paiement mensuel, jusqu'à 3 locales, et l'Advanced 35 $ par locale et par mois, jusqu'à 10. Le détail complet se trouve dans Webflow Localization : prix et limites et les options hors de Webflow, dans alternatives à Webflow Localization.

Choisis Lantis si tu veux le même formulaire dans toutes les langues, traduit sans le maintenir six fois, si tu vas avoir trois langues ou plus ou si le formulaire cohabite avec un CMS qui grandit, cas que nous traitons dans traduire le CMS de Webflow.

Questions fréquentes

Les placeholders d'un formulaire Webflow se traduisent-ils ?

Oui, mais pas comme le reste du texte : le placeholder est un attribut HTML (placeholder="…"), pas un nœud de texte, et certains outils le contournent. Lantis traduit explicitement placeholder, aria-label, title y alt, donc le texte gris du champ change de langue en même temps que le libellé.

Comment traduire le message « Thank you! Your submission has been received! » de Webflow ?

Ce texte se trouve dans un div masqué que Webflow ajoute à chaque formulaire et qui s'affiche à l'envoi. Avec un proxy de traduction, il se traduit tout seul, puisqu'il fait partie du HTML de la page. Avec Webflow Localization, la méthode pratique consiste à ouvrir le Navigator dans le locale, sélectionner le texte à l'intérieur du bloc de succès et le traduire à cet endroit.

Webflow peut-il envoyer l'email de confirmation dans la langue du visiteur ?

Pas nativement : le texte de notification se configure par formulaire, pas par langue. Les solutions habituelles sont de créer un formulaire par langue, d'utiliser un email unique dans une langue neutre, ou d'envoyer la langue dans un champ caché à un outil externe qui rédige la réponse.

Pourquoi le message « champ obligatoire » n'est-il pas dans la langue de mon site ?

Parce que c'est le navigateur qui le génère à partir de l'attribut required, et l'affiche dans la langue du navigateur ou du système du visiteur. Ce n'est contrôlé ni par Webflow ni par la couche de traduction. Si tu veux ce texte dans la langue de la page, tu dois le valider avec ton propre JavaScript et écrire les messages toi-même.

Les envois du formulaire traduit arrivent-ils de la même façon dans Webflow ?

Oui. Avec Lantis, le formulaire reste celui de Webflow : il est envoyé au même endroit et l'envoi apparaît dans les réglages de Forms comme n'importe quel autre. Pour distinguer la langue d'origine, ajoutez un champ masqué avec le code de langue de la page.

Conclusion

Traduire un formulaire Webflow, c'est du travail à la chaîne : libellés, placeholders, bouton, message de succès, message d'erreur et email. Les quatre premiers se règlent avec une bonne traduction de la page, le cinquième ne se voit qu'en envoyant le formulaire de test dans chaque langue, et le sixième se décide dans Webflow car il ne vit pas dans la page. Si vous ne faites qu'une seule chose après avoir lu ceci, que ce soit d'envoyer le formulaire dans chaque langue et de regarder ce qui en sort.

Lantis traduisez votre site Webflow avec une ligne de code dans le <head>, formulaires inclus : texte, attributs comme placeholder y aria-label, métadonnées et le contenu qui apparaît après interaction. Chaque langue vit sur sa propre URL (/fr/, /de/) avec hreflang, canonical et sitemap par langue, le HTML déjà traduit côté serveur et plus de 60 langues disponibles. C'est 3,50 $/mois pour 1 langue, 3 $/langue de 2 à 9 et 2,50 $/langue à partir de 10, avec 500 000 mots par langue, et il existe un plan gratuit de 100 traductions sans carte bancaire. Calcule le tien sur le calculateur ou testez-le avec votre formulaire : Commence gratuitement.