Localization

Add multi-language support to your Forms.md forms with built-in translations and the translate function

Forms.md includes built-in localization support for 9 languages. All UI elements, validation messages, and default text are automatically translated based on your selected language.

Supported languages

Forms.md supports the following languages out of the box:

English

en (default)

Arabic

ar

Bengali

bn

German

de

Spanish

es

French

fr

Japanese

ja

Portuguese

pt

Chinese

zh

Setting the language

Set the language using the localization setting in your Markdown template:

#! localization = es

# Welcome

Bienvenido a nuestra encuesta.

The default language is English (en) if not specified.

Using the Composer API

When using the Composer class, set the language in the constructor:

import { Composer } from 'formsmd/composer';

const composer = new Composer({
  localization: "fr",
  title: "Formulaire de contact"
});

composer.textInput("name", {
  question: "Quel est votre nom?",
  required: true
});

composer.emailInput("email", {
  question: "Quelle est votre adresse e-mail?",
  required: true
});

Automatic translations

When you set a language, Forms.md automatically translates:

Form validation messages

• Required field errors
• Invalid email format
• Invalid date/time format
• File size limit exceeded
• Invalid phone number format

UI elements

• Button labels (Next, Previous, Submit, Restart)
• Loading states
• Success messages
• Form instructions
• Placeholder text

Input-specific text

• “Choose as many as you like” for multiple choice
• “Size limit: X MB” for file uploads
• “Currently: filename.pdf” for existing files
• Country calling code labels
• Date/time format helpers

The translate() function

Use the translate() function to localize custom content in your forms.

Import and usage

import { translate } from 'formsmd/composer';

const welcomeText = translate("es", {
  en: "Welcome to our survey",
  es: "Bienvenido a nuestra encuesta",
  fr: "Bienvenue à notre enquête",
  de: "Willkommen zu unserer Umfrage"
});

Type definition

The translate function accepts a localization code and a translations object:

type TranslationsType = {
  en?: string;
  ar?: string;
  bn?: string;
  de?: string;
  es?: string;
  fr?: string;
  ja?: string;
  pt?: string;
  zh?: string;
};

function translate(
  localization: string,
  translations: TranslationsType
): string;

Example with form fields

import { Composer, translate } from 'formsmd/composer';

const composer = new Composer({
  localization: "es"
});

composer.textInput("city", {
  question: translate("es", {
    en: "What city do you live in?",
    es: "¿En qué ciudad vives?",
    fr: "Dans quelle ville habitez-vous?"
  }),
  placeholder: translate("es", {
    en: "Enter your city",
    es: "Ingresa tu ciudad",
    fr: "Entrez votre ville"
  })
});

The translate() function automatically falls back to the first available language if the specified localization isn’t found.

Right-to-left (RTL) support

Forms.md includes full RTL support for languages like Arabic. Simply set both the localization and text direction:

#! localization = ar
#! dir = rtl

This automatically:

• Mirrors the layout
• Reverses text direction
• Adjusts form field alignment
• Repositions UI elements

Arabic example

#! localization = ar
#! dir = rtl
#! title = استبيان العملاء

# مرحبا

شكرا لك على المشاركة في استبياننا.

With Composer API

const composer = new Composer({
  localization: "ar",
  dir: "rtl",
  title: "استبيان العملاء"
});

composer.textInput("name", {
  question: "ما اسمك؟",
  required: true
});

Multi-language forms

Create forms that support multiple languages by detecting the user’s preference:

Browser language detection

// Detect user's preferred language
const userLang = navigator.language.split('-')[0]; // e.g., 'en', 'es', 'fr'

// Supported languages
const supportedLangs = ['en', 'es', 'fr', 'de', 'pt', 'ja', 'zh', 'ar', 'bn'];
const locale = supportedLangs.includes(userLang) ? userLang : 'en';

const composer = new Composer({
  localization: locale
});

Language selector

import { Composer } from 'formsmd/composer';

let currentLang = localStorage.getItem('formLang') || 'en';

function createForm(lang) {
  const composer = new Composer({
    localization: lang,
    title: lang === 'en' ? 'Contact Form' : 
           lang === 'es' ? 'Formulario de Contacto' :
           lang === 'fr' ? 'Formulaire de Contact' : 'Contact Form'
  });

  // Add form fields...
  
  return composer.template;
}

// Language switcher
document.getElementById('langSwitch').addEventListener('change', (e) => {
  currentLang = e.target.value;
  localStorage.setItem('formLang', currentLang);
  
  // Reinitialize form with new language
  const form = new Formsmd(
    createForm(currentLang),
    document.getElementById('form-container')
  );
  form.init();
});

Translation coverage

Here are examples of automatically translated UI text:

English (en)

Next
Previous
Submit
Loading
Please select an item in the list.
Type your answer here...
Choose as many as you like
Size limit: 10MB

Custom translations object

Access the full translations object directly:

import { translations } from 'formsmd/composer';

console.log(translations.es['next-btn']); // "Siguiente"
console.log(translations.fr['loading']); // "Chargement"
console.log(translations.de['start-btn']); // "Start"

Best practices

1. Set localization early

   Always set the localization setting at the top of your template or in the Composer constructor:

   #! localization = es
   #! dir = ltr
   
2. Use translate() consistently

   For custom text that needs localization, always use the translate() function:

   question: translate(locale, {
     en: "Question in English",
     es: "Pregunta en español"
   })
   
3. Provide fallbacks

   Always include English as a fallback:

   translate("unknown", {
     en: "Default text",
     fr: "Texte en français"
   }); // Returns "Default text"
   
4. Test RTL layouts

   If supporting Arabic, test with dir="rtl":

   #! localization = ar
   #! dir = rtl
   

Remember to set dir="rtl" when using Arabic or other RTL languages. The localization setting alone won’t change text direction.

Next steps

Theming

Customize your form’s appearance

Google Sheets

Save responses to Google Sheets