You are viewing limited content. For full access, please sign in.

Question

Question

Form In Multiple Languages

Forms
Updated March 1, 2022
asked on June 12, 2020

Is there a way to create one form and have it displayed in different languages or allow the viewer to select a language?  

I was thinking of using the radio button but the Variables wouldn't match up when we want to take the metadata back.

Any ideas would be greatly appreciated.

0 0

Answer

SELECTED ANSWER
replied on June 12, 2020 • Show version history

Hi Manuel,

You can use the Google Translate API to translate the form dynamically.

 

Add an HTML element with the following. This will have the dropdown menu with the language.

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

Then, add the following JavaScript (replace the 'en' in {pageLanguage: 'en'} with the original language's two letters, if it's not English):

$.getScript("//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit");
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}

 

Due to how Google Translate handles translating the page, all of the variables like checkboxes or radio buttons will remain as the original language (excluding text boxes, obviously).

12 0
View 1 previous reply
replied on June 15, 2020

Jim,

Thank you for the response.  

This worked perfect!

 

1 0
replied on January 29, 2021

Hi Jim,

This API is great. Is it possible to narrow it down to 2 languages? Spanish and Chinese?

Thank you!

0 0
replied on March 31, 2021

Sorry, I'm doing something wrong because it isn't working for me.  I added the <div id="google_translate_element"></div> as the HTML in a custom HTML field, and then added the $.getscript bit into the JavaScript section under a document.ready function; do I need to call the googleTranslateElementInIt function somewhere?

0 0
replied on June 3, 2021 • Show version history

Dennis,

 

I did as you did (div in a custom HTML field and getscript inside a document.ready), but to get this to work I needed to move the function googleTranslateElementInit() { ... } to be outside the document.ready function.

2 0

Replies

replied on July 22, 2020

One way to implement translation is to consider using the AngularJS framework to simplify the code creation. Some quick code snippets walk-through of this step up:

 

  1. Add a method to choose between the languages using Custom HTML with some CSS (Screenshot 1).
  2. Add Fields to the Forms Layout and name the string using the NgBind directive (https://docs.angularjs.org/api/ng/directive/ngBind) (Screenshot 2), it can bind the translation strings to a Variable defined in angularJS.
  3. After the binding is set up, you can add a function to trigger the translation by setting the correct localized string to the variable based on the language selected (Screenshot 3). This can be done using the Ng-Click directive.
  4. One thing to note is angularJS is not used by default in the Form customization. So, you need to load the angular js file by jQuery.getScript. After the angular script is loaded, you need to do the bootstrap manually so that angularJS application can be initialized.

 

In the code snippet below, the scope is an object that is used for the binding between the view and the model. You can either use controller or directive to access the scope. For starter, I would suggest to start with controller.

 

(Screenshot 1)

 

(Screenshot 2)

 

 

(Screenshot 3)

4 0
replied on June 12, 2020

OK Jim.  Another piece of code for my toolkit.  Thanks :)

1 0
replied on February 25, 2021

Old thread, but putting this here for whomever needs it:

Cloud Forms crashes BAD when using Google Translate widget. 

I finally got to the root of the problem, in that GT was modifying / translating the ARIA-LABEL tags in the form, which causes all sorts of nastiness upon submit.

 

Fix is to add "notranslate" class to the Submit button and/or any other field which is having issues.

 $('.Submit').addClass('notranslate');

seems to do the trick.

 

 

This allows the form to submit.

1 0
replied on February 25, 2021

Thanks for the update. We saw your support case and are updating the submit action so the submit button can be translated. Hopefully will have this fixed and deployed to cloud soon. 

1 0
replied on June 12, 2020

The out of the box way might be to have two sets of fields, English and Spanish (for example). If the form was set to English, hide all the Spanish and use those.

For the other case, you'll use a formula in the English fields to =SpanishField. That way, when the Spanish fields are filled out, it's filling out the English fields as well. When you set up the field rules to hide the English fields, make sure to use the setting to "save data when the field is hidden". This way, the variables you use will always be the English field variables no matter which language is used to fill out the form. 

If you had more languages, you could get more creative in the formula and do something like =CONCATENATE(SpanishField, FrenchField, GermanField...) but since only one set of fields will show to the user, the English field would always be filled with the correct value. 

0 0
replied on February 26, 2021

Hello,

I am trying to implement google translate in my form, do I need to purchase Google translate API? how much does it cost?

0 0
replied on February 26, 2021

 

It depends upon your application.  It is free for gov't, non profit, educational, - and there is a "free tier" for commercial, I think it is 500K characters a month.

https://cloud.google.com/translate/pricing

you'll have to nail down the details on your own - good luck!

0 0
replied on February 24, 2022

I am interested in this, too. We are a governmental entity. If any others have done this, please share any other tips you have or suggestions. I will look into the Google Translate API. I am curious how this works with our dropdown fields and other data from SQL tables. 

0 0
View 2 previous replies
replied on February 25, 2022

So far the Google API option has worked great for us, though it would still be nice to make this feature native to LF

1 0
replied on March 1, 2022 • Show version history

Thank you! Do you have any external facing forms with this functionality that I could preview? It would be great to see it in action. 

0 0
replied on March 1, 2022
1 0
replied on March 1, 2022
1 0
replied on March 1, 2022

Thank you both, I really appreciate it!

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...