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 formsmdBranding and/or footer parameters can only be set to "hide" if your site has a Pro subscription (or above).

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.