Add Multi-Language Support Using Google Translate API

Make your forms accessible across the globe by allowing your form users to translate the form to their preferred language. The Google Translate API offers a simple script that you can add to your Formstack forms to be able to add a Google Translate Language picklist and button to your form or webpage. 
Please note: The Google Translate API is unsupported and does not receive updates from Google.

 

Below is a sample of the Google Translate script that you can leverage to allow multi-language support to your form:

<div id="google_translate_element"></div>

<script type="text/javascript">

function googleTranslateElementInit() {

  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');

}

</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Although Formstack for Salesforce offers General Fields which support HTML and the div portion of the above script, it does not allow you to directly use script tags within the form builder in Salesforce. You won’t be able to copy and paste this embed script as it is into the form, but we will show you how to get around that.

 

Adding the script to your Formstack form

On your form, add a General Field with the Basic Field of "Description Area" to act as a placeholder for the Google Translate button. Open up the field settings dropdown or double click "Description Area" to edit. 

 

Screen_Shot_2021-04-30_at_9.15.47_AM.png

 

Screen_Shot_2021-04-30_at_9.19.52_AM.png

Add the following div label from the embed code above to the field along with Google Translate:

Google Translate<div id="google_translate_element"></div>

When you close the field settings, the div label will disappear but the addition of "Google Translate" text in front will allow you to locate the field.

 

Modifying the embed code with Javascript

Now, go to Form Settings and scroll down to the Javascript Code area.

image-0.png

image-1.png

You will need to dynamically create the script tag when the form is loaded by adding the following code to the Javascript Code area.

function googleTranslateElementInit() {

  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');

}


function FF_OnAfterRender()
{
var d = document,

     b = d.getElementById('google_translate_element'),

     js = d.createElement('script');

     js.type='text/javascript';


  /* The below source is the same as the one in the script tag in the sample  */
js.src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';

     b.appendChild(js);

}

Close the Form Settings and publish your form.

The Google Translate Language picklist and button will now be available on your form to translate the form in different languages.

Screen_Shot_2019-07-02_at_1.43.05_PM.png

Was this article helpful?
3 out of 10 found this helpful

Comments

0 comments

Article is closed for comments.