Forms Language Bar
Contents
1 Overview
It is possible within a form to include language changing options. This article demonstrates how that can be built.
2 Initial form
Firstly build a form. This can be done numerous ways. For this example a simple one was built with the following questions in the following order.
Main Menu > Form Management > Form Primary Management > Form - Create
- Name: Language Demonstration
- Type: Blended
Then
- Review the build
- Edit the first section group and change the name to "Welcome to the Language Demonstration form"
- Add a generic area
- Add a Complex - Title and give it the name "Can I ask your name please?"
- Add a Simple - Text Box and give it the name "Can I get a phone number please?"
- Add a Simple - List Menu and give it the name "What is your favourite colour?"
- Add three options to the drop down list "Red" "Green" and "Blue"
- Edit the Vertical Delivery Options and after the default "How can I help?" add "
" - Edit the title block and add to the notes ""
- Edit the phone number question and add to the notes ""
- Edit the list menu quetsion and add to the notes ""
This sets up all the elements which are going to be managed. The form should look like
3 Building a bar
Next bit is to build a bar which will represent the language changing buttons.
Each language has its own button. Each button has a unique name. We style it with bxp default styling. We set the width of the button so the total of all buttons is slightly less than 100% so that all the buttons fit in one row. We then add a JavaScript function which will change the language appropriately.
The below example puts each button on a separate line for clarity.
<div style="width:100%;text-align:center;">
<input type="button" name="btnEnglish" id="btnEnglish" value="English" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('EN');" />
<input type="button" name="btnIrish" id="btnIrish" value="Gaelige" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('IE');" />
<input type="button" name="btnFrench" id="btnFrench" value="Français" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('FR');" />
<input type="button" name="btnSpanish" id="btnSpanish" value="Español" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('ES');" />
<input type="button" name="btnGerman" id="btnGerman" value="Deutsche" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('DE');" />
<input type="button" name="btnPortugese" id="btnPortugese" value="Portugueses" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('PT');" />
<input type="button" name="btnPolish" id="btnPolish" value="Polskie" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('PL');" />
</div>
In the system, this is just one long continuous string. Put it into the "notes" of the Language Bar generic area.
<div style="text-align:center;"><input type="button" name="btnEnglish" id="btnEnglish" value="English" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('EN');" /><input type="button" name="btnIrish" id="btnIrish" value="Gaelige" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('IE');" /><input type="button" name="btnFrench" id="btnFrench" value="Français" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('FR');" /><input type="button" name="btnSpanish" id="btnSpanish" value="Español" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('ES');" /><input type="button" name="btnGerman" id="btnGerman" value="Deutsche" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('DE');" /><input type="button" name="btnPortugese" id="btnPortugese" value="Portugueses" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('PT');" /><input type="button" name="btnPolish" id="btnPolish" value="Polskie" class="cssMaster_Button" style="width:14%;" onclick="fn_LanguageChange('PL');" /></div>
With the buttons in place the form should look like.
If you want to make it prettier, you can use flag buttons instead. These images came from the team at http://www.icons-land.com. The images also get a border = 0 so that the link doesn't put an extra border around the image.
<div style="width:100%;text-align:center;">
<a href="#" onclick="fn_LanguageChange('US');" title="English" ><img src="https://ww3.allnone.ie/images/flags/US.png" height="64" width="64" border="0" alt="English" /></a>
<a href="#" onclick="fn_LanguageChange('IE');" title="Gaelige" ><img src="https://ww3.allnone.ie/images/flags/IE.png" height="64" width="64" border="0" alt="Gaelige" /></a>
<a href="#" onclick="fn_LanguageChange('FR');" title="Français" ><img src="https://ww3.allnone.ie/images/flags/FR.png" height="64" width="64" border="0" alt="Français" /></a>
<a href="#" onclick="fn_LanguageChange('ES');" title="Español" ><img src="https://ww3.allnone.ie/images/flags/ES.png" height="64" width="64" border="0" alt="Español" /></a>
<a href="#" onclick="fn_LanguageChange('DE');" title="Deutsche" ><img src="https://ww3.allnone.ie/images/flags/DE.png" height="64" width="64" border="0" alt="Deutsche" /></a>
<a href="#" onclick="fn_LanguageChange('PT');" title="Portugueses" ><img src="https://ww3.allnone.ie/images/flags/PT.png" height="64" width="64" border="0" alt="Portugueses" /></a>
<a href="#" onclick="fn_LanguageChange('PL');" title="Polskie" ><img src="https://ww3.allnone.ie/images/flags/PL.png" height="64" width="64" border="0" alt="Polskie" /></a>
</div>It should end up looking like
4 The language function
The next part is to put in place the JavaScript function to do the languages. This goes into the Vertical Delivery Options, in the Opening Script, just under the div you added earlier.
<script type="text/javascript" language="javascript">
function fn_LanguageChange(strLanguage){
//List out all the items to be changed
var strOpening = document.getElementById('strOpening');
var strName = document.getElementById('strName');
var strNumber = document.getElementById('strNumber');
var strColour = document.getElementById('strColour');
//Now we adapt the strings for each language
if (strLanguage == 'US'){
strOpening.innerHTML = 'a';
strName.innerHTML = 'a';
strNumber.innerHTML = 'a';
strColour.innerHTML = 'a';
}
else if (strLanguage == 'IE'){
strOpening.innerHTML = 'b';
strName.innerHTML = 'b';
strNumber.innerHTML = 'b';
strColour.innerHTML = 'b';
}
else if (strLanguage == 'FR'){
strOpening.innerHTML = 'c';
strName.innerHTML = 'c';
strNumber.innerHTML = 'c';
strColour.innerHTML = 'c';
}
else if (strLanguage == 'ES'){
strOpening.innerHTML = 'd';
strName.innerHTML = 'd';
strNumber.innerHTML = 'd';
strColour.innerHTML = 'd';
}
else if (strLanguage == 'DE'){
strOpening.innerHTML = 'e';
strName.innerHTML = 'e';
strNumber.innerHTML = 'e';
strColour.innerHTML = 'e';
}
else if (strLanguage == 'PT'){
strOpening.innerHTML = 'f';
strName.innerHTML = 'f';
strNumber.innerHTML = 'f';
strColour.innerHTML = 'f';
}
else if (strLanguage == 'PL'){
strOpening.innerHTML = 'g';
strName.innerHTML = 'g';
strNumber.innerHTML = 'g';
strColour.innerHTML = 'g';
}
}
</script>
Now if you click the different buttons you get the following type screen.