# Options

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

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

### Example

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

{% 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 `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](https://forms.md/pricing/) (or above) to hide the footer.              |
| `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. |
| `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](/getting-started/spam-protection.md).                                           |
| `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](/customization/theming.md).                                                                                              |
| `themeLight`               | `object`                               | Light theme colors. [Learn more](/customization/theming.md).                                                                                             |

***

## Difference between form settings and options

There is quite a bit of overlap between [form settings](/getting-started/settings.md) 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.forms.md/getting-started/options.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.