# Form settings

## 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.

```typescript
constructor(settings: object)
```

### Example

```javascript
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

{% tabs %}
{% tab title="With composer" %}
{% hint style="warning" %}
The `formsmdBranding` and/or `footer` parameters can only be set to `"hide"` if your site has a [Pro subscription](https://forms.md/pricing/) (or above).
{% endhint %}

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](https://forms.md/pricing/) (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](https://forms.md/pricing/) (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.                                                                          |
| {% endtab %}        |                                             |                                                                                                                                                          |

{% tab title="Markdown-like" %}
{% hint style="warning" %}
The `formsmd-branding` and/or `footer` parameters can only be set to `hide` if your site has a [Pro subscription](https://forms.md/pricing/) (or above).
{% endhint %}

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](https://forms.md/pricing/) (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](https://forms.md/pricing/) (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.                                                                            |
| {% endtab %}         |                                       |                                                                                                                                                          |
| {% endtabs %}        |                                       |                                                                                                                                                          |

{% hint style="info" %}
More settings are available, but they are mainly relevant for full page forms. See the actual code and test cases to learn more.
{% endhint %}

***

## Difference between form settings and options

There is quite a bit of overlap between form settings and [options](https://docs.forms.md/getting-started/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.