Question:
How to translate field filled in a different language by the customer
Product:
Wix Editor
What are you trying to achieve:
Hello everyone,
I would like (once again) to benefit from your expertise. (Thanks in advance)
I have a page with a form where guests can leave reviews about their stay at the campsite.
All these fields are directly saved in a “Questionnaire de satisfaction client” collection. (For example the field :“Avis Client”)
Problem: Some campers leave some comments directly in Swedish, Danish, Dutch, German, etc.
What I would like to do is, when the customer clicks on the “Send” Button, to translate the “Avis Client” field he has juste filed in French (if is still in French : nothing to do), before adding it to my collection.
Like Dan already mentioned you woul dneed a translator-api, which you could use.
To automatically translate the “Avis Client” field content from various languages (like Swedish, Danish, Dutch, German, etc.) into French before saving it to your “Questionnaire de satisfaction client” collection in Wix, you’ll need to integrate a translation service with your Wix form using Velo (Wix’s coding platform). Wix itself doesn’t offer built-in automatic field translation for form submissions (at least not a complete solution, only partially), but you can achieve this with a combination of Velo APIs and an external translation service like —> Google Translate API <— or —> DeepL API <—
Your code could look something like the following …(at least a part of it) EXAMPLE-CODE-SKELETTON…
// http-functions.js
import { fetch } from 'wix-fetch';
export async function post_translateText(request) {
const apiKey = 'YOUR_DEEPL_API_KEY'; // Replace with your DeepL API key or Google-Translate
const url = 'https://api-free.deepl.com/v2/translate';
try {
const body = await request.body.json();
const text = body.text;
const sourceLang = body.sourceLang || 'auto'; // Auto-detect source language
const targetLang = 'FR'; // Target language is French
const response = await fetch(url, {
method: 'POST',
headers: {
'Authorization': `DeepL-Auth-Key ${apiKey}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
text: [text],
source_lang: sourceLang,
target_lang: targetLang
})
});
if (response.ok) {
const result = await response.json();
return {
status: 200,
body: { translatedText: result.translations[0].text }
};
} else {
return {
status: response.status,
body: { error: 'Translation failed' }
};
}
} catch (error) {
return {
status: 500,
body: { error: error.message }
};
}
You send over your content to Google or Deepl, your text gets translated and sended back to your page.
Once recieved the reply → now you can do what ever you want with the translated reply → for example putting it into your CMS or what ever…
// Page code (e.g., in the page where your form is located)
import wixData from 'wix-data';
import { fetch } from 'wix-fetch';
$w.onReady(function () {
// Assuming your form is connected to a dataset named 'dataset1'
$w('#dataset1').onBeforeSave(async () => {
try {
// Get the current form submission data
const formData = $w('#dataset1').getCurrentItem();
const avisClient = formData.avisClient; // Replace with the actual field key for "Avis Client"
// Skip translation if the text is already in French (optional, requires language detection)
// For simplicity, we'll assume all non-empty inputs need translation
if (avisClient) {
// Call the backend translation function
const response = await fetch('/_functions/translateText', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text: avisClient })
});
if (response.ok) {
const result = await response.json();
const translatedText = result.translatedText;
// Update the form data with the translated text
$w('#dataset1').setFieldValue('avisClient', translatedText); // Replace 'avisClient' with the actual field key
} else {
console.error('Translation failed:', await response.json());
// Optionally, allow submission to proceed with original text
}
}
} catch (error) {
console.error('Error during translation:', error);
// Optionally, allow submission to proceed with original text
}
});
});
Or doing it completely without a dataset, also possible (CODE-ONLY).
If you wannt to dive even deeper → you even could use some AI like → OPEN-AI-API, which not only would be able to translate, but also do a lot of more usefull things, like → (investigating, analysing, reporting, summarizing (of course translation included) and so on and so on…), but this would of course need much more coding skills aswell, to be able to do such a complex integration.
Tell us how far you came with your setup. GOOD LUCK!