Start slide

Add a start slide to create a landing page for your form.

Basic usage

The startSlide() function creates a special slide type that acts as an entry point for your form. This slide will show a start button that users must click to begin filling out the form. You can customize the button text and alignment to match your form's design.

In the example below, the start slide contains a welcome message. The start button is centered on the page, as well as the rest of the content.

Start slide

Slide containing the input

import { Composer } from "formsmd";

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

composer.startSlide({
  buttonAlignment: "center"
});

composer.h1("Welcome to our survey!", {
  classNames: ["text-center"]
});
composer.p("We appreciate you taking the time to share your feedback with us.", {
  classNames: ["text-center"]
});

composer.slide({});

composer.choiceInput("experience", {
  question: "How was your experience with our product?",
  choices: ["Excellent", "Good", "Fair", "Poor"],
  required: true
});

Generates the following Markdown-like syntax:

#! id = my-form

-> start
=| center

# [.text-center] Welcome to our survey!

[.text-center]
We appreciate you taking the time to share your feedback with us.

---
experience* = ChoiceInput(
  | question = How was your experience with our product?
  | choices = Excellent, Good, Fair, Poor
)

---

Function overview

The following is the overview of the function:

startSlide(params: object)

Arguments

Name	Type	Description
params	object	An object containing all the configuration parameters for your start slide (see the parameters section below for the full list of options).

---

Parameters

Name	Type	Description
buttonText	string	Custom text for the start button. Default is "Start".
buttonAlignment	"start" | "center" | "end" | "stretch"	Set the alignment of this slide's start button.

---

Examples

Start slide with custom button text

In the example below, the start button will have the "Start feedback" text because of the buttonText parameter.

composer.startSlide({
  buttonText: "Start feedback"
});

composer.h1("Welcome!");
composer.p("Please take a moment to complete this feedback form.");

composer.slide({});

composer.textInput("fullName", {
  question: "What is your name?",
  required: true
});

Generates the following Markdown-like syntax:

-> start -> Start feedback

# Welcome!

Please take a moment to complete this feedback form.

---
fullName* = TextInput(
  | question = What is your name?
)

Start slide with button alignment

In the example below, the start button will be aligned to the end of the slide because of the buttonAlignment parameter.

composer.startSlide({
  buttonAlignment: "end"
});

composer.h1("Product survey");
composer.p("Share your thoughts about our latest product.");

composer.slide({});

composer.textInput("feedback", {
  question: "What do you think about our product?",
  multiline: true
});

Generates the following Markdown-like syntax:

-> start
=| end

# Product survey

Share your thoughts about our latest product.

---
feedback = TextInput(
  | question = What do you think about our product?
  | multiline
)

Start slide with multiple parameters

composer.startSlide({
  buttonText: "Start survey",
  buttonAlignment: "center"
});

composer.h1("Customer feedback");
composer.p("Your feedback helps us improve our services.");

composer.slide({});

composer.choiceInput("satisfaction", {
  question: "How satisfied are you with our service?",
  choices: ["Very Satisfied", "Satisfied", "Neutral", "Dissatisfied"]
});

Generates the following Markdown-like syntax:

-> start -> Start survey
=| center

# Customer feedback

Your feedback helps us improve our services.

---
satisfaction = ChoiceInput(
  | question = How satisfied are you with our service?
  | choices = Very Satisfied, Satisfied, Neutral, Dissatisfied
)