Comment traduire les formulaires multi-sites dans Craft CMS avec Freeform 5

Freeform 5 a introduit les formulaires sensibles au site et une interface de traduction qui facilite grandement la gestion des formulaires multilingues. Vous pouvez maintenant traduire tout, des étiquettes de champs aux messages d'erreur, directement dans le panneau de contrôle de Craft.

Configuration de votre structure multi-sites pour la traduction Freeform

Avant de pouvoir traduire les formulaires, vous devez avoir plusieurs sites dans Craft CMS. Chaque site représente une langue ou une région différente.

Création de sites pour le support de formulaires multi-langues

Naviguez vers Paramètres > Sites dans votre panneau de contrôle Craft. Ajoutez un nouveau site pour chaque langue que vous voulez supporter.

Pour chaque site, configurez :

• Nom : Anglais, Français, Allemand, etc.
• URL de base : votresite.com, votresite.fr, votresite.de
• Langue : en-US, fr-FR, de-DE

Voici à quoi ressemble une configuration multi-sites typique :

Site principal : Anglais (votresite.com) - en-US
Site 2 : Français (votresite.fr) - fr-FR  
Site 3 : Allemand (votresite.de) - de-DE

Assurez-vous que chaque site a le bon code de langue. Freeform utilise ces codes pour déterminer quelles traductions afficher.

Installation et configuration de Freeform 5 pour les formulaires multi-langues

Installez Freeform 5 par le biais du Plugin Store ou via Composer :

composer require solspace/craft-freeform

Après l'installation, vous devez activer les formulaires sensibles au site. Allez dans Freeform > Paramètres > Général et activez Formulaires sensibles au site. Ceci indique à Freeform que vous voulez utiliser du contenu différent pour différents sites.

Sans ce paramètre activé, Freeform traite tous les sites de la même façon. Avec celui-ci activé, vous pouvez traduire tous les aspects de vos formulaires.

Rendre les formulaires traduisibles sur plusieurs sites

Créez un nouveau formulaire ou modifiez un formulaire existant dans Freeform > Formulaires. Dans le constructeur de formulaires, cliquez sur l'onglet Paramètres et activez l'option Traduisible.

Ensuite, assignez le formulaire aux sites où vous voulez qu'il apparaisse. Vous pouvez assigner un seul formulaire à plusieurs sites et le traduire différemment pour chacun.

Traduction du contenu de formulaire pour différentes langues

La façon la plus facile de traduire les formulaires est par l'interface du panneau de contrôle. Voici comment ça fonctionne :

Utilisation du sélecteur de site pour la traduction de formulaire

Au haut du constructeur de formulaires, vous verrez un menu déroulant de sélecteur de site. Ceci vous permet de basculer entre différents sites pour entrer les traductions.

Quand vous sélectionnez un site, vous entrez du contenu spécifiquement pour cette langue. Une icône de traduction bleue apparaît à côté des champs qui ont des traductions pour le site actuel.

Ce que vous pouvez traduire dans Freeform 5

Vous pouvez traduire presque tout dans vos formulaires :

Contenu au niveau du formulaire :

• Nom et description du formulaire
• Texte du bouton de soumission
• Messages de succès et d'erreur

Contenu au niveau des champs :

• Étiquettes et instructions
• Texte de substitution
• Valeurs par défaut
• Messages d'erreur

Contenu des pages et sections :

• Noms de pages pour les formulaires multi-pages
• En-têtes de section

Options pour les champs de choix :

• Options de menu déroulant
• Étiquettes de boutons radio
• Étiquettes de cases à cocher

Processus de traduction étape par étape pour les formulaires multi-sites

1. Sélectionnez votre site de langue principale (habituellement l'anglais)

2. Construisez votre formulaire avec tout le contenu dans votre langue principale

3. Basculez vers votre site de langue secondaire en utilisant le sélecteur de site

4. Parcourez chaque champ et traduisez le contenu

5. Sauvegardez le formulaire

6. Répétez pour des langues additionnelles

Voici un exemple de traduction d'un formulaire de contact de l'anglais vers le français :

Version anglaise :

• Nom du formulaire : "Contact Us"
• Prénom : "First Name"
• Bouton de soumission : "Send Message"

Version française :

• Nom du formulaire : "Contactez-nous"
• Prénom : "Prénom"
• Bouton de soumission : "Envoyer le message"

Méthodes de traduction avancées pour Craft CMS Freeform

Pour les développeurs qui veulent plus de contrôle sur les traductions, Freeform 5 supporte des méthodes de traduction additionnelles.

Fichiers de traduction pour le support multi-langues de Freeform

Vous pouvez créer des fichiers de traduction PHP pour chaque langue. Copiez le fichier de ./vendor/solspace/craft-freeform/packages/plugin/src/translations/en/freeform.php vers le dossier translations/{langue}/ de votre projet.

Pour les traductions françaises, créez translations/fr/freeform.php :

 'Contactez-nous',
    'First Name' => 'Prénom',
    'Last Name' => 'Nom de famille',
    'Email Address' => 'Adresse courriel',
    'Message' => 'Message',
    'Submit' => 'Envoyer',
    'Required field' => 'Champ obligatoire',
    'Please enter a valid email address' => 'Veuillez saisir une adresse courriel valide',
];

Traductions de gabarits Twig pour les formulaires multi-sites

Dans vos gabarits personnalisés, enveloppez le texte dans le filtre de traduction de Twig :

{{ "First Name"|t('freeform') }}
{{ "Submit"|t('freeform') }}

Cette méthode fonctionne bien quand vous avez des gabarits de formulaire personnalisés et que vous voulez garder les traductions séparées du constructeur de formulaires.

Traduction des notifications courriel pour les formulaires multi-langues

Les notifications courriel nécessitent une attention spéciale parce qu'elles ne sont pas automatiquement traduites comme les champs de formulaire.

Utilisation de conditions de site pour la traduction courriel

Dans vos gabarits courriel, utilisez les conditions Twig pour changer le contenu basé sur le site actuel :

{% if currentSite.language == "fr-FR" %}
    
Nouveau message de contact
    
Merci de nous avoir contactés !
{% elseif currentSite.language == "de-DE" %}
    
Neue Kontaktnachricht
    
Danke, dass Sie uns kontaktiert haben!
{% else %}
    
New Contact Message
    
Thank you for contacting us!
{% endif %}

Utilisation de filtres de traduction dans les gabarits courriel

Vous pouvez aussi utiliser le filtre de traduction dans les gabarits courriel :

{{ "New Contact Message"|t('site') }}
{{ "Thank you for contacting us!"|t('site') }}

Assurez-vous que vos fichiers de traduction incluent ces clés pour chaque langue.

Gestion des formulaires AJAX dans les sites multi-langues

Les formulaires AJAX nécessitent JavaScript pour traduire les messages de succès et d'erreur. Remplacez ces messages quand le formulaire se charge :

document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('[data-freeform]');
    
    form.addEventListener('freeform-ready', function (event) {
        // Obtenir la langue actuelle de l'attribut lang HTML
        const currentLang = document.documentElement.lang;
        
        if (currentLang === 'fr-FR') {
            event.freeform.setOption('successBannerMessage', 'Votre message a été envoyé avec succès !');
            event.freeform.setOption('errorBannerMessage', 'Une erreur est survenue. Veuillez réessayer.');
        } else if (currentLang === 'de-DE') {
            event.freeform.setOption('successBannerMessage', 'Ihre Nachricht wurde erfolgreich gesendet!');
            event.freeform.setOption('errorBannerMessage', 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
        }
    });
});

Affichage des formulaires traduits sur plusieurs sites

Une fois vos formulaires traduits, les afficher est simple. Utilisez l'étiquette Freeform standard :

{{ freeform.form('contactUs') }}

Freeform détecte automatiquement le site actuel et affiche la traduction appropriée. Vous n'avez pas besoin de spécifier la langue - ça arrive automatiquement.

Problèmes courants et solutions pour Freeform multi-langues

Problème : Les traductions n'apparaissent pas
Vérifiez que le formulaire est assigné au bon site et que vous avez sauvegardé vos traductions. Vérifiez aussi que les formulaires sensibles au site sont activés dans les paramètres Freeform.

Problème : Les notifications courriel ne sont pas traduites
Les gabarits courriel nécessitent une traduction manuelle utilisant des conditions ou des filtres de traduction. Ils n'héritent pas automatiquement des traductions de formulaire.

Problème : Les messages AJAX apparaissent dans la mauvaise langue
Les messages AJAX nécessitent des remplacements JavaScript comme montré ci-dessus. Les messages par défaut viennent des traductions anglaises de Freeform.

Problème : Les étiquettes d'option ne se traduisent pas
Assurez-vous de traduire les étiquettes d'option pour chaque champ de choix (menus déroulants, radios, cases à cocher) dans le constructeur de formulaires, pas seulement les étiquettes de champ.

Test de vos traductions de formulaire multi-langues

Avant le lancement, testez chaque formulaire sur chaque site :

1. Visitez chaque version linguistique de votre site

2. Remplissez et soumettez le formulaire

3. Vérifiez que tout le texte apparaît dans la bonne langue

4. Vérifiez que les notifications courriel sont bien traduites

5. Testez les messages de validation en soumettant des données invalides

Créez une liste de vérification pour chaque langue pour vous assurer que rien n'est oublié.

Meilleures pratiques pour la traduction Freeform multi-sites

Utilisez le panneau de contrôle pour les éditeurs : Les membres de l'équipe non techniques peuvent facilement gérer les traductions par l'interface du constructeur de formulaires.

Gardez les fichiers de traduction pour les développeurs : Utilisez les fichiers de traduction PHP pour le texte statique qui apparaît dans plusieurs formulaires ou gabarits.

Documentez votre processus : Notez votre flux de travail de traduction pour que les membres de l'équipe sachent quelle méthode utiliser quand.

Testez tôt et souvent : N'attendez pas le lancement pour tester les traductions. Vérifiez-les pendant que vous construisez.

Assignez les formulaires stratégiquement : Utilisez le même formulaire sur les sites quand possible. C'est plus facile de gérer un formulaire traduit que plusieurs formulaires séparés.

Prochaines étapes pour l'implémentation de formulaires multi-langues

Commencez avec un formulaire simple et faites fonctionner le processus de traduction. Une fois que vous comprenez comment les formulaires sensibles au site fonctionnent, vous pouvez appliquer les mêmes principes à des formulaires plus complexes.

Si vous gérez plusieurs formulaires dans plusieurs langues, considérez créer des gabarits pour les types de formulaires courants. Ceci accélère le processus de traduction pour les nouveaux formulaires.

La combinaison de Craft CMS 5 et Freeform 5 vous donne tout ce dont vous avez besoin pour créer des formulaires multilingues professionnels. L'interface de traduction la rend accessible aux non-développeurs, tandis que les options avancées donnent aux développeurs la flexibilité dont ils ont besoin.

Vos visiteurs internationaux apprécieront les formulaires qu'ils peuvent réellement comprendre, et vous verrez de meilleurs taux de conversion en conséquence.