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

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

A setting is a line in the format #! {name} = {value} added anywhere (but usually at the very start). For example, #! button-alignment = center. The following settings are available:

Name	Value	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.
button-alignment	center | end | stretch	Sets the alignment of the CTA buttons on each slide.
css-prefix	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.
field-size	sm	If set to sm, the size of form fields will be made smaller.
font-size	sm | lg	Makes the font size of everything on the form smaller or larger.
form-delimiter	string	Used to separate parameters when creating form fields. Default is |.
formsmd-branding	hide | show	Controls visibility of the Forms.md branding. Please note, you need a Pro subscription (or above) to hide the branding.
form-style	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.
label-style	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.
page-progress	hide | show | decorative	Controls visibility and function of the page progress.
placeholders	hide | show	Controls visibility of input placeholders.
post-sheet-name	string	When sending responses directly to Google Sheets, specifies which sheet to save responses to.
post-url	string	URL to send form responses to using POST request.
restart-button	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.
slide-controls	hide | show	Controls visibility of next and previous buttons.
slide-delimiter	string	Specifies where new slides are created. Default is ---.
submit-button-text	string	Custom text for all submit buttons.
vertical-alignment	start	If set to start, content is aligned to the top of the container vertically.

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.