Has anyone figure out how to use Google Translate on their forms in version 11? I know you could do it in the classic designer, but I am pretty new to LF and cannot seem to figure out how to do it in version 11.
Question
Question
Google Translate in Forms Version 11
Answer
Hi everyone. I was able to get with Zachary and get a copy of the solution he created. I created a video that walks through the basics of how it works (with Zac's permission). You will want to go to the actual YouTube video as there is a link to download the Forms processes talked about in the video from the video description.
Here is part 2 of this solution:
The links to download the forms does not work. Can you provide a new link please? Thanks!
The link to download the Forms process has been updated, so you should be able to download it now.
There is now a version 2 of this solution.
Version 2 supports custom html fields, default values for single line fields (and some others but mostly untested), and dropdown/checkbox/radio choice labels. Please post here if you come across bugs or need additional features!
Thank you Zac! I implemented this today and it looks great.
Replies
Which languages do you need to support? We are implementing a feature that should allow you to update all text elements on the form that will be released in Q4 of this year for self hosted systems. Unfortunately, this still does not enable you to use the Google Translate widget out of the box, and instead requires you to setup the translations yourself.
Like another commenter suggested, you can use the Classic designer to implement this still. This is on my use case list to look into though so stay tuned
@████████ Any updates on this feature? Thanks
It looks like they just released it for LF Cloud, so Self-hosted systems should be next.
Did this end up getting implemented in the latest version to use in the new designer.
Yes, the ability to update text elements was included in Forms 11 Update 5.
Is this part of the HTML or the JS. I can't seem to get the translate element to work in Modern.
This is what I was using in classic.
$.getScript("//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit");
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
You are still not able to use that method. The method that Zachary was referring to is that there were new interfaces within the LFForms object to change the field labels, which can in turn be used to change a field label to a different language. I haven't seen any examples of code on how to accomplish this yet though.
Also, jquery is not available in the new form designer, I would recommend using the JS fetch method directly to interact with Google's API. The general flow I designed was
- Finalize form design
- Establish the languages I want to support
- Include these languages in a radio/dropdown on the form
- Run the form and fields through the Google translate API to the desired languages, including english
- save these values to the form JS in the form of a JSON object that allows you to simply map the fields and ids back to their various settings
{
"en": {39: {
}
"label": "Contract Upload",
"subtext": "",
"tooltip": "",
"buttonLabel": "Choose files"
}
} - disable the translation
- run code on field change of the language field to parse the saved JSON onto the form field settings
A video of the solution that I built was shown in the cloud release video here
https://doc.laserfiche.com/releases/Content/2023.10.htm at the 2:50 mark
We do at some point hope to have more native support for designer defined languages without scripting but we believe this feature filled as a stop gap for those that needed the feature asap. Please do let me know if you need help or if this does not quite meet your needs!
Will this work on Custom HTML as well as fields?
@████████, would it be possible to not even use the Google Translate API now? For example, if you had a radio button where each option was a Language value (English, Spanish, and French). And when the radio button value is changed, update the field labels accordingly using the changFieldSettings? Granted you would have to manually set each value instead of using the Google API to do it. If yes, are you able to share some code of how that would work?
Also, if you are able to share the code for using the Google Translate API that is shown in the video, that would be great. The video doesn't show the full code because of the width of the screen and it stops short of scrolling to the bottom.
Yes you could definitely build the JSON yourself instead of relying on Google's translations to generate the JSON. It is just a matter of making sure you format it properly so you can easily parse it.
Let me locate the code and I will email it to you.
can you send it to me too please?
Zachary, could you send me the code as well? The youtube video has an old link to the forms that does not work.
The link from the YouTube video works when I try it. Are you getting an error?
Doesn’t work for me either. Just opens a new tab that immediately closes. No download
The email I have for you doesn’t work anymore
It worked for me using Microsoft Edge but gave a warning that it couldn't be downloaded securely. Google Chrome just opened a new tab and closed it immediately. Either way I have updated the link in the video, and it should work correctly regardless of which browser you are using.
Thanks guys!
I think you'd be hard pressed to make this work in the Forms Layout Designer (the Modern Designer). It requires adding a widget to the body of the form, which you can do with the Custom HTML field element, and then it requires running a script on the page that interacts with that widget in the Custom HTML field element, which is where things get difficult. Because the Javascript is running within a sandboxed iFrame, it cannot directly access the components of the form or fields, so it can't coordinate with the widget directly - it also wouldn't be able to access all the parts of the form to actually translate the text.
I messed with it for a while trying to make it work but without any success.
I'm guessing this is one that isn't going to be possible without some sort of built-in integration from Laserfiche.
Wow, thank you Matthew. I was afraid of that kind of answer. I suspected someone had to have seen this as well.
@████████ please take a look at the marked answer and let me know if it works for you!
I am going to be upgrading to Forms 11 Update 5 soon and will try this. Right now we are on update 4.
Fantastic, looking forward to hearing how it goes!
@laserfiche, FWIW this has blocked adoption by three of our larger municipalities.
Just to clarfy what Matthew mentioned.
Laserfiche 11 has 2 forms Designers: Classic and Modern Designer. The Google translate configuration as Matthew describes works great under LF 11, just use the classic designer.
@████████ Can you take a look at my answer detailed here and let me know if it would work for you and these municipalities? If not I would be interested to pick your brain about the use cases and what a solution would look like.
Thanks for all the hard work on this solution! And the packaging by Blake :)
I'd like to echo @████████ and ask about if this works with custom fields? Or what do we need to think about to accomplish that?
How does this work on the input values of the fields? Will it change the characters if say, it is set to Russian?
What about the content of existing inputs? Say there is a field that is populated prior to getting to the translate form, with the value in the field input also get translated?
Thanks!
This won't work on custom HTML if that is what you are asking. I just had to create an English and Spanish version for all my custom HTMLs and show/hide based on the language selected. I only have two languages though, so it would be a lot if you have more.
Values are not translated with this setup. All the fields get translated up front like in Blake's video. If you need to make changes, add or delete fields you will have to adjust the JS manually or rerun the API translation.
Default values don't translate either. Its essentially tabs, heading, field names, text below fields, and pagination.
Correct, although self hosted installations do support changing options in checkbox/radio/dropdowns I felt it slightly overcomplicated the setup of the whole translation form JS supporting cloud and self hosted environments. The best way to accomplish this would be with a lookup rule right now.
It does look like Google Translate supports HTML markup so that might be an easy addition to this solution