Form settings

Configure various aspects of your forms.

Overview

The Composer constructor accepts an object called settings as the argument. These are called form settings, and they can be used to configure various aspects of the form.

constructor(settings: object)

Example

const composer = new Composer({
  formStyle: "classic",
  id: "my-form",
  postUrl: "/api/endpoint",
});

Generates the following Markdown-like syntax:

#! form-style = classic
#! id = my-form
#! post-url = /api/endpoint

Arguments

Name	Type	Description
settings	object	Object containing configuration settings for the form.

Settings parameters

With composer

The formsmdBranding and/or footer parameters can only be set to "hide" if your site has a Pro subscription (or above).

The settings argument can contain the following parameters:

Name	Type	Description
autofocus	"all-slides"	If set to "all-slides", when a new slide becomes active (including first slide on page load), the first form field will be auto-focused.
buttonAlignment	"center" | "end" | "stretch"	Sets the alignment of the CTA buttons on each slide.
cssPrefix	string	Prefix added to all CSS classes. Default is "fmd-". If set to "none", the prefix is removed altogether.
dir	"ltr" | "rtl"	Direction of the form's text. Default is "ltr".
fieldSize	"sm"	If set to "sm", the size of form fields will be made smaller.
fontSize	"sm" | "lg"	Makes the font size of everything on the form smaller or larger.
formDelimiter	string	Used to separate parameters when creating form fields. Default is "|".
formsmdBranding	"hide" | "show"	Controls visibility of the Forms.md branding. Please note, you need a Pro subscription (or above) to hide the branding.
formStyle	"classic"	If set to "classic", the form fields will have a classic appearance.
footer	"hide" | "show"	Controls visibility of the footer. Please note, you need a Pro subscription (or above) to hide the footer.
header	"hide" | "show" | "align"	Controls header visibility and alignment.
headings	"anchored"	If set to "anchored", all headings will contain an anchor link.
id	string	Identifier for the form. It is highly recommended that every form is given a unique id.
labelStyle	"classic"	If set to "classic", the question and description of form fields will be made smaller.
localization	string	Sets the language for automatic translation. Default is "en".
page	"form-slides" | "slides" | "single"	Determines the layout of the form. Default is "form-slides".
pageProgress	"hide" | "show" | "decorative"	Controls visibility and function of the page progress.
placeholders	"hide" | "show"	Controls visibility of input placeholders.
postSheetName	string	When sending responses directly to Google Sheets, specifies which sheet to save responses to.
postUrl	string	URL to send form responses to using POST request.
restartButton	"show"	If set to "show", a restart button will be visible on the end slide.
rounded	"none" | "pill"	Controls rounding of buttons and UI elements.
slideControls	"hide" | "show"	Controls visibility of next and previous buttons.
slideDelimiter	string	Specifies where new slides are created. Default is "---".
submitButtonText	string	Custom text for all submit buttons.
verticalAlignment	"start"	If set to "start", content is aligned to the top of the container vertically.

Markdown-like

More settings are available, but they are mainly relevant for full page forms. See the actual code and test cases to 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.