How to translate and design my MailChimp form?

Once you have copied and pasted the HTML code of your signup form into the module, and this, for all languages, you can:

 

Translation of the texts

The translation of the texts of a Mailchimp signup form that is embedded in a site is not done through the Mailchimp translation tool, as explained in their official documentation.

You must do it directly into the HTML code for each of the languages set on your site.

 

Translation of the mandatory fields infication and of the label of the form submit button:

When you configured your form in Mailchimp's "Form Builder", you were able to write field labels in a given language (for example, French). However, Mailchimp does not give the possibility from the "Form Builder" or from the "Embedded Form" section to translate the label of the form submit button or the text indicating that the fields marked with an asterisk are required:

 

 

Here is how to do it through the module:

Return into the "Newsletter sign-up forms" tab, in the "Mailchimp sign-up form" sub-tab, at the place where you have copied the HTML code of your form. Select the language in which you want to translate the form (in our example it's in french):

 

 

Directly in the window where the HTML code was copied (or, even better, after copying the code into an editor as "Notepad ++" for example) search for English strings that have not been translated, using the CTRL+F key combination (or its equivalent).

For the "indicated required" string:

 

 

Once you have located the string in the code, be careful: do not touch the text in class="...". This text must not be modified. The text you need to translate is the one that is "alone" between tags, just before the closing tag </div>:

 

 

The text has been translated by "Champs obligatoires" (in french here) but you can put the translation you want.

 

For the "Subscribe" button label;

Locate the following string (be careful it must be exactly the one framed below):

 

 

Do not touch the words "subscribe" written in lowercase in the name and id parameters. Replace the word "Subscribe" (which has an initial in upper case) that is in the value="..." parameter with its translation (for example "S'abonner" here in french, but you can put the text you want):

 

 

Save and go to see the result on your site.

 

Do exactly the same steps for each language (don't forget that HTML code management is independent for each language, which therefore allows you to have different translations): select the language from the drop-down menu next to the HTML code window, locate the English strings and translate them. Don't forget to save each time.

 

Translatation of form success and error messages:

Some messages only appear in the event of an error or when the form is confirmed to have been sent. These messages will appear by default in English, unless translate them by following the procedure below:

Example of error messages:

 

 

To translate these messages:

In the window where the form HTML code was copied in the module, scroll down to the bottom and locate the closed tag </script>. Move just before and make several line breaks

Copy the piece of code given here.

Paste it before the closed tag </script> in the blank you left, as below:

 

 

Once it's done, translate the sentences between quotes into the appropriate language (the one you have selected in the drop-down menu next to the code window):

 

 

Do not forget to save and go to see the result on your site.

Do exactly the same steps for each language (don't forget that HTML code management is independent for each language, which therefore allows you to have different translations): select the language in the drop-down menu next to the form HTML code window, copy the piece of code provided here and make your translations. Do not forget to save each time.

 

For any other information regarding the translation of an embedded Mailchimp form, click here.

 

Modify the form design

The HTML code provided by Mailchimp for integration on your website is extremely basic. If you want to change the design, add an image, etc... you have to modify the code as you want. If you do not have any technical skills, we recommend that you contact your webmaster or agency.

Here is the link to the official Mailchimp documentation that can help you customize your form: click here.

 

Here we will guide you to add an image to your form. If you want to display it in a pop-up, know that you have at your disposal an option that allows you not to have to modify the code yourself. Click here to find out more.

But if you want to display it on a dedicated page or in a block integrated into the footer, here is how to do it:

 

First, you have to upload your image in your Mailchimp online account. Log in, go to "Content Studio" -> "My files" and click "Upload":

 

 

 

Once your image is uploaded, click on it to select it and click the small arrow next to "View details". Select "Copy URL":

 

 

Then, return in the module configuration, in the "Newsletter sign-up forms" -> "Mailchimp sign-up form" tab.

To add an image at the top of your form, move after the <"form action="...> tag:

 

 

And paste the link of the image you just loaded on Mailchimp.

For example:

 

 

You can adjust the size of your form to the width of your image, by adding (if it is not already present) the width parameter and changing its value. For example, if your image is 640px, specify a width of 680px for example (to take into account margins) by writing: width:680px; as below:

 

 

 

You can add spaces between the image and the form title by adding as many <p>&nbsp;</p> under the image tag as you want:

 

 

 

Remember that the form code is language-specific. You must make the above changes in each of the languages installed on your site (by clicking on the drop-down menu next to the HTML code window) so that the image appears in all languages.

For any other changes to the design of your form, please contact your webmaster.