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.
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
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
)
An object containing all the configuration parameters for your start slide (see the below for the full list of options).
