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

Voulez-vous 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 où l'anglais n'est peut-être pas leur langue maternelle.

La bonne nouvelle est que la gestion des traductions est très facile dans WordPress. N'oubliez pas que vous ne faites pas que traduire des mots ; vous ouvrez également les portes à un public plus large. 🌐

Dans cet article, nous vous montrerons 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

Avec 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 » Ajouter nouveau.

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

Après cela, faites défiler jusqu'à la section des modèles et sélectionnez-en un parmi plus de 2 100+ modèles de formulaires WordPress. Nous sélectionnerons le modèle de formulaire de contact simple pour les besoins de ce tutoriel.

Dès que vous appuyez sur Utiliser le modèle, le modèle de formulaire commencera à se charger dans le constructeur 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.

Assurez-vous d'appuyer sur le bouton Enregistrer pour sauvegarder les modifications que vous avez apportées à votre formulaire jusqu'à présent.

Étape 2 : Traduire les champs de votre formulaire

Traduire les champs de votre formulaire de contact est très facile avec WPForms, et il existe plusieurs façons de le faire.

Traduction automatique

La façon la plus rapide de traduire les champs de votre formulaire dans n'importe quelle langue est d'utiliser le plugin Universally.

Universally est un plugin de traduction basé sur l'IA qui peut traduire instantanément le contenu de votre site dans plus de 110 langues en cliquant simplement sur un bouton de sélection de langue.

Il fonctionne avec toutes sortes de contenus sur un site WordPress, y compris les formulaires créés avec WPForms. De plus, vous pouvez commencer avec Universally gratuitement.

Le plan gratuit traduit jusqu'à 2 000 mots dans une langue sur un seul site, et vous pouvez passer à un plan payant plus tard si vous avez besoin de plus de langues ou de plus de mots traduits.

Pour commencer, rendez-vous sur le site web Universally et cliquez sur le bouton « Commencer gratuitement » pour créer un compte.

Après votre inscription, vous arriverez sur votre tableau de bord Universally, où vous pourrez configurer votre premier projet de traduction.

Depuis votre tableau de bord, trouvez et cliquez sur le bouton « Ajouter un projet ». Cela ouvrira un court formulaire où vous configurerez votre site dans Universally.

Commencez par saisir le domaine de votre site. Ensuite, donnez un nom à votre projet afin de pouvoir le reconnaître facilement plus tard.

Sélectionnez ensuite la langue source dans laquelle votre contenu est écrit et choisissez WordPress comme votre plateforme. Une fois que tout est rempli, cliquez sur « Suivant ».

Une fois votre projet créé, vous arriverez sur un écran de configuration où vous pourrez tout connecter à WordPress en quelques clics.

Commencez par cliquer sur le bouton « Installer le plugin ». Une nouvelle fenêtre s'ouvrira automatiquement, où il vous suffira de cliquer sur « Installer » puis sur « Activer » pour ajouter le plugin Universally à votre site WordPress.

Ensuite, cliquez sur le bouton « Activer » pour connecter votre clé API. Une autre fenêtre s'ouvrira et liera votre site à Universally pour vous.

Cliquez simplement sur le bouton « Confirmer et connecter », et la fenêtre se fermera d'elle-même.

Une fois votre site connecté, vous pouvez maintenant cliquer sur le bouton « Ajouter des langues » pour choisir dans quelle langue vous souhaitez traduire votre formulaire.

Cela vous mènera à une nouvelle page et affichera une liste déroulante de plus de 110 langues, alors allez-y et choisissez celle que vous voulez.

Pour ce tutoriel, nous sélectionnerons l'espagnol.

Vous pouvez ajouter autant de langues que votre plan le permet, puis cliquer sur « Ajouter une langue » pour enregistrer vos choix.

Universally commencera immédiatement à traduire votre site, y compris le formulaire de contact que vous avez créé avec WPForms.

Maintenant, allez visiter la page où vous avez publié votre formulaire. Universally ajoute automatiquement un sélecteur de langue dans le coin inférieur de votre site, alors cliquez simplement dessus et choisissez l'espagnol.

Comme vous pouvez le voir, Universally 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.

De plus, veuillez garder à l'esprit que le plan gratuit d'Universally est limité à 2 000 mots traduits. Si vous avez besoin de traduire plus de mots que cela, vous devrez acheter un plan payant, qui commence à 7,50 $ par mois.

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

Traductions manuelles des formulaires

Il est très facile de traduire vos formulaires manuellement dans WPForms. Pour modifier les étiquettes de n'importe quel champ de formulaire, il vous suffit de cliquer sur le champ de formulaire dans l'éditeur de formulaire et de remplacer l'étiquette par défaut par la langue dans laquelle vous souhaitez traduire votre formulaire.

Si vous avez besoin d'aide pour la traduction, vous pouvez utiliser des outils de traduction en ligne comme Google Translate pour vous aider.

Après avoir traduit les étiquettes de votre formulaire, vous devez faire quelque chose concernant les sous-étiquettes de nom (les étiquettes sous les champs de formulaire comme « Prénom » et « Nom »). Bien que vous ne puissiez pas modifier les sous-étiquettes de nom dans WPForms, il existe une solution.

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

Bien que nous ne puissions pas traduire les sous-étiquettes, nous pouvons toujours utiliser des espaces réservés personnalisés à la place des sous-étiquettes.

Insérez vos traductions dans les champs de l'espace réservé.

