Form Translation Next Steps

[lianef]

function unchecked() {
  var opt = document.getElementById("Opt_In__c");
  opt.checked = false;
  var check = opt.parentElement.parentElement.parentElement.parentElement;
  check.style.display = "block";
  var text =
    document.getElementById("optin text").parentElement.parentElement
      .parentElement.parentElement;
  text.style.display = "none";
}
function checked() {
  var opt = document.getElementById("Opt_In__c");
  opt.checked = true;
  var check = opt.parentElement.parentElement.parentElement.parentElement;
  check.style.display = "block";
  var text =
    document.getElementById("optin text").parentElement.parentElement
      .parentElement.parentElement;
  text.style.display = "none";
}
function hide() {
  var opt = document.getElementById("Opt_In__c");
  opt.checked = true;
  var check = opt.parentElement.parentElement.parentElement.parentElement;
  check.style.display = "none";
  var text =
    document.getElementById("optin text").parentElement.parentElement
      .parentElement.parentElement;
  text.style.display = "block";
}
// <![CDATA[
//Define all translations categorised by language, then field.
//Note that the last value in each language object does not have a
//trailing comma. The same after/between language objects.
//The label names (e.g. 'FirstName') must match the HTML ID of the field.
(function () {
    var translations = {
        "en":{
           "FirstName":"First Name:",
           "LastName":"Last Name:",
           "Email":"Email Address:",
           "Phone":"Phone Number:",
           "Company":"Business Name:",
           "User_Provided_Company_Name__c":"Business Name:",
           "Title":"Job Title:",
           "CountryCode":"Country:",
           "StateCode":"Your State?",
           "City":"City:",
           "OptIn":"Opt In:",
           "Submit":"Submit",
        },
        "en2":{
           "FirstName":"First Name2:",
           "LastName":"Last Name2:",
           "Email":"Email Address2:",
           "Phone":"Phone Number2:",
           "Company":"Business Name2:",
           "Title":"Job Title2:",
           "CountryCode":"Country2:",
           "StateCode":"Your State2?",
           "City":"City2:",
           "OptIn":"Opt In2:",
           "Submit":"Submit2",
        },
        "en3":{
           "FirstName":"First Name3:",
           "LastName":"Last Name3:",
           "Email":"Email Address3:",
           "Phone":"Phone Number3:",
           "Company":"Business Name3:",
           "Title":"Job Title3:",
           "CountryCode":"Country3:",
           "StateCode":"Your State3?",
           "City":"City3:",
           "OptIn":"Opt In3:",
           "Submit":"Submit3",
       }
     };

  //Script that waits for the form to load. This version ONLY WORKS ON MARKETO LPs.
  //On your company website, you need another script. See http://developers.marketo.com/javascript-api/forms/
  MktoForms2.onFormRender(function (form) {
    var url = new URL(window.location.href);
    var privacy = url.searchParams.get("pref");
    var opt = document.getElementById("Opt_In__c");
    var check = opt.parentElement.parentElement.parentElement.parentElement;
    var text =
      document.getElementById("optin text").parentElement.parentElement
        .parentElement.parentElement;
    text.style.display = "none";
    check.style.display = "none";
    if (privacy === "K" || privacy === "N") {
      hide();
    } else if (privacy === "P") {
      checked();
    } else if (privacy === "U") {
      unchecked();
    } else {
      var select = document.getElementById("CountryCode");
      select.addEventListener("change", (e) => {
        var hideCountries = [
          "MO",
          "IN",
          "BO",
          "DM",
          "DO",
          "EC",
          "SV",
          "HN",
          "JM",
          "PY",
          "TT",
          "US",
          "BH",
          "BW",
          "BI",
          "CM",
          "CF",
          "TD",
          "CG",
          "CI",
          "GQ",
          "ER",
          "GA",
          "GM",
          "GN",
          "KE",
          "LS",
          "LY",
          "MW",
          "ML",
          "MR",
          "NE",
          "OM",
          "QA",
          "RW",
          "SC",
          "TZ",
          "TG",
          "UG",
          "YE",
          "ZM",
          "ZW",
        ];
        var precheckedCountries = [
          "AF",
          "AS",
          "BD",
          "BT",
          "BN",
          "KH",
          "CX",
          "CC",
          "CK",
          "FJ",
          "PF",
          "GU",
          "HK",
          "ID",
          "KI",
          "LA",
          "MH",
          "FM",
          "MM",
          "NR",
          "NP",
          "NC",
          "NU",
          "NF",
          "MP",
          "PW",
          "PG",
          "PN",
          "WS",
          "SB",
          "LK",
          "TH",
          "TL",
          "TK",
          "TO",
          "TV",
          "UM",
          "VU",
          "WF",
          "AX",
          "DZ",
          "AD",
        ];
        var uncheckedCountries = [
          "AU",
          "CN",
          "JP",
          "MY",
          "MN",
          "NZ",
          "PK",
          "PH",
          "SG",
          "KR",
          "TW",
          "VN",
          "AR",
          "BR",
          "CO",
          "CR",
          "PE",
          "UY",
          "VE",
          "CA",
          "AL",
          "AO",
          "AM",
          "AT",
          "AZ",
          "BY",
          "BE",
          "BJ",
          "BA",
          "BG",
          "BF",
          "HR",
          "CY",
          "CZ",
          "DK",
          "EE",
          "FI",
          "FR",
          "GE",
          "DE",
          "GH",
          "GR",
        ];
        if (hideCountries.includes(select.value)) {
          hide();
        } else if (uncheckedCountries.includes(select.value)) {
          unchecked();
        } else if (precheckedCountries.includes(select.value)) {
          checked();
        }
      });
    }
    //Form language. This should change automatically by language version. Change between fr, de and en to see difference

    var submitText = "Submit";
    //var explicitText = translations['en']['Explicit_Opt_in_text']; //default explicitText value

    //Go through all the form label translations in the defined language
    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 Checkbox value
    if (document.getElementsByName("Explicit_Opt_in__c").length) {
      var elements = document.getElementsByName("Explicit_Opt_in__c");
      var id = elements[0].getAttribute("id");
      $("label[for='" + id + "']").text(
        translations[language]["Explicit_Opt_in_text"]
      );
    }

    //Translate Submit Text
    submitText = translations[language]["Submit"];
    form.getFormElem().find("button.mktoButton").html(submitText);
  });

  // ]]>
})();

[lianef]

• We are switching to using global forms but need for them to be localized per program so we had thought this would be a helpful way to do so with the program token indicating the language for the program. We've added to <script>var language = "{{my.program_language}}"</script> to indicate the language choice.
• I am trying to figure out how to get the picklist value translations into the code like we did with Submit button at the bottom.
• Would you still recommend not using Javascript for this?

@SanfordWhiteman wasn't sure if I was supposed to tag you or not so I just did. thank you 🙂