Moduli multilingue

Universally traduce automaticamente gli elementi dei moduli nelle tue pagine in modo che i visitatori possano interagire con i moduli nella loro lingua. Non è necessaria alcuna configurazione aggiuntiva.

Cosa viene tradotto

Etichette e testo

Tutto il testo visibile associato ai moduli viene tradotto come parte del normale contenuto della pagina:

• Testo <label>
• Testo dell'intestazione e del paragrafo vicino ai moduli
• Testo del pulsante (es. <button>, <input type="submit">, <input type="reset">, <input type="button">)
• Testo della guida, descrizioni e messaggi di errore resi in HTML

Segnaposto

L'attributo placeholder negli elementi <input> e <textarea> viene rilevato e tradotto automaticamente.

<!-- Original -->
<input type="text" placeholder="Enter your name">

<!-- Translated (French) -->
<input type="text" placeholder="Entrez votre nom">

Attributi di accessibilità

• aria-label su input, textarea e pulsanti
• Riferimenti aria-labelledby e aria-describedby (il testo dell'elemento a cui si fa riferimento viene tradotto)

Opzioni di selezione

Il testo all'interno degli elementi <option> nei menu a discesa <select> viene tradotto come normale contenuto della pagina.

<!-- Original -->
<select>
  <option>Choose a country</option>
  <option>United States</option>
  <option>France</option>
</select>

<!-- Translated (French) -->
<select>
  <option>Choisissez un pays</option>
  <option>États-Unis</option>
  <option>France</option>
</select>

Cosa NON viene tradotto

Valori di input

I dati inseriti dall'utente non vengono mai toccati e un valore precompilato su un input di testo normale viene lasciato invariato:

• <input type="text" value="John">: il valore “John” rimane invariato
• <input type="hidden" value="42">: non viene toccato

I valori dei moduli sono dati, non interfaccia utente, e tradurli corromperebbe l'invio dei moduli.

Due eccezioni, entrambe degne di verifica sui tuoi moduli:

• Un input con un attributo title ha il suo value tradotto, incluso uno nascosto. <input type="text" title="Campo di ricerca" value="John Smith"> viene restituito con il valore tradotto. Se un valore precompilato sono dati, rimuovi il title o aggiungi class="notranslate" a quell'input.
• Il testo all'interno di una <textarea> viene tradotto. <textarea>Nota bozza</textarea> viene trattato come qualsiasi altro testo visibile. Escludilo allo stesso modo se contiene dati anziché testo.

Il value sugli input di invio, reset e pulsante viene tradotto per progettazione, poiché quel testo è un'etichetta.

Vedi Includi ed escludi selettori CSS per escludere un elemento.

Nomi e ID dei campi

Attributi HTML come name, id, class e data-* non vengono mai modificati. La logica di elaborazione dei tuoi moduli funziona esattamente allo stesso modo indipendentemente dalla lingua di visualizzazione.

Messaggi di convalida

I messaggi di convalida nativi del browser (es. “Per favore, compila questo campo”) sono gestiti dal browser nella lingua di sistema dell'utente, non da Universally. I messaggi di convalida personalizzati visualizzati in HTML vengono tradotti normalmente.

Invio dei moduli

L'invio dei moduli funziona in modo identico in qualsiasi lingua. Quando un visitatore compila un modulo tradotto:

• L'URL di action non viene modificato (i moduli vengono inviati allo stesso endpoint)
• Gli attributi name dei campi rimangono invariati
• I dati inviati sono qualunque cosa l'utente abbia digitato, nella propria lingua
• I campi nascosti vengono trasmessi senza modifiche

Il tuo backend riceve la stessa struttura del modulo indipendentemente dalla lingua utilizzata dal visitatore.

Suggerimenti

Utilizzare le regole del glossario per i termini specifici del modulo. Se un modulo contiene termini specifici del dominio che non devono essere tradotti (ad esempio, nomi di piani, codici prodotto), aggiungerli come Mantieni le regole del glossario. Vedere Regole del glossario.

Mantenere le etichette in HTML. Le etichette visualizzate come testo nel DOM vengono tradotte. Le etichette inserite tramite JavaScript dopo il caricamento della pagina potrebbero non esserlo.

Testare i flussi dei moduli. Dopo aver abilitato la traduzione, inviare un modulo di prova in una lingua tradotta per verificare che l'invio funzioni correttamente.