Formularios multilingües

Universally traduce automáticamente los elementos del formulario en tus páginas para que los visitantes puedan interactuar con los formularios en su idioma. No se necesita configuración adicional.

¿Qué se traduce?

Etiquetas y texto

Todo el texto visible asociado con los formularios se traduce como parte del contenido normal de la página:

• Texto de <label>
• Texto de encabezado y párrafo cerca de los formularios
• Texto del botón (es decir, <button>, <input type="submit">, <input type="reset">, <input type="button">)
• Texto de ayuda, descripciones y mensajes de error renderizados en HTML

Marcadores de posición

El atributo placeholder en los elementos <input> y <textarea> se detecta y traduce automáticamente.

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

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

Atributos de accesibilidad

• aria-label en inputs, textareas y botones
• Referencias aria-labelledby y aria-describedby (se traduce el texto del elemento referenciado)

Opciones de selección

El texto dentro de los elementos <option> en los menús desplegables <select> se traduce como contenido normal de la página.

<!-- 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>

¿Qué NO se traduce?

Valores de entrada

Los datos ingresados por el usuario nunca se modifican, y un value prellenado en un input de texto plano se deja como está:

• <input type="text" value="John">: el valor “John” se mantiene igual
• <input type="hidden" value="42">: no se modifica

Los valores de los formularios son datos, no interfaz de usuario, y traducirlos corrompería los envíos del formulario.

Dos excepciones, ambas dignas de revisar en tus propios formularios:

• Un input con un atributo title tiene su value traducido, incluido uno oculto. <input type="text" title="Search field" value="John Smith"> devuelve el valor traducido. Si un valor prellenado son datos, elimina el title o agrega class="notranslate" a ese input.
• El texto dentro de un <textarea> se traduce. <textarea>Draft note</textarea> se trata como cualquier otro texto visible. Exclúyelo de la misma manera si contiene datos en lugar de texto.

El value en los inputs de envío, reinicio y botón se traduce por diseño, ya que ese texto es una etiqueta.

Consulta Incluir y excluir selectores CSS para excluir un elemento.

Nombres y IDs de campos

Los atributos HTML como name, id, class y data-* nunca se modifican. Tu lógica de procesamiento de formularios funciona exactamente igual independientemente del idioma de visualización.

Mensajes de validación

Los mensajes de validación nativos del navegador (por ejemplo, “Por favor, complete este campo”) son manejados por el navegador en el idioma del sistema del usuario, no por Universally. Los mensajes de validación personalizados que se muestran en HTML se traducen normalmente.

Envíos de formularios

Los envíos de formularios funcionan de manera idéntica en cualquier idioma. Cuando un visitante completa un formulario traducido:

• La URL de action no se modifica (los formularios se envían al mismo punto final)
• Los atributos name de los campos no cambian
• Los datos enviados son lo que el usuario escribió, en su propio idioma
• Los campos ocultos pasan sin cambios

Tu backend recibe la misma estructura de formulario independientemente del idioma que haya utilizado el visitante.

Consejos

Use glossary rules for form-specific terms. If a form contains domain-specific terms that should not be translated (e.g., plan names, product codes), add them as Keep glossary rules. See Glossary Rules.

Keep labels in HTML. Labels rendered as text in the DOM are translated. Labels injected via JavaScript after page load may not be.

Test form flows. After enabling translation, submit a test form in a translated language to verify the submission works correctly.