Options

Configure form behavior and appearance

Overview

The Formsmd constructor accepts the template of the form, the container where the form will be rendered, and the options to configure form behavior and appearance.

constructor(template: string, container: HTMLElement, options: object)

Example

const formsmd = new Formsmd(
  composer.template,
  document.getElementById("my-form-container"),
  {
    postHeaders: {
      Authorization: `Bearer ${localStorage.getItem("token")}`,
    },
    themeLight: {
      accent: "#353148",
      accentForeground: "#e2d2b6",
      backgroundColor: "#e2d2b6",
      color: "#353148"
    }
  }
);
formsmd.init();

Arguments

Name
Type
Description

template

string

The form template string.

container

HTMLElement

The container element where the form will be rendered.

options

object

Object containing configuration options for form functionality.

Options parameters

The options argument can contain the following parameters:

Name
Type
Description

colorScheme

"light" | "dark"

Default or initial color scheme of the form. Default is "light".

errorFieldKey

string

Key used to identify the field in error objects. Default is "field".

errorMessageKey

string

Key used to identify the error message in error objects. Default is "message".

footer

"hide" | "show"

Controls visibility of the footer. Please note, you need a Pro subscription (or above) to hide the footer.

formsmdBranding

"hide" | "show"

Controls visibility of the Forms.md branding. Please note, you need a Pro subscription (or above) to hide the branding.

getHeaders

object

Headers for GET requests.

isFullPage

boolean

Whether to render in full page mode. Default is false.

paddingInlineBottom

number

Padding bottom for inline forms. Default is 20.

paddingInlineHorizontal

number

Horizontal padding for inline forms. Default is 0.

paddingInlineTop

number

Padding top for inline forms. Default is 20.

pageProgress

"hide" | "show" | "decorative"

Controls visibility and function of the page progress.

postData

object

Extra data sent with POST requests.

postHeaders

object

Headers for POST requests.

prioritizeURLFormData

boolean

Whether to prioritize URL form data. Default is false.

recaptcha

object

Option for setting up Google reCAPTCHA for spam protection. Learn more.

sanitize

boolean

Whether to sanitize template. Default is true.

saveState

boolean

Whether to save form data in local storage. Default is true.

sendFilesAsBase64

boolean

Whether to send files as base64. Default is false.

setColorSchemeAttrsAgain

boolean

Whether to set color scheme attributes again.

slideControls

"hide" | "show"

Controls visibility of next and previous buttons.

startSlide

number

The index of the first slide to make active. Default is 0.

themeDark

object

Dark theme colors. Learn more.

themeLight

object

Light theme colors. Learn more.


Difference between form settings and options

There is quite a bit of overlap between form settings and options. Generally speaking, form settings are configuration that is unique to that specific form. Options on the other hand, are meant to be shared among multiple or all forms on your website or app. However, this is a soft rule, and it should always come down to convenience and ease of use.

Last updated

Was this helpful?