Settings reference

Complete reference of all Forms.md settings for customizing your forms and pages

Settings control the appearance, behavior, and functionality of your Forms.md pages and forms. You can pass settings to the Composer constructor or define them in your Markdown files using the #! prefix.

Usage

Composer constructor

import { Composer } from 'forms.md';

const form = new Composer({
  title: 'My Form',
  accent: '#0066cc',
  colorScheme: 'dark',
  page: 'form-slides'
});

Many visual settings support dual values for light and dark modes. Learn more about dual-value settings.

Page structure

page · string · default: "form-slides"

Determines the layout of the page.

Options:

• "form-slides" - Multi-slide form layout (default)
• "slides" - Presentation-style slides without form functionality
• "single" - Single-page layout with all content visible

{ page: 'single' }

slideDelimiter · string · default: "---"

Specifies where new slides are created. Used when page is "form-slides" or "slides".

{ slideDelimiter: '---' }

verticalAlignment · string

If set to "start", content is aligned to the top of the page vertically.

Options:

• "start" - Align content to top

{ verticalAlignment: 'start' }

Branding and metadata

title · string

The title of the page. Appears in browser tabs and search results.

{ title: 'Customer Feedback Form' }

id · string

Identifier for the page or form. Must be a valid HTML id.

{ id: 'contact-form' }

brand · string

An image of your logo added to the header of the page in the top-left corner. Must be valid Markdown image syntax. Supports dual values.

{ brand: '![Logo](https://example.com/logo.png)' }

favicon · string

The favicon of the page. Provide a path or URL to the favicon file.

{ favicon: '/static/favicon.ico' }

cta · string

Adds a call to action link styled as a button on the header. Must be valid Markdown link syntax.

{ cta: '[Sign Up](https://example.com/signup)' }

Meta tags

metaAuthor · string

Sets the author metadata.

{ metaAuthor: 'Jane Smith' }

metaDescription · string

Sets the description metadata. Important for SEO.

{ metaDescription: 'Contact us for more information' }

metaKeywords · string

Sets the keywords metadata. Provide comma-separated values.

{ metaKeywords: 'contact, support, feedback' }

metaImage · string

Sets the Open Graph image. Used when sharing on social media.

{ metaImage: 'https://example.com/og-image.png' }

metaType · string

Sets the Open Graph type.

{ metaType: 'website' }

metaUrl · string

Sets the Open Graph URL.

{ metaUrl: 'https://example.com/contact' }

Colors and theming

colorScheme · string · default: "light"

The default or initial color scheme of the page.

Options:

• "light" - Light mode (default)
• "dark" - Dark mode

{ colorScheme: 'dark' }

colorSchemeScope · string · default: "domain-wide"

Determines how color scheme preference is saved and applied.

Options:

• "domain-wide" - Preference applies across all pages on the domain (default)
• "isolate" - Preference is isolated to this page only

{ colorSchemeScope: 'isolate' }

colorSchemeToggle · string

If set to "show", a toggle button will be available in the footer.

Options:

• "show" - Display color scheme toggle

{ colorSchemeToggle: 'show' }

accent · string

The primary color used on buttons, form fields, etc. Must be HTML name, hex code, or RGB. Supports dual values.

{ accent: '#0066cc' }
{ accent: 'rgb(0, 102, 204)' }
{ accent: 'royalblue' }

accentForeground · string

The text color used on accent background (e.g., text on buttons). Must be HTML name, hex code, or RGB. Supports dual values.

{ accentForeground: '#ffffff' }

color · string

The text color of the page. Must be HTML name, hex code, or RGB. Supports dual values.

{ color: '#333333' }

backgroundColor · string

The background color of the page. Must be HTML name, hex code, or RGB. Supports dual values.

{ backgroundColor: '#ffffff' }

backgroundImage · string

The background image of the page. Provide valid CSS for background-image. Supports dual values.

{ backgroundImage: 'url(https://example.com/bg.jpg)' }

backdropOpacity · string

Sets an overlay of the background-color on top of the background image. Accepts a number or percentage. Supports dual values.

{ backdropOpacity: '0.5' }
{ backdropOpacity: '50%' }

Typography

fontFamily · string

The font family used on the page. Provide valid CSS font family value.

{ fontFamily: 'Inter, system-ui, sans-serif' }

fontImportUrl · string

URL to import custom fonts. Must be valid CSS for the @import property.

{ fontImportUrl: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap' }

fontSize · string

Makes the font size of everything on the page smaller or larger.

Options:

• "sm" - Smaller font size
• "lg" - Larger font size

{ fontSize: 'lg' }

headings · string

If set to "anchored", all headings will contain an anchor link.

Options:

• "anchored" - Add anchor links to headings

{ headings: 'anchored' }

Layout and UI controls

header · string

Controls header visibility and alignment.

Options:

• "hide" - Hide the header
• "show" - Show the header
• "align" - Show header with special alignment

{ header: 'show' }

footer · string

Controls visibility of the footer.

Options:

• "hide" - Hide the footer
• "show" - Show the footer

{ footer: 'hide' }

formsmdBranding · string

Controls visibility of the Forms.md branding.

Options:

• "hide" - Hide Forms.md branding
• "show" - Show Forms.md branding

{ formsmdBranding: 'hide' }

pageProgress · string

Controls visibility and function of the page progress indicator.

Options:

• "hide" - Hide progress indicator
• "show" - Show functional progress indicator
• "decorative" - Show decorative-only progress indicator

{ pageProgress: 'show' }

slideControls · string

Controls visibility of next and previous buttons.

Options:

• "hide" - Hide slide controls
• "show" - Show slide controls

{ slideControls: 'show' }

restartButton · string

If set to "show", the restart button will be visible.

Options:

• "show" - Display restart button

{ restartButton: 'show' }

rounded · string

Controls rounding of buttons and UI elements.

Options:

• "none" - No rounding
• "pill" - Full pill-shaped rounding

{ rounded: 'pill' }

buttonAlignment · string

Set the alignment of the slide CTA buttons.

Options:

• "center" - Center alignment
• "end" - Right/end alignment
• "stretch" - Full-width buttons

{ buttonAlignment: 'center' }

submitButtonText · string

Custom text for submit buttons.

{ submitButtonText: 'Send Response' }

Form fields

formStyle · string

If set to "classic", the form fields will have a classic appearance.

Options:

• "classic" - Classic form field style

{ formStyle: 'classic' }

fieldSize · string

If set to "sm", the size of form fields will be made smaller.

Options:

• "sm" - Smaller form fields

{ fieldSize: 'sm' }

labelStyle · string

If set to "classic", the question and description of form fields will be made smaller.

Options:

• "classic" - Classic label style

{ labelStyle: 'classic' }

placeholders · string

Controls visibility of input placeholders.

Options:

• "hide" - Hide placeholders
• "show" - Show placeholders

{ placeholders: 'show' }

autofocus · string

If set to "all-slides", when a new slide becomes active (including the first slide on page load), the very first form field will be auto-focused.

Options:

• "all-slides" - Enable autofocus on all slides

{ autofocus: 'all-slides' }

formDelimiter · string · default: "|"

Used to separate parameters when creating form fields.

{ formDelimiter: '|' }

Data handling

Reading data (GET)

getUrl · string

URL for reading data. Learn more in the Set and Read Data guide.

{ getUrl: 'https://api.example.com/data' }

getFormat · string · default: "json"

The format for reading data.

Options:

• "json" - JSON format (default)
• "csv" - CSV format
• "tsv" - TSV format

Learn more in the Set and Read Data guide.

{ getFormat: 'json' }

getObjectsName · string · default: "objects"

Name used for objects when reading data. Learn more in the Set and Read Data guide.

{ getObjectsName: 'items' }

Sending data (POST)

postUrl · string

URL to send form responses to using POST request.

{ postUrl: 'https://api.example.com/submit' }

postSheetName · string

When sending responses directly to Google Sheets, this specifies which sheet to save responses to.

{ postSheetName: 'Responses' }

Internationalization

localization · string · default: "en"

Sets the language for automatic translation. Supports 9 languages: en, ar, bn, de, es, fr, ja, pt, zh.

{ localization: 'es' }

See the translate() function for working with multilingual content.

dir · string · default: "ltr"

The direction of the page’s text.

Options:

• "ltr" - Left-to-right (default)
• "rtl" - Right-to-left (for Arabic, Hebrew, etc.)

{ dir: 'rtl' }

Advanced

cssPrefix · string · default: "fmd-"

Prefix added to all CSS classes. Set to "none" to remove the prefix.

{ cssPrefix: 'myform-' }

Dual-value settings

Many visual settings support providing separate values for light and dark color schemes. Use the || separator to provide two values.

Supported dual-value settings

• accent
• accentForeground
• backdropOpacity
• backgroundColor
• backgroundImage
• brand
• color

Usage example

Composer

const form = new Composer({
  // Light mode || Dark mode
  accent: '#0066cc || #4d94ff',
  backgroundColor: '#ffffff || #1a1a1a',
  color: '#333333 || #e5e5e5'
});

The first value applies to light mode, and the second value applies to dark mode. This works seamlessly with the colorScheme and colorSchemeToggle settings.

Complete example

import { Composer } from 'forms.md';

const form = new Composer({
  // Page structure
  page: 'form-slides',
  title: 'Customer Feedback Survey',
  
  // Branding
  brand: '![Logo](https://example.com/logo.png)',
  favicon: '/static/favicon.ico',
  
  // Colors and theming
  colorScheme: 'light',
  colorSchemeToggle: 'show',
  accent: '#0066cc || #4d94ff',
  accentForeground: '#ffffff',
  backgroundColor: '#ffffff || #1a1a1a',
  
  // Typography
  fontFamily: 'Inter, system-ui, sans-serif',
  fontSize: 'lg',
  
  // Form settings
  formStyle: 'classic',
  autofocus: 'all-slides',
  
  // Data handling
  postUrl: 'https://api.example.com/submit',
  
  // Internationalization
  localization: 'en',
  
  // UI controls
  pageProgress: 'show',
  submitButtonText: 'Submit Feedback'
});

Related

• Composer class - Learn about using the Composer
• translate() function - Working with multilingual content