> ## Documentation Index
> Fetch the complete documentation index at: https://docs.penbox.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Portal pages

> The welcome, review and ending screens that frame a form

Around the form steps, a template defines three screens: the **welcome** page a contact lands on, the **review** page shown before final submission, and the **ending** page shown once the form is sent.

<Steps>
  <Step title="Welcome">
    The contact opens the link and reads what the form is for.
  </Step>

  <Step title="Steps">
    They fill in the [elements](/forms/form-templates/elements), step by step.
  </Step>

  <Step title="Review">
    They check their answers, then send.
  </Step>

  <Step title="Ending">
    They get a confirmation, and optionally a redirect.
  </Step>
</Steps>

## Disabling a page

Every page takes an `enabled` flag. Turning it off does more than hide the screen:

| Page    | `enabled: false` means                                                              |
| ------- | ----------------------------------------------------------------------------------- |
| Welcome | The contact lands directly on the first step.                                       |
| Review  | The form **submits automatically** once the last step is done.                      |
| Ending  | The contact is **redirected automatically** to `redirect-url`, after a short delay. |

<Warning>
  The automatic redirect is driven by the ending page being *disabled*, not by
  setting `redirect-url` alone. To redirect without showing a confirmation
  screen, set `redirect-url` **and** `enabled: false`.
</Warning>

## Page options

Each page carries its texts under `options`. Every text can be localised, and every one falls back to a built-in default when left empty — so a template with no `options` at all still renders a complete portal.

<AccordionGroup>
  <Accordion title="Welcome page" id="welcome" icon="door-open">
    The first screen a contact sees when opening the form.

    | Option                  | Type               | Default                                                       | Description                                                                                               |
    | ----------------------- | ------------------ | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
    | `image`                 | `string \| object` | `cdn://pen-fill/hello.svg`                                    | Header image. A URL, a `cdn://` path, or an uploaded attachment as `{ "type": "attachment", "id": "…" }`. |
    | `title`                 | `string`           | `Hello {user.given_name}`                                     | Page title. Variables are resolved, so the default greets the contact by name.                            |
    | `message`               | `string`           | `Please use this secure form to provide us the required data` | Welcome message. HTML is supported.                                                                       |
    | `start-button`          | `string`           | `Let's get started`                                           | Caption of the button that opens the first step.                                                          |
    | `show-help-button`      | `boolean`          | `true`                                                        | Shows the help button.                                                                                    |
    | `help-text`             | `string`           | —                                                             | Custom help content, replacing the default help panel.                                                    |
    | `show-privacy-policy`   | `boolean`          | `true`                                                        | Shows the privacy policy notice.                                                                          |
    | `custom-privacy-policy` | `string`           | —                                                             | Your own privacy policy text, replacing the Penbox one.                                                   |

    ```json theme={null}
    {
      "welcome": {
        "enabled": true,
        "options": {
          "image": "cdn://pen-fill/hello.svg",
          "title": "Hello {user.given_name}",
          "message": "<p>Please use this secure form to send us your claim details.</p>",
          "start-button": "Let's get started",
          "show-help-button": true,
          "show-privacy-policy": true
        }
      }
    }
    ```

    <Tip>
      A clear welcome page raises completion rates. Say what the form is for, how
      long it takes, and why the information is needed.
    </Tip>
  </Accordion>

  <Accordion title="Review page" id="review" icon="list-check">
    Shown once every step is done, before the contact sends their answers. It has two states — **valid**, when everything required has been answered, and **invalid**, when something is still missing — each with its own texts.

    **Valid state**

    | Option                       | Type               | Default                                                                            | Description                                       |
    | ---------------------------- | ------------------ | ---------------------------------------------------------------------------------- | ------------------------------------------------- |
    | `valid-image`                | `string \| object` | `cdn://pen-fill/one_last_thing.svg`                                                | Image shown when the form is complete.            |
    | `valid-title`                | `string`           | `Send your responses !`                                                            | Title shown when the form is complete.            |
    | `valid-message`              | `string`           | `Please click on Send to complete. To check or modify your data, click on modify.` | Instructions shown above the buttons.             |
    | `valid-submit-button`        | `string`           | `Send`                                                                             | Caption of the send button.                       |
    | `valid-modify-button`        | `string`           | `Modify`                                                                           | Caption of the button that goes back to the form. |
    | `valid-confirmation-message` | `string`           | `By sending the information, you confirm it is correct and accurate.`              | Statement the contact confirms by sending.        |

    **Invalid state**

    | Option            | Type               | Default                                    | Description                                     |
    | ----------------- | ------------------ | ------------------------------------------ | ----------------------------------------------- |
    | `invalid-image`   | `string \| object` | `cdn://pen-fill/one_last_thing.svg`        | Image shown when answers are missing.           |
    | `invalid-title`   | `string`           | `Your responses are incomplete !`          | Title shown when answers are missing.           |
    | `invalid-message` | `string`           | `We still need some information from you.` | Explanation of what is left to do.              |
    | `invalid-button`  | `string`           | `Go back`                                  | Caption of the button that returns to the form. |

    ```json theme={null}
    {
      "submit": {
        "enabled": true,
        "options": {
          "valid-title": "Send your claim",
          "valid-submit-button": "Send",
          "valid-modify-button": "Modify",
          "invalid-title": "Something is still missing",
          "invalid-button": "Back to the form"
        }
      }
    }
    ```

    <Note>
      The review page is configured under the `submit` key, not `review`.
    </Note>
  </Accordion>

  <Accordion title="Ending page" id="ending" icon="circle-check">
    Shown after a successful submission.

    | Option         | Type               | Default                           | Description                                                                                    |
    | -------------- | ------------------ | --------------------------------- | ---------------------------------------------------------------------------------------------- |
    | `image`        | `string \| object` | `cdn://pen-fill/well-done.svg`    | Confirmation image.                                                                            |
    | `title`        | `string`           | `Your answers are being treated!` | Confirmation title.                                                                            |
    | `message`      | `string`           | `You can now close this window.`  | Closing message. HTML is supported.                                                            |
    | `rate-ux`      | `boolean`          | `true`                            | Shows the satisfaction rating widget.                                                          |
    | `redirect-url` | `string`           | —                                 | Where to send the contact afterwards. Combine with `enabled: false` to redirect automatically. |

    ```json theme={null}
    {
      "ending": {
        "enabled": true,
        "options": {
          "image": "cdn://pen-fill/well-done.svg",
          "title": "Thank you, your claim is on its way",
          "message": "Our team will come back to you within two working days.",
          "rate-ux": true
        }
      }
    }
    ```
  </Accordion>
</AccordionGroup>

## Next steps

<CardGroup cols={2}>
  <Card title="Elements" icon="input-text" href="/forms/form-templates/elements">
    Every element type and its options
  </Card>

  <Card title="Steps and logic" icon="list-ol" href="/forms/form-templates/steps">
    Organise elements into steps and branch on answers
  </Card>

  <Card title="Embedding" icon="code" href="/forms/embedding">
    Show a form inside your own site
  </Card>

  <Card title="Form templates" icon="file-lines" href="/forms/form-templates">
    Back to form templates
  </Card>
</CardGroup>