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.

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 the General Text fields that the Formstack Salesforce App offers supports 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 Text Field to act as a placeholder for the Google Translate button. Open up the field option and double click "text" to edit. 

Screen_Shot_2019-07-02_at_1.24.55_PM.png

Screen_Shot_2019-07-02_at_1.24.48_PM.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 you 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?
2 out of 6 found this helpful

Comments

0 comments

Article is closed for comments.