Faites ensuite défiler vers le bas et cliquez sur le bouton bascule Masquer les sous-étiquettes.

Vous devriez également traduire le texte du bouton Envoyer 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 depuis l'éditeur de formulaire.

Dans le volet de droite, entrez simplement votre traduction dans la zone de texte Nom du formulaire.

Faites défiler vers le bas et répétez les mêmes étapes pour les zones de texte Texte du bouton Envoyer et Traitement du bouton Envoyer.

Excellent ! Vous avez maintenant traduit toutes les étiquettes et le texte de votre formulaire. Appuyez 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 apparaît lorsqu'un champ de formulaire requis est laissé vide, ou lorsque quelqu'un saisit des données incorrectes dans un champ de formulaire.

Pour traduire les messages de validation de votre formulaire de contact, quittez votre constructeur de formulaire et accédez à WPForms » Paramètres depuis votre tableau de bord WordPress. Cliquez ensuite sur l'onglet Validation.

À partir de là, tout ce que vous avez à faire est de changer les messages de validation actuels (en anglais par défaut) dans la langue dans laquelle vous traduisez vos formulaires de contact.

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

Maintenant, si vous allez vérifier votre formulaire en saisissant des entrées incorrectes ou en sautant un champ requis, vous verrez apparaître les messages de validation traduits.

Et voilà ! Vous savez maintenant comment traduire vos formulaires de contact WordPress.

Bien que les étapes ci-dessus soient suffisantes pour la plupart des sites, il existe certains cas particuliers où vous devrez peut-être utiliser du code PHP pour traduire certains champs spéciaux.

Nous vous montrerons certains de ces cas dans la section suivante afin que vous puissiez simplement copier-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 spéciaux, expliquons d'abord comment insérer des extraits de code personnalisés sur votre site WordPress de la manière la plus simple possible.

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

Après avoir installé le plugin, survolez Code Snippets dans la barre latérale de votre administration WP et cliquez sur Ajouter un extrait.

Ensuite, appuyez sur le bouton Utiliser l'extrait sous Ajouter votre code personnalisé (Nouvel extrait).

Cela ouvrira la fenêtre de l'éditeur de code.

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

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

Excellent. Maintenant, nous allons examiner quelques scénarios courants où vous pourriez avoir besoin d'utiliser du code PHP pour traduire certaines parties de votre formulaire.

Traduction des messages de validation en plusieurs langues

Considérons un site Web qui contient des formulaires dans différentes langues sur le même site. Bien que vous puissiez facilement modifier les étiquettes manuellement ou avec le plugin Universally, comme nous l'avons montré ci-dessus, les messages de validation ne peuvent pas être modifiés pour des 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 devrez insérer un extrait de code PHP.

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

Suivez les étapes que nous avons décrites ci-dessus pour ajouter un nouveau extrait avec WPCode, puis insérez l'extrait suivant dans l'éditeur de code :

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

Ensuite, faites défiler vers le haut et appuyez sur le bouton bascule pour définir votre extrait de code sur Actif. Cliquez sur le bouton Enregistrer l'extrait.

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

Si vous souhaitez ajouter des traductions pour d'autres langues, vous aurez besoin du code de langue ICL pour cette langue (c'est 'es' pour l'espagnol et 'fr' pour le français). Ajoutez simplement une ligne de code commençant par :

case '[insérez votre code de langue]':

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 entre crochets comme ci-dessous (le type de message de validation spécifique est indiqué par les doubles barres obliques) :

//nombre valide
$strings[ 'val_number' ] = '[Entrez votre traduction]'

Et répétez pour chaque ligne de code.

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

Traduction des sous-libellés du champ de confirmation d'e-mail

Si vous utilisez le champ de confirmation d'e-mail, vous voudrez peut-être traduire le sous-libellé dans une autre langue.

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

Voici le code dont vous aurez besoin :

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

Par exemple, voici comment vous devrez modifier le code ci-dessus pour les sous-libellés espagnols des champs de confirmation d'e-mail :

$properties[ 'inputs' ][ 'primary' ][ 'sublabel' ][ 'value' ] = __( 'Introduisez votre adresse e-mail', 'plugin-domain' );
$properties[ 'inputs' ][ 'secondary' ][ 'sublabel' ][ 'value' ] = __( 'Pour confirmer, réintroduisez votre adresse e-mail ici', 'plugin-domain' );

Le code ci-dessus modifiera le message de validation pour le champ de confirmation d'e-mail globalement sur les formulaires de votre site. Cependant, il est également possible de le modifier uniquement 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 ), remplacez simplement "123" par l'ID réel du formulaire qui vous intéresse.

Vous pouvez trouver l'ID du formulaire en allant dans WPForms » Tous les formulaires et en regardant l'ID dans le shortcode de votre formulaire souhaité.

Autres options de traduction

Si vous souhaitez traduire d'autres champs spécifiques et validations associés à certains types de formulaires uniquement, vous pouvez consulter la documentation pour développeurs suivante :

• Traduction des messages de validation pour le module complémentaire d'inscription d'utilisateur
• Comment traduire le champ de téléchargement de fichier

Ensuite, créez des formulaires accordéons

Une conception en accordéon est un moyen fantastique de faciliter le remplissage d'un long formulaire avec des sections rétractables. 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 création de formulaires WordPress le plus simple. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, veuillez nous suivre sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.