Comment traduire et personnaliser mon formulaire MailChimp ?

Une fois que vous avez copié et collé le code HTML de votre formulaire d'inscription dans le module, et ceci pour toutes les langues, vous allez pouvoir :

 

Traduction des textes

La traduction des textes d'un formulaire d'inscription Mailchimp intégré à un site web ne se fait pas par l'intermédiaire de l'outil de traduction de Mailchimp, comme expliqué dans leur documentation officielle

Vous devez la faire directement dans le code HTML pour chacune des langues installées sur votre site.

 

Traduction de l'indication champs obligatoires et du label du bouton d'envoi du formulaire :

Lorsque vous avez configuré votre formulaire dans le "Form Builder" de Mailchimp, vous avez pu rédiger libellés de champs dans une langue donnée (par exemple, le français). Mailchimp ne donne cependant pas la possibilité depuis le "Form Builder" ou depuis la section "Embedded Form" de traduire le label du bouton d'envoi du formulaire ou encore le texte indiquant que les champs marqués d'un asterisque sont obligatoires :

 

 

Voici comment faire pour les traduire à travers le module :

Retournez dans l'onglet "Formulaires d'inscription newsletter", dans le sous onglet "Formulaire d'inscription Mailchimp", à l'endroit où vous avez copié le code HTML de votre formulaire. Sélectionnez la langue dans laquelle vous souhaitez traduire le formualaire (dans notre exemple ce sera fr) :

 

 

Directement dans la fenêtre où le code HTML a été copié (ou, mieux, après avoir copié le code dans un éditeur de type "Notepad ++" par exemple) recherchez les chaînes anglaises qui n'ont pas été traduites, grâce à la combinaison de touches CTRL+F (ou son équivalent).

Pour la chaîne "indicated required":

 

 

Lorsque vous avez repéré la chaîne dans le code, attention: ne touchez pas au texte qui se trouve dans class="...". Ce texte ne doit pas être modifié. Le texte que vous devez traduire est celui se trouvant "tout seul" entre des balises, juste avant la balise fermante </div> :

 

 

Le texte a été traduit par "Champs obligatoires" ici mais vous pouvez mettre le texte que vous voulez.

 

Pour le label du bouton "Subscribe" :

Repérez la chaîne suivante (attention ce doit être exactement celle encadrée ci-dessous) :

 

 

Ne touchez pas aux mots "subscribe" écrits en minuscules dans les paramètres name et id. Remplacez le mot "Subscribe" (qui a une initale en majuscule) qui se trouve dans le paramètre value="..." par sa traduction (par exemple "S'abonner", mais vous pouvez mettre le texte que vous voulez) :

 

 

Enregistrez et allez voir ce que cela donne sur votre site.

 

Faîtes exactement les même étapes pour chaque langue (n'oubliez pas que la gestion du code HTML est indépendante pour chacune des langues ce qui vous permet justement d'avoir des traductions différentes) : sélectionnez la langue dans le menu déroulant à côté de la fenêtre du code HTML du formulaire,repérez les chaînes anglaises et traduisez-les. N'oubliez pas d'enregistrer à chaque fois.

 

Traduction des messages d'erreur et de confirmation du formulaire :

Certains messages n'apparaissent qu'en cas d'erreur ou lors de a confirmation d'envoi du formulaire. Ces messages vont s'afficher par défaut en anglais, à moins que vous ne les traduisiez en suivant la procédure suivante :

Exemple de messages d'erreur :

 

 

Pour traduire ces messages :

 

 

Une fois que c'est fait, traduisez dans la langue adéquate (celle que vous avez sélectionnée dans le menu déroulant à côté de la fenêtre du code) les phrases en anglais se trouvant entre guillemets :

 

 

Exemple de traduction française :

 

 

N'oubliez pas d'enregistrer et allez voir le résultat sur votre site.

Faîtes exactement les même étapes pour chaque langue (n'oubliez pas que la gestion du code HTML est indépendante pour chacune des langues ce qui vous permet justement d'avoir des traductions différentes) : sélectionnez la langue dans le menu déroulant à côté de la fenêtre du code HTML du formulaire, copiez le morceau de code fourni ici et faites vos traductions. N'oubliez pas d'enregistrer à chaque fois.

 

Pour toute autre information concernant la traduction d'un formulaire Mailchimp intégré, cliquez ici.

 

Changer le design du formulaire

Le code HTML fourni par Mailchimp pour intégration sur votre site internet est extrêmement simple. Si vous souhaitez changer le design, ajouter une image, etc... vous devez modifier le code à votre convenance. Si vous n'avez pas de compétences techniques, nous vous conseillons de faire appel à votre webmaster ou à votre agence. 

Voici le lien vers la documentation officielle Mailchimp qui peut vous aider à customiser votre formulaire : cliquez ici.

 

Ici nous allons vous guider pour ajouter une image dans votre formulaire. Si vous voulez l'afficher dans une pop-up sachez que vous avez à votre disposition une option qui vous permet de ne pas avoir à modifier vous même le code. Rendez-vous ici pour en savoir plus.

Si par contre vous souhaitez l'afficher sur une page dédiée ou dans un bloc intégré au footer, voici comment faire :

 

Tout d'abord il faut que vous téléchargiez votre image dans votre compte en ligne Mailchimp. Connectez-vous, allez dans "Content Studio" -> "My Files" et cliquez sur "Upload" :

 

 

Une fois votre image chargée, cliquez dessus pour la sélectionner et appuyez sur la petite flèche à côté de "View details". Sélectionnez "Copy URL" :

 

 

Ensuite retournez dans la configuration du module, dans l'onglet "Formulaires d'inscription newsletter" -> "Formulaire d'inscription Mailchimp".

Pour ajouter une image en haut de votre formulaire, placez vous sous la balise <"form action="....> :

 

 

Et collez le lien de l'image que vous avez chargé sur Mailchimp.

Par exemple :

 

 

Vous pouvez adapter la taille de votre formulaire à la largeur de votre image, en ajoutant (s'il n'est pas déjà présent) le paramètre width et en changeant sa valeur. Par exemple, si votre image fait 640px, indiquez une largeur de 680px par exemple (pour prendre en compte les marges) en écrivant : width:680px; comme ceci :

 

 

 

Vous pouvez rajouter des espaces entre l'image et le titre du formulaire en ajoutant autant de <p>&nbsp;</p> sous la balise image que vous le souhaitez :

 

 

 

N'oubliez pas que le code du formulaire est spécifique à une langue. Vous devez faire les modifications ci-dessus dans chacune des langues intallées sur votre site (en cliquant sur le menu déroulant à côté de la fenêtre du code HTML) afin que l'image apparaisse dans toutes les langues.

Pour toute autre modification du design de votre formulaire, veuillez prendre contact avec votre webmaster.