Mehrsprachige Formulare

Universally übersetzt Formularelemente auf Ihren Seiten automatisch, damit Besucher mit Formularen in ihrer Sprache interagieren können. Keine zusätzliche Konfiguration erforderlich.

Was wird übersetzt

Beschriftungen und Text

Der gesamte sichtbare Text, der mit Formularen verbunden ist, wird als Teil des normalen Seiteninhalts übersetzt:

• <label> Text
• Überschriften- und Absatztext in der Nähe von Formularen
• Button-Text (z. B. <button>, <input type="submit">, <input type="reset">, <input type="button">)
• Hilfetexte, Beschreibungen und Fehlermeldungen, die in HTML gerendert werden

Platzhalter

Das placeholder-Attribut bei <input>- und <textarea>-Elementen wird automatisch erkannt und übersetzt.

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

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

Barrierefreiheitsattribute

• aria-label bei Eingaben, Textbereichen und Schaltflächen
• aria-labelledby und aria-describedby Referenzen (der Text des referenzierten Elements wird übersetzt)

Auswahloptionen

Text innerhalb von <option>-Elementen in <select>-Dropdowns wird wie regulärer Seiteninhalt übersetzt.

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

Was NICHT übersetzt wird

Eingabewerte

Vom Benutzer eingegebene Daten werden nie angetastet, und ein voreingefüllter value bei einem einfachen Texteingabefeld bleibt unverändert:

• <input type="text" value="John">: der Wert „John“ bleibt unverändert
• <input type="hidden" value="42">: wird nicht angetastet

Formularwerte sind Daten, keine Benutzeroberfläche. Ihre Übersetzung würde Formularübermittlungen beschädigen.

Zwei Ausnahmen, die es wert sind, bei Ihren eigenen Formularen überprüft zu werden:

• Eine Eingabe mit einem title-Attribut hat einen übersetzten value, auch eine versteckte. <input type="text" title="Suchfeld" value="John Smith"> wird mit übersetztem Wert zurückgegeben. Wenn ein voreingefüllter Wert Daten sind, entfernen Sie den title oder fügen Sie class="notranslate" zu dieser Eingabe hinzu.
• Text innerhalb eines <textarea> wird übersetzt. <textarea>Entwurfnotiz</textarea> wird wie jeder andere sichtbare Text behandelt. Schließen Sie ihn auf die gleiche Weise aus, wenn er Daten und keinen Text enthält.

Der value bei Submit-, Reset- und Button-Eingaben wird absichtlich übersetzt, da dieser Text eine Beschriftung ist.

Siehe CSS-Selektoren einschließen und ausschließen zum Ausschließen eines Elements.

Feldnamen und IDs

HTML-Attribute wie name, id, class und data-* werden niemals geändert. Ihre Formularverarbeitungslogik funktioniert unabhängig von der Anzeigesprache genau gleich.

Validierungsmeldungen

Browser-native Validierungsnachrichten (z. B. „Bitte füllen Sie dieses Feld aus“) werden vom Browser in der Systemsprache des Benutzers behandelt, nicht von Universally. Benutzerdefinierte Validierungsnachrichten, die in HTML gerendert werden, werden normal übersetzt.

Formularübermittlungen

Formularübermittlungen funktionieren in jeder Sprache identisch. Wenn ein Besucher ein übersetztes Formular ausfüllt:

• Die action-URL wird nicht geändert (Formulare werden an denselben Endpunkt gesendet)
• Feld-name-Attribute bleiben unverändert
• Die übermittelten Daten sind das, was der Benutzer eingegeben hat, in seiner eigenen Sprache
• Versteckte Felder werden unverändert übernommen

Ihr Backend erhält die gleiche Formularstruktur, unabhängig davon, welche Sprache der Besucher verwendet hat.

Tipps

Verwenden Sie Glossarregeln für formularspezifische Begriffe. Wenn ein Formular domänenspezifische Begriffe enthält, die nicht übersetzt werden sollen (z. B. Plannamen, Produktcodes), fügen Sie sie als Glossarregeln beibehalten hinzu. Siehe Glossarregeln.

Behalten Sie Labels in HTML bei. Als Text im DOM gerenderte Labels werden übersetzt. Über JavaScript nach dem Laden der Seite injizierte Labels möglicherweise nicht.

Testen Sie Formularabläufe. Übermitteln Sie nach Aktivierung der Übersetzung ein Testformular in einer übersetzten Sprache, um zu überprüfen, ob die Übermittlung korrekt funktioniert.