You may use below steps to achieve language translation for custom form which is used in SharePoint multilingual site.
Create List named as: Translations
Above list contains information of translation for different language. I have used language pack Hindi for
Language Code: 1081 for SharePoint Site.
Columns detail for Translation list:
Title: Label code text. You can compare text by Title column to assign value +
TextToDisplay : English Language Text
TextToDisplay2: Hindi Or Other Language Text
Assign Language Translation Value to form control as shown in below code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css">
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css">
<script type="text/javascript" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>
<title>Responsive Test</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
LaunchResponsivePage();
if (_spPageContextInfo.currentLanguage == 1033) {
alert("User Selected Language :English == Language Code" + _spPageContextInfo.currentLanguage);
} else {
alert("User Selected Language : Hindi == Language Code" + _spPageContextInfo.currentLanguage);
}
/********************************GEt Value from Translation List and Set Value to Controls Code Start ****************************************/
var listName = "Translations";
var url = _spPageContextInfo.webAbsoluteUrl;
var condition = "$select=Title,TextToDisplay,TextToDisplay2'";
getListItems(listName, url, condition, function (data) {
var items = data.d.results;
for (var i = 0; i < items.length; i++) {
if (_spPageContextInfo.currentLanguage == 1033)
{
if (items[i].Title == "Name") { $('#lname').html(items[i].TextToDisplay);}
if (items[i].Title == "City") { $('#lcity').html(items[i].TextToDisplay);}
if (items[i].Title == "Choose a programming language") { $('#lchooseprogram').html(items[i].TextToDisplay);}
if (items[i].Title == "Send me promotional emails from Microsoft") { $('#lpromotional').html(items[i].TextToDisplay);}
if (items[i].Title == "Male") { $('#lmale').html(items[i].TextToDisplay);}
if (items[i].Title == "Female") { $('#lfemale').html(items[i].TextToDisplay);}
}
else
{
if (items[i].Title == "Name") { $('#lname').html(items[i].TextToDisplay2);}
if (items[i].Title == "City") { $('#lcity').html(items[i].TextToDisplay2);}
if (items[i].Title == "Choose a programming language") { $('#lchooseprogram').html(items[i].TextToDisplay2);}
if (items[i].Title == "Send me promotional emails from Microsoft") { $('#lpromotional').html(items[i].TextToDisplay2);}
if (items[i].Title == "Male") { $('#lmale').html(items[i].TextToDisplay2);}
if (items[i].Title == "Female") { $('#lfemale').html(items[i].TextToDisplay2);}
}
}
}, function (data) {
alert("Ooops, an error occured. Please try again");
});
/********************************GEt Value from Translation List and Set Value to Controls Code End ****************************************/
});
</script>
<div id="ResponsiveTestDiv">
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm12">
<div class="ms-fontSize-xl"> SharePoint Language Translation Form </div>
</div>
</div>
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm12">
<div class="ms-TextField">
<label id="lname" class="ms-Label is-required">Name</label>
<input id="txtName" class="ms-TextField-field is-required" type="text" value="" placeholder=""> </div>
</div>
</div>
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm12">
<div class="ms-TextField">
<label id="lcity" class="ms-Label">City</label>
<input id="txtCity" class="ms-TextField-field" type="text" value="" placeholder=""> </div>
</div>
</div>
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm12">
<div class="ms-Dropdown" tabindex="0">
<label class="ms-Label" id="lchooseprogram">Choose a programming language</label>
<i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
<select id="dropdownProg" class="ms-Dropdown-select">
<option>Choose a programming language</option>
<option>Javascript</option>
<option>C#</option>
<option>F#</option>
<option>Python</option>
<option>Other</option>
</select>
</div>
</div>
</div>
<div class="ms-ChoiceFieldGroup" id="choicefieldgroup" role="radiogroup">
<div class="ms-ChoiceFieldGroup-title">
<label class="ms-Label is-required" id="lgender">Gender</label>
</div>
<ul class="ms-ChoiceFieldGroup-list">
<li class="ms-RadioButton">
<input tabindex="-1" type="radio" class="ms-RadioButton-input">
<label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
<span class="ms-Label">Option 1</span>
</label>
</li>
<li class="ms-RadioButton">
<input tabindex="-1" type="radio" class="ms-RadioButton-input">
<label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
<span class="ms-Label">Option 2</span>
</label>
</li>
</ul>
</div>
<div class="ms-CheckBox">
<input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
<label role="checkbox" class="ms-CheckBox-field" tabindex="0" name="checkboxa">
<span class="ms-Label" id="lpromotional">Send me promotional emails from Microsoft</span>
</label>
</div>
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm6">
<button type="button" id="buttonSave" class="ms-Button ms-Button--primary">
<span class="ms-Button-label">Save</span>
</button>
<button id="buttonCancel" type="button" class="ms-Button">
<span class="ms-Button-label">Cancel</span>
</button>
</div>
</div>
</div>
</div>
</body>
<script>
function LaunchResponsivePage() {
MakeResponsive();
InitializeComponents();
AddEventHandlers();
}
// READ operation
// listName: The name of the list you want to get items from
// siteurl: The url of the site that the list is in.
// success: The function to execute if the call is sucesfull
// failure: The function to execute if the call fails
function getListItems(listName, siteurl, condition, success, failure) {
$.ajax({
url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items?" + condition,
method: "GET",
async: false,
headers: {
"Accept": "application/json; odata=verbose"
},
success: function (data) {
success(data);
},
error: function (data) {
failure(data);
}
});
}
function MakeResponsive() {
$("#s4-ribbonrow").hide(); //hide the ribbon row
$("#s4-workspace").children().hide(); //hide all elements in workspace
var div = $("#ResponsiveTestDiv"); //move the div to make it visible
$("#s4-workspace").append(div); //add the div after s4-workspace
}
function InitializeComponents() {
var TextFieldElements = document.querySelectorAll(".ms-TextField");
for (var i = 0; i < TextFieldElements.length; i++) {
new fabric['TextField'](TextFieldElements[i]);
}
var ChoiceFieldGroupElements = document.querySelectorAll(".ms-ChoiceFieldGroup");
for (var i = 0; i < ChoiceFieldGroupElements.length; i++) {
new fabric['ChoiceFieldGroup'](ChoiceFieldGroupElements[i]);
}
var CheckBoxElements = document.querySelectorAll(".ms-CheckBox");
for (var i = 0; i < CheckBoxElements.length; i++) {
new fabric['CheckBox'](CheckBoxElements[i]);
}
var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
for (var i = 0; i < DropdownHTMLElements.length; ++i) {
var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i]);
}
}
function AddEventHandlers() {
$("#buttonSave").click(function () {
var output = "Hello " + $("#txtName").val();
alert(output);
return false;
});
$("#buttonCancel").click(function () {
alert("Cancelled");
return false
});
}
</script>
</html>
Once we implement above code to form it will appear as below for Hindi and English language site.
Form in Hindi Language Site
Form in English Language Site
Nilesh Rathod 