This script should give you an idea of how to do the following thing, and gets the language code from the URL where the form has been added.
- You must get the ID of each form field you wish to translate
- Set the label of each field for each language (including option set field)
- Define the placeholder text for each field (should you wish to use them)
- Translate the submit button in to each language
< script language = "javascript"
type = "text/javascript" >
function setLangLabel() {
// get language code from URL
var lang = location.pathname.split('/')[1];
// define form fields
var formFields = [{
id: '3f746946-34b4-442c-a677-e232cdd2bc40',
label: {
en: 'First Name',
de: 'Vorname',
es: 'Nombre de pila',
fr: 'Prenom'
}
},
{
id: 'e1dfc514-f301-4cb2-855a-4c8fa8331207',
label: {
en: 'Last Name',
de: 'Nachname',
es: 'Apellido',
fr: 'Nom de famille'
}
},
{
id: '7f685ebb-7c54-4cff-a1bc-772562d25c38',
label: {
en: 'Email Address',
de: 'Email Address',
es: 'Email Address',
fr: 'Email Address'
}
},
{
id: '358bf879-463e-ec11-8c63-000d3add2274',
label: {
en: 'How did you hear about us?',
de: 'Geschlecht',
es: 'Género',
fr: 'Comment avez-vous entendu parler de nous ?'
},
options: {
en: ['Search Engine', 'Recommended', 'Social Media', 'Event', 'Other'],
de: ['Suchmaschine', 'Recommended', 'Sozialen Medien', 'Fall','Andere'],
es: ['Buscador', 'Recomendado', 'Social Media','Evento', 'Otro'],
fr: ['Moteur de recherche', 'Recommandation', 'Réseaux sociaux', 'Évènement', 'Autre']
}
}
];
// define placeholder texts for each field
var placeholderTexts = [{
id: '3f746946-34b4-442c-a677-e232cdd2bc40',
text: {
en: 'Enter your first name',
de: 'Geben Sie Ihren Vornamen ein',
es: 'Ingrese su nombre',
fr: 'Entrez votre prénom'
}
},
{
id: 'e1dfc514-f301-4cb2-855a-4c8fa8331207',
text: {
en: 'Enter your last name',
de: 'Geben Sie Ihren Nachnamen ein',
es: 'Ingrese su apellido',
fr: 'Entrez votre nom de famille'
}
},
{
id: '7f685ebb-7c54-4cff-a1bc-772562d25c38',
text: {
en: 'Enter your email address',
de: 'Geben Sie Ihre E-Mail-Adresse ein',
es: 'Ingrese su dirección de correo electrónico',
fr: 'Entrez votre adresse e-mail'
}
}
];
// update labels for each field
formFields.forEach(function(field) {
var element = document.getElementById(field.id);
var labels = document.querySelectorAll('label[for="' + field.id +
'"]');
labels.forEach(function(label) {
label.textContent = field.label[lang] || field.label.en;
});
if (field.options) {
var options = element.querySelectorAll('option');
options.forEach(function(option, index) {
option.textContent = field.options[lang][index] || field
.options.en[index];
option.selected =
false; // Set selected to false for all options
});
}
});
// update placeholder text for each field
placeholderTexts.forEach(function(field) {
var element = document.getElementById(field.id);
element.placeholder = field.text[lang] || field.text.en;
});
// update submit button label
var submitButton = document.querySelector('button[type="submit"]');
submitButton.textContent = lang === 'en' ? 'Submit' : lang === 'de' ?
'Einreichen' : lang === 'es' ? 'Enviar' : lang === 'fr' ? 'Envoyer' : 'Submit';
}
MsCrmMkt.MsCrmFormLoader.on('afterFormLoad', setLangLabel);
</script>
