Traduire Contact Form 7 à l'aide de TranslatePress

Ce didacticiel montre comment créer des formulaires multilingues construits à l'aide de Contact Form 7 avec TranslatePress.

Comment traduire des widgets dans WordPress + afficher différents widgets selon la langue

Contact Form 7 est le plugin de formulaire de contact le plus populaire pour WordPress. Il est gratuit et équipe plus de 5 millions de sites Web.

Traduire les formulaires créés avec Contact Form 7 vous permet de proposer un formulaire unique disponible en plusieurs langues. Inutile de configurer plusieurs formulaires avec des noms de champs différents pour chaque langue.

Ci-dessous, nous examinerons comment traduire des formulaires Créé avec Contact Form 7 à l'aide de TranslatePress.

Comment traduire Contact Form 7

Nous commencerons par configurer un nouveau formulaire de contact en utilisant Formulaire de contact 7. Après avoir installé et activé le plugin, vous remarquerez un nouvel élément de menu “Contact“.

Nous allons sélectionner le Formulaires de contact élément de sous-menu, puis cliquez sur le Ajouter un nouvel élément bouton pour configurer notre premier formulaire de contact.

Ici, nous pouvons configurer le formulaire et contrôler des aspects tels que :

• modifiez le modèle de formulaire et sélectionnez les champs que vous souhaitez y inclure ;
• modifier le modèle d'e-mail que l'administrateur reçoit lorsqu'un formulaire est soumis;
• modifier les messages de validation et de succès.

Une fois que vous avez fini de modifier le modèle de formulaire, cliquez Sauvegarder. Un code court sera affiché, que vous pourrez placer sur une page ou un widget pour afficher le formulaire.

Nous allons l'insérer dans une page “ Contactez-nous ” nouvellement créée.

Après avoir enregistré la page, regardons à quoi ressemble le formulaire sur le front-end :

Nous allons maintenant procéder à l'installation et à l'activation de TranslatePress pour traduire Contact Form 7.

Une fois TranslatePress activé, vous remarquerez une nouvelle Site élément ajouté dans la barre d'administration.

Passez simplement la souris dessus et cliquez Paramètres. Ceci vous mènera au Paramètres TranslatePress page.

Ici, nous pouvons ajouter les langues dans lesquelles nous voulons traduire le formulaire de contact. Nous utiliserons deux langues pour ce tutoriel.

L'anglais est notre langue par défaut, et nous ajouterons également l'espagnol. Vous remarquerez qu'il y a quelques autres paramètres (comme Intégration Google Translate pour la traduction automatique ou en personnalisant sélecteur de langue), mais nous les ignorons pour l'instant et cliquons Enregistrer les modifications.

Nous sommes maintenant prêts à traduire notre formulaire créé avec Contact Form 7.

Champs du formulaire de contact

Pour commencer à traduire les champs du formulaire de contact, nous allons simplement naviguer vers la page “ Contactez-nous ” (où se trouve le formulaire), puis cliquer sur Traduire la page bouton de la barre d'administration.

Cela ouvrira un éditeur de traduction frontal où vous pourrez traduire chaque chaîne de caractères d'une page et voir les modifications en temps réel.

Dès que vous passez le curseur sur le libellé d'un champ spécifique, une icône de crayon apparaît. En cliquant dessus, vous pourrez traduire cette chaîne de caractères. Saisissez la traduction et cliquez sur le Sauvegarder bouton.

De cette façon, vous pourrez traduire chaque champ de formulaire et chaque description, y compris le texte du bouton “ Envoyer ”.

Les valeurs des options pour select, checkbox, radio, etc. se trouvent toutes dans le Liste de chaînes de caractères menu déroulant sur la gauche. Celui-ci contient toutes les chaînes trouvées sur cette page afin que vous puissiez l'utiliser pour traduire les chaînes qui n'affichent pas l'icône de crayon.

Dans ce cas, sélectionnons et traduisons les options du menu déroulant “ Nous contacter au sujet de ”.

Ceci conclut la traduction des champs du formulaire de contact.

Traduire les messages d'erreur et de succès du formulaire de contact

Ensuite, il y a certains messages qu'un formulaire de contact affiche après avoir cliqué sur le bouton d'envoi. Des éléments tels que des messages de validation, d'erreur ou de réussite de l'envoi.

Pour Contact Form 7, ils sont tous situés sous Messages onglet, lors de la modification ou de l'ajout d'un nouveau formulaire. Consultez la liste des messages et voyez lesquels s'appliquent à votre formulaire.

Pour les traduire avec TranslatePress, nous devons d'abord les afficher dans l'interface utilisateur. Ensuite, une fois qu'elles sont visibles, nous pouvons les sélectionner une par une et les traduire.
Pour les messages de validation, déclenchez la soumission du formulaire en cliquant sur le Envoyer bouton. Une fois les erreurs affichées, cliquez dessus et ajoutez la traduction.

Faites de même pour les messages de réussite et vous aurez votre formulaire de contact entièrement traduit.

Pour en finir

La création de formulaires de contact multilingues à l'aide de Contact Form 7 et de TranslatePress est vraiment simple grâce à l'approche intuitive de traduction côté client.

En utilisant des outils tels que détection automatique de la langue de l'utilisateur Disponible dans TranslatePress, cette fonctionnalité vous permet d'afficher automatiquement la version traduite du formulaire de contact aux visiteurs dans leur propre langue.

Si vous souhaitez voir TranslatePress en action, n'oubliez pas de jouez avec notre démo.

Avez-vous encore des questions sur la traduction de Contact Form 7 ? Faites-le-nous savoir dans les commentaires !

Si vous avez trouvé ce message utile, consultez notre Chaîne YouTube, où nous téléchargeons constamment des tutoriels vidéo courts et faciles à suivre. Vous pouvez également nous suivre sur Facebook et Twitter pour être le premier à savoir chaque fois que nous publions.