Subscribe
Blog

Adding Google Translate to Your Salesforce Forms

Lacey Jackson
September 19, 2019
|
Min Read

We recently shared how you can create an automated customer feedback process using Formstack for Salesforce. However, if you’re serving customers across multiple countries, you may need to translate your feedback forms into multiple languages. But creating an individual form and email campaign for each customer language is costly and time intensive. So, we’ve created a better way. With Formstack for Salesforce, you can allow users to automatically translate your forms into their preferred language using the Google Translate API

Formstack’s Salesforce app supports HTML, but it does not allow you to directly use script tags within the Salesforce form builder. Today, I’m going to show you an easy workaround. Here’s how to add a Google Translate language picklist to your form in three easy steps.

Step 1: Adding the Google Translate script to your form. 

Salesforce general text field

After you’ve built your form, we’re going to need to make a few tweaks. First, we’re going to add a General Text Field to act as a placeholder for the Google Translate button. Open up the field options and double click "Text" to edit. 

Salesforce general text field

Add the <div> element below field. Insert the phrase “Google Translate” before your <div> element. When you close your field settings, your <div> element will disappear and the “Google Translate” text will help you to locate it in the next steps. Your text should look like this: </div></div></div>

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

Step 2: Create the picklist with Javascript.

Next, we’re going to use Javascript to create our picklist. Don’t worry, we’re sharing the complete version below so you don’t need to write a single line of code. We’ll get started on this step by navigating to “Form Settings.”

Salesforce form settings

Within your form settings, scroll down to the section labeled “Javascript Code.” Here, we’ll dynamically create the script tag.

Salesforce Javascript code

You will need to dynamically create the script tag when the form is loaded by adding the following code to the Javascript Code area. Simply scroll to the bottom of the code as it appears and paste the following script into the box.

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);

}

Step 3: Publish! 

Close the Form Settings, and publish your form! Now, a Google Translate picklist and button will appear for your users to translate the form into their preferred language. Your final form should look something like this:

Salesforce form with Google Translate picklist button shown.

It’s that easy! However, if you have any issues or questions about adding Google Translate to your Salesforce app forms, don’t hesitate to reach out to our Customer Support team. They’ll be happy to assist. 

 

If you haven’t tried out Formstack for Salesforce, why not? You can access this functionality and much more by starting a free trial of our native form builder today.

TRY IT FREE

Blog

Our 2024 Education Guide is Here

Learn some top takeaways of our new Education Guide and see what workflows you should be automating right now.
Read more
Lacey Jackson
Lacey is a Product Marketing Manager at Formstack who is dedicated to creating content that showcases the power of the Formstack Platform. When she’s not creating Formstack Builders tutorials, she can be found reading, playing board games, or strolling with her dog. Lacey is a graduate of Franklin College.
More Articles