End slide

Add an end slide to create a completion page after form submission.

Basic usage

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.

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

Slide containing the input

End slide

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:

endSlide(params: object)

Arguments

Name	Type	Description
params	object	An object containing all the configuration parameters for your end slide (see the parameters section 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.

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.

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 to "show" to add a restart button to the end slide. When clicked, this button will restart the form from the very beginning.

End slide with restart button

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?