Form Translation Next Steps

[Michelle_Stunka]

I'm in the process of setting up forms to replace many current forms on our site. Each form has to be translated into at least 5 different languages so I'm trying to handle that with Sanford's translation code referenced on this thread: https://nation.marketo.com/message/94034#comment-94034

It's working great but I'm stumped on how to add additional fields to the translation map:

https://www.m-files.com/en/marketo-test-form

<div id="translateMap"><span style="display: none;">

{

"en": {

"LastName": {

"placeholder": "Testing-Name",

"submit": "Go Home"

}

},

"fr": {

"LastName": {

"placeholder": "Testing-Name",

"submit": "Go Bonjour"

}

}

}

</span></div>

Any ideas on how I can get the full form setup in this map?

[SanfordWhiteman · Accepted solution]

Each language is an object, and each field name is a property of that object (and is also an object itself).

So you extend it like so:

{ 
  "en": { 
    "LastName": { 
      "placeholder": "Testing-Name", 
      "submit": "Go Home"
    },
    "FirstName": { 
      "placeholder": "First"
    }
  },
  "fr": { 
    "LastName": { 
      "placeholder": "Testing-Name", 
      "submit": "Go Bonjour" 
    },
    "FirstName": { 
      "placeholder": "Prénom"
    }
  }
}

The admittedly strange thing about this format, which I wouldn't do again but apparently was lazy about a couple of years ago, is that "submit" should've been a property right on the language. But it's not, so you have to use it as shown.

Please use the Advanced Editor's syntax highlighter in future when posting code:

[Michelle_Stunka]

Thanks Sanford! I tried something similar but when I add in what you sent, it stops working altogether: https://www.m-files.com/en/marketo-test-form (code is hidden in the privacy policy text)

That's why I was getting completely stumped why it would work for one field but not multiple.

[Michelle_Stunka]

Nevermind! I missed a curly bracket at the very end. Amazing how one character can make all the difference!

Thanks for your help!

[Ricardo_Bardaro]

Some of my fields are drop downs and I would like to also translate the  drop down options as well. 

Do you mind posting an example of the json for when you the field is a drop down with the drop down options? 

Thanks for posting this solution, this has all been very helpful so far. 

[SanfordWhiteman]

At the point that you're translating option values as well, you need to move to something heavier hitting: the live form descriptor management as a demoed here and tipped off here.

[Ricardo_Bardaro]

Thanks for those links. 

I got everything working except for one thing. Have you found a way to translate the Submit Button?

Thanks again for all the help. 

[SanfordWhiteman]

For that you need to patch the core (top-level) parts of the form descriptor. I added demo code to the same CodePen.

[lianef]

Hi @SanfordWhiteman, 

I am trying to use picklist values (option value) in our code that we are developing to translate form fields via a program token, it works great for form fields, however I'm unsure of the setup for the picklist values and div ids for the rich text portions.An important thing to note is we don't use munchkin code.  Any guidance here would be appreciated. Thank you

EX:

(function () {

var translations = {

"en":{

"FirstName":"First Name:",

"LastName":"Last Name:",

"Email":"Email Address:",

"Phone":"Phone Number:",

"Submit":"Submit",

for (var labelTranslation in translations[language]) {

//Identify each element and change placeholder, but only try to replace a placeholder, if the field exists

if ($("label[for='" + labelTranslation + "']").length) {

$("label[for='" + labelTranslation + "']").text(

translations[language][labelTranslation]

);

}

}

//Translate Submit Text

submitText = translations[language]["Submit"];

form.getFormElem().find("button.mktoButton").html(submitText);

});

// ]]>

})();

[SanfordWhiteman]

Hi,

• Please edit your post to use the syntax highlighter (Insert/Edit code sample on the toolbar) so the code is readable.
• Munchkin isn’t relevant at all to how forms are rendered.
• Also not sure what you’re asking. It looks like you’re trying to do translations in the live HTML, i.e. after the form is initially rendered. I don’t recommend doing it that way. Instead, translate the form descriptor object, as noted above.