Formulários multilíngues

Universally traduz automaticamente os elementos de formulário em suas páginas para que os visitantes possam interagir com os formulários em seu idioma. Nenhuma configuração adicional é necessária.

O Que é Traduzido

Rótulos e Texto

Todo o texto visível associado aos formulários é traduzido como parte do conteúdo normal da página:

• Texto do <label>
• Texto de título e parágrafo perto de formulários
• Texto do botão (ex: <button>, <input type="submit">, <input type="reset">, <input type="button">)
• Texto de ajuda, descrições e mensagens de erro renderizadas em HTML

Marcadores

O atributo placeholder em elementos <input> e <textarea> é detectado e traduzido automaticamente.

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

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

Atributos de Acessibilidade

• aria-label em inputs, textareas e botões
• Referências aria-labelledby e aria-describedby (o texto do elemento referenciado é traduzido)

Opções de Seleção

O texto dentro de elementos <option> em menus suspensos <select> é traduzido como conteúdo normal da 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>

O que NÃO é Traduzido

Valores de Entrada

Os dados inseridos pelo usuário nunca são alterados, e um value pré-preenchido em um input de texto simples é deixado como está:

• <input type="text" value="John">: o valor “John” permanece o mesmo
• <input type="hidden" value="42">: não é alterado

Valores de formulário são dados, não interface do usuário, e traduzi-los corromperia o envio do formulário.

Duas exceções, ambas valem a pena verificar em seus próprios formulários:

• Um input com atributo title tem seu value traduzido, incluindo um oculto. <input type="text" title="Search field" value="John Smith"> retorna com o valor traduzido. Se um valor pré-preenchido for um dado, remova o title ou adicione class="notranslate" a esse input.
• O texto dentro de um <textarea> é traduzido. <textarea>Draft note</textarea> é tratado como qualquer outro texto visível. Exclua-o da mesma forma se ele contiver dados em vez de texto.

O value em inputs de submit, reset e button é traduzido por design, pois esse texto é um rótulo.

Veja Incluir e excluir seletores CSS para excluir um elemento.

Nomes e IDs de Campo

Atributos HTML como name, id, class e data-* nunca são modificados. Sua lógica de processamento de formulário funciona exatamente da mesma forma, independentemente do idioma de exibição.

Mensagens de Validação

Mensagens de validação nativas do navegador (por exemplo, “Por favor, preencha este campo”) são tratadas pelo navegador no idioma do sistema do usuário, não pelo Universally. Mensagens de validação personalizadas renderizadas em HTML são traduzidas normalmente.

Envios de Formulário

Envios de formulário funcionam de forma idêntica em qualquer idioma. Quando um visitante preenche um formulário traduzido:

• A URL de action não é modificada (os formulários são enviados para o mesmo endpoint)
• Os atributos name dos campos permanecem inalterados
• Os dados enviados são o que o usuário digitou, em seu próprio idioma
• Campos ocultos passam sem alterações

Seu backend recebe a mesma estrutura de formulário, independentemente do idioma que o visitante usou.

Dicas

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.