# Start slide

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

<div><figure><img src="https://824814026-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRq8uKg8VhNAvWTRL52uz%2Fuploads%2FV8v9cGxzECOg8i4jOOcJ%2Fstart-slide-1.png?alt=media&#x26;token=0382ef56-bd39-451a-a797-80a29b698af4" alt=""><figcaption><p>Start slide</p></figcaption></figure> <figure><img src="https://824814026-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRq8uKg8VhNAvWTRL52uz%2Fuploads%2F4cUmvALV51TVGRla1kSz%2Fstart-slide-2.png?alt=media&#x26;token=ec2309a1-c250-4b2e-bdb4-778eb3791a5e" alt=""><figcaption><p>Slide containing the input</p></figcaption></figure></div>

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

```typescript
startSlide(params: object)
```

### Arguments

| Name     | Type     | Description                                                                                                                                                |
| -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `params` | `object` | An object containing all the configuration parameters for your start slide (see the [parameters section](#parameters) 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.

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

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

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