# End slide

## Basic usage

{% hint style="info" %}
An end slide with a thank you message is automatically added to every form, however, the `endSlide()` function can be used to customize this slide.
{% endhint %}

The `endSlide()` function creates a special slide type that acts as the final destination for your form. This slide will be shown after users complete and submit the form. You can also customize the slide to include a redirect URL that users will be taken to after form completion.

In the example below, the end slide contains a custom message (with some data binding).

<div><figure><img src="/files/RfspFI75ImX9FqVeQcbd" alt=""><figcaption><p>Slide containing the input</p></figcaption></figure> <figure><img src="/files/UA7UpCb89brN17bZxS1z" alt=""><figcaption><p>End slide</p></figcaption></figure></div>

```javascript
import { Composer } from "formsmd";

const composer = new Composer({
  id: "my-form"
});

composer.emailInput("email", {
  question: "Join our mailing list",
  required: true
});

composer.endSlide({});

composer.h1("Thank you", {
  classNames: ["text-center"]
});
composer.p("Subscribed to mailing list with {$ email $}.", {
  classNames: ["text-center"]
});
```

Generates the following Markdown-like syntax:

```
#! id = my-form

email* = EmailInput(
  | question = Join our mailing list
)

---
-> end

# [.text-center] Thank you

[.text-center]
Subscribed to mailing list with {$ email $}.
```

***

## Function overview

The following is the overview of the function:

```typescript
endSlide(params: object)
```

### Arguments

| Name     | Type     | Description                                                                                                                                              |
| -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `params` | `object` | An object containing all the configuration parameters for your end slide (see the [parameters section](#parameters) below for the full list of options). |

***

## Parameters

| Name          | Type     | Description                                                                              |
| ------------- | -------- | ---------------------------------------------------------------------------------------- |
| `redirectUrl` | `string` | URL to redirect to from the end slide after form submission. This redirect is automatic. |

***

## Examples

### End slide with redirect

In the example below, users will be automatically redirected to `https://example.com/confirmation` after form submission because of the `redirectUrl`.

```javascript
composer.textInput("feedback", {
  question: "Any additional comments?",
  multiline: true
});

composer.endSlide({
  redirectUrl: "https://example.com/confirmation"
});

composer.h1("Submission complete");
composer.p("Thank you for taking the time to provide feedback.");
```

Generates the following Markdown-like syntax:

```
feedback = TextInput(
  | question = Any additional comments?
  | multiline
)

---
-> end -> https://example.com/confirmation

# Submission complete

Thank you for taking the time to provide feedback.
```

### Basic end slide

In the example below, the end slide simply displays a completion message without redirecting.

```javascript
composer.ratingInput("rating", {
  question: "How would you rate our service?",
  outOf: 5,
  required: true
});

composer.endSlide({});

composer.h1("Thanks for your rating!");
composer.p("We appreciate your feedback and will use it to improve our service.");
```

Generates the following Markdown-like syntax:

```
rating* = RatingInput(
  | question = How would you rate our service?
  | outOf = 5
)

---
-> end

# Thanks for your rating!

We appreciate your feedback and will use it to improve our service.
```

### End slide with restart button

Set the `restartButton` [form setting](/getting-started/settings.md) to `"show"` to add a restart button to the end slide. When clicked, this button will restart the form from the very beginning.

<figure><img src="/files/Vmf1WbnbTGjqh4VfmwWN" alt=""><figcaption><p>End slide with restart button</p></figcaption></figure>

```javascript
import { Composer } from "formsmd";

const composer = new Composer({
  id: "my-form",
  restartButton: "show"
});

composer.emailInput("email", {
  question: "Join our mailing list",
  required: true
});
```

Generates the following Markdown-like syntax:

```
#! id = my-form
#! restart-button = show

email* = EmailInput(
  | question = Join our mailing list
)
```

## FAQs

### [How do I run a function after form submission?](/getting-started/frequently-asked-questions.md#how-do-i-run-a-function-after-form-submission) <a href="#how-do-i-run-a-function-after-form-submission" id="how-do-i-run-a-function-after-form-submission"></a>


---

# 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/content/end-slide.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.