Comment traduire les formulaires de contact de WordPress (étape par étape)

Vous souhaitez traduire vos formulaires de contact WordPress dans une autre langue ?

Les traductions sont très importantes si votre site web s'adresse à des personnes de différentes régions du monde dont l'anglais n'est pas la langue maternelle.

La bonne nouvelle, c'est que la gestion des traductions est très facile avec WordPress. N'oubliez pas que vous ne vous contentez pas de traduire des mots, vous ouvrez également des portes à un public plus large. 🌐

Dans cet article, nous allons vous montrer comment traduire vos formulaires de contact WordPress.

Créez votre formulaire WordPress maintenant

Comment traduire vos formulaires de contact WordPress

Étape 1 : Créer un formulaire de contact simple

Une fois WPForms installé et activé sur votre site, vous pouvez commencer à créer un formulaire à traduire.

Ouvrez votre menu d'administration WordPress et allez dans WPForms " Add New.

Une fois que vous avez fait cela, vous accédez à l'écran de configuration du formulaire. Commencez par donner un titre à votre formulaire.

Ensuite, faites défiler la page jusqu'à la section des modèles et sélectionnez-en un parmi plus de 2 000 modèles de formulaires WordPress. Nous choisirons le modèle Simple Contact Form pour les besoins de ce tutoriel.

Dès que vous cliquez sur Utiliser le modèle, le modèle de formulaire commence à se charger dans le générateur de formulaires.

Vous pouvez ajouter des champs supplémentaires à votre formulaire de contact en les faisant glisser du panneau de gauche vers le panneau de droite.

Veillez à appuyer sur le bouton Enregistrer pour sauvegarder les modifications que vous avez apportées à votre formulaire jusqu'à ce stade.

Étape 2 : Traduire les champs de votre formulaire

Traduire les champs de votre formulaire de contact est très facile à faire dans WPForms, et il y a plusieurs façons de le faire.

Traduction automatique

Le moyen le plus rapide de traduire les champs de votre formulaire dans n'importe quelle langue est d'utiliser le plugin Weglot.

Weglot est un plugin payant qui permet de traduire instantanément le contenu de votre site dans n'importe quelle langue en cliquant simplement sur un bouton de changement de langue.

Il fonctionne avec toutes sortes de contenus sur un site WordPress, y compris les formulaires construits avec WPForms. Vous pouvez installer Weglot en suivant les mêmes étapes que celles suivies pour installer WPForms.

Après avoir installé le plugin, cliquez sur Weglot dans la barre latérale du menu d'administration de WordPress.

L'écran des paramètres de Weglot s'affiche.

Pour utiliser les services de traduction de Weglot, vous devez créer un compte auprès de Weglot et utiliser votre clé API pour connecter votre compte à WordPress.

Cliquez sur le lien Weglot sous API pour créer votre compte Weglot et obtenir votre clé API.

Créez votre nouveau compte en saisissant votre adresse électronique et votre mot de passe.

Weglot vous enverra un email de confirmation. Cliquez sur le lien contenu dans l'email et vous serez redirigé vers votre tableau de bord Weglot, où vous pourrez copier votre clé API.

Maintenant, basculez votre navigateur vers la page de configuration de Weglot sur votre site WordPress et collez votre clé API.

Vous devez également sélectionner la langue d'origine de votre site. Sélectionnez ensuite la ou les langues de destination, c'est-à-dire les langues dans lesquelles vous souhaitez traduire votre contenu et vos formulaires.

Cliquez ensuite sur le bouton Enregistrer les modifications en bas de page.

Weglot affichera une fenêtre modale confirmant que votre site est désormais multilingue.

Maintenant, visitez la page où vous venez de publier votre formulaire de contact et utilisez les commutateurs de langue en bas de page pour traduire votre formulaire dans une autre langue.

Comme vous pouvez le voir, Weglot traduira l'étiquette de votre champ de formulaire, le texte du bouton et les sous-étiquettes dans la langue de votre choix.

Cependant, aucun plugin de traduction ne peut traduire automatiquement les validations et les messages d'erreur dans WPForms.

Vous devrez donc traduire manuellement les messages de validation, comme indiqué à l'étape 3.

N'oubliez pas non plus que Weglot est un plugin payant avec une version d'essai gratuite de 10 jours. Pour continuer à utiliser ses fonctionnalités de traduction après 10 jours, vous devrez acheter un plan payant.

Si ce n'est pas la meilleure option pour vous, nous vous montrerons comment traduire gratuitement vos formulaires de contact manuellement.

Traductions des formulaires manuels

Il est très facile de traduire vos formulaires manuellement dans WPForms. Pour changer les libellés de n'importe quel champ de formulaire, tout ce que vous avez à faire est de cliquer sur le champ de formulaire dans l'éditeur de formulaire et de remplacer le libellé par défaut par la langue dans laquelle vous voulez traduire votre formulaire.

Si vous avez besoin d'aide pour traduire, vous pouvez utiliser des outils de traduction en ligne tels que Google Translate.

Après avoir traduit les libellés de vos formulaires, vous devez faire quelque chose pour les sous-libellés des noms (les libellés sous les champs du formulaire comme "First" et "Last"). Bien qu'il ne soit pas possible d'éditer les sous-étiquettes Nom dans WPForms, il existe un moyen de contourner ce problème.

Cliquez sur un champ dont vous souhaitez modifier le sous-étiquette pour accéder à ses options de champ dans le volet de gauche. Cliquez ensuite sur l'onglet Avancé.

S'il n'est pas possible de traduire les sous-étiquettes, il est en revanche possible d'utiliser des espaces réservés personnalisés à la place des sous-étiquettes.

Insérez vos traductions dans les champs réservés à cet effet.

Faites ensuite défiler la page jusqu'en bas et cliquez sur le bouton de basculement Masquer les sous-étiquettes.

Vous devez également traduire le texte du bouton Submit et le nom du formulaire (si vous avez initialement utilisé un nom anglais pour votre formulaire).

Pour ce faire, allez dans Paramètres " Général à partir du générateur de formulaires.

Dans le volet de droite, il suffit de saisir votre traduction dans la zone de texte Nom du formulaire.

Descendez jusqu'en bas et répétez les mêmes étapes pour les zones de texte Texte du bouton de soumission et Traitement du bouton de soumission.

C'est excellent ! Vous avez maintenant traduit toutes les étiquettes et le texte de votre formulaire. Cliquez sur Enregistrer et passez à l'étape suivante.

Étape 3 : Traduire les messages de validation de votre formulaire

Un message de validation est un texte qui s'affiche lorsqu'un champ de formulaire obligatoire reste vide ou qu'une personne saisit des données incorrectes dans un champ de formulaire.

Pour traduire les messages de validation de votre formulaire de contact, quittez votre générateur de formulaire et naviguez vers WPForms " Settings depuis votre tableau de bord WordPress. Cliquez ensuite sur l'onglet Validation.

À partir de là, il vous suffit de modifier les messages de validation actuels (en anglais par défaut) pour qu'ils correspondent à la langue dans laquelle vous traduisez vos formulaires de contact.

Lorsque vous avez terminé, appuyez sur Enregistrer les paramètres.

Désormais, si vous vérifiez votre formulaire en saisissant des données erronées ou en omettant un champ obligatoire, vous verrez apparaître les messages de validation traduits.

Et voilà, c'est fait ! Vous savez maintenant comment traduire vos formulaires de contact WordPress.

Bien que les étapes ci-dessus soient suffisantes pour la plupart des sites, dans certains cas particuliers, il peut être nécessaire d'utiliser du code PHP pour traduire certains champs spéciaux.

Nous en présenterons quelques-uns dans la section suivante afin que vous puissiez simplement copier et coller des extraits de code, même si vous n'avez jamais utilisé de code auparavant.

Bonus : Options de traduction avancées

Avant d'entrer dans les détails des différents scénarios particuliers, expliquons d'abord comment vous pouvez insérer des extraits de code personnalisés dans votre site WordPress de la manière la plus simple qui soit.

Pour ce faire, vous aurez besoin d'un plugin appelé WPCode. Installez ce plugin sur votre site.

Après avoir installé le plugin, passez votre curseur sur Code Snippets dans votre barre latérale d'administration WP et cliquez sur Add Snippet.

Ensuite, cliquez sur le bouton Utiliser un extrait sous Ajouter votre code personnalisé (Nouvel extrait).

La fenêtre de l'éditeur de code s'ouvre alors.

En haut, vous pouvez donner un nom à votre extrait pour vous aider à le référencer ultérieurement. Au milieu, vous disposez de l'éditeur de code, où vous pouvez écrire votre propre code ou le copier-coller à partir d'une autre source.

En haut à droite, vous pouvez sélectionner votre type de code en fonction de la nature de votre code. Pour ces scénarios, nous utiliserons des codes PHP, donc sélectionnez PHP Snippet dans le menu déroulant.

C'est excellent. Nous allons maintenant passer en revue quelques scénarios courants dans lesquels vous pouvez avoir besoin d'utiliser du code PHP pour traduire certaines parties de votre formulaire.

Traduction des messages de validation en plusieurs langues

Prenons l'exemple d'un site web qui comporte des formulaires dans différentes langues. Bien que vous puissiez facilement modifier les étiquettes manuellement ou à l'aide du plugin Weglot comme nous l'avons montré ci-dessus, les messages de validation ne peuvent pas être modifiés pour les formulaires individuels avec ces méthodes.

Pour modifier les messages de validation en fonction de la langue spécifique sélectionnée par un utilisateur sur votre site, vous devez insérer un extrait de code PHP.

Nous avons créé un extrait de code qui traduit les messages de validation de votre formulaire en espagnol ou en français en fonction de la langue sélectionnée par l'utilisateur.

Suivez les étapes indiquées ci-dessus pour ajouter un nouveau snippet à l'aide de WPCode, puis insérez le snippet suivant dans l'éditeur de code :

Sélectionnez la méthode d'insertion du code (insertion automatique, exécution partout).

Ensuite, revenez en haut de la page et appuyez sur le bouton de basculement pour activer votre extrait de code. Cliquez sur le bouton Enregistrer l'extrait.

Félicitations ! Vos formulaires afficheront désormais des messages de validation dans la langue sélectionnée.

Si vous souhaitez ajouter des traductions pour d'autres langues, vous aurez besoin du code ICL de la langue en question (c'est-à-dire "es" pour l'espagnol et "fr" pour le français). Il suffit d'ajouter une ligne de code commençant par :

case '[insert your language code]':

Ensuite, utilisez les mêmes blocs de code que ceux qui apparaissent dans notre exemple de code ci-dessus, juste après la ligne case.

Ajoutez les traductions pour chaque message de validation à droite du signe égal à l'intérieur des crochets comme ci-dessous (le type de message de validation spécifique est indiqué par les doubles barres obliques) :

//valid number
$strings[ 'val_number' ] = '[Enter your translation]'

Et répétez l'opération pour chaque ligne de code.

Nous avons testé ce code pour les plugins WPML et Polylang. La compatibilité avec d'autres plugins de traduction n'est pas garantie.

Traduction des sous-étiquettes des champs de confirmation des courriels

Si vous utilisez le champ Email Confirm, vous pouvez traduire le sous-étiquette dans une autre langue.

Comme le montre l'exemple précédent, vous pouvez le faire avec un code PHP personnalisé inséré à l'aide de WPCode.

Voici le code dont vous aurez besoin :

Le texte traduit pour les sous-étiquettes doit être inséré à droite des signes égaux dans les fonctions $properties.

Par exemple, voici comment vous devrez modifier le code ci-dessus pour les sous-étiquettes espagnoles des champs de confirmation du courrier électronique :

$properties[ 'inputs' ][ 'primary' ][ 'sublabel' ][ 'value' ] = __( 'Introduce tu correo electrónico', 'plugin-domain' );
$properties[ 'inputs' ][ 'secondary' ][ 'sublabel' ][ 'value' ] = __( 'Para confirmar, vuelva a ingresar su dirección de correo electrónico aquí', 'plugin-domain' );

Le code ci-dessus modifiera le message de validation du champ de confirmation de l'email de manière globale sur les formulaires de votre site. Cependant, il est également possible de le modifier pour des formulaires individuels en modifiant légèrement le code ci-dessus.

/**
 * Customize email field properties.
 *
 * @link https://wpforms.com/developers/how-to-change-sublabels-for-the-email-field/
 */
 
function wpf_dev_email_field_properties( $properties, $field, $form_data ) {
 
    // Only process this snippet on the form ID 123
    if ( absint( $form_data[ 'id' ] ) !== 123 ) {
 
        return $properties;
    } 
      
    // Change sublabel values
    $properties[ 'inputs' ][ 'primary' ][ 'sublabel' ][ 'value' ] = __( 'Enter Your Email', 'plugin-domain' );
    $properties[ 'inputs' ][ 'secondary' ][ 'sublabel' ][ 'value' ] = __( 'To confirm, re-enter your email address here', 'plugin-domain' );
  
    return $properties;
 
}
 
add_filter( 'wpforms_field_properties_email' , 'wpf_dev_email_field_properties', 10, 3 );

Dans la ligne de code if ( absint( $form_data[ 'id' ] ) !== 123 )Il suffit de remplacer "123" par l'identifiant du formulaire qui vous intéresse.

Vous pouvez localiser l'ID du formulaire en allant dans WPForms " All Forms et en regardant l'ID dans le shortcode pour le formulaire désiré.

Autres options de traduction

Si vous souhaitez traduire d'autres champs et validations spécifiques associés à certains types de formulaires, vous pouvez consulter les documents de développement suivants :

• Traduction des messages de validation pour le module d'enregistrement des utilisateurs
• Comment traduire le champ File Upload

Ensuite, créer des formulaires en accordéon

Un formulaire en accordéon est un moyen fantastique de rendre un long formulaire plus facile à remplir grâce à des sections repliables. Notre guide détaillé sur la création de formulaires en accordéon vous montre toutes les étapes pour créer un formulaire en accordéon dans WordPress.

Créez votre formulaire WordPress maintenant

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de construction de formulaire WordPress le plus facile à utiliser. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, n'hésitez pas à nous suivre sur Facebook et Twitter pour d'autres tutoriels et guides gratuits sur WordPress.