PHPackages                             belsignum/form-carousel - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. belsignum/form-carousel

ActiveTypo3-cms-extension

belsignum/form-carousel
=======================

AJAX step transitions for EXT:form using Bootstrap-like carousel animations.

01JavaScript

Since Oct 21Pushed 6mo agoCompare

[ Source](https://github.com/Andreas-Sommer/form-carousel)[ Packagist](https://packagist.org/packages/belsignum/form-carousel)[ RSS](/packages/belsignum-form-carousel/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

TYPO3 Extension: form\_carousel
===============================

[](#typo3-extension-form_carousel)

`form_carousel` extends the TYPO3 system extension **form** with a modern, animated, step-by-step rendering. Instead of full page reloads, each form step is loaded asynchronously (AJAX) and displayed with **Bootstrap carousel slide animations**.

---

Features
--------

[](#features)

- 🚀 **AJAX-based step navigation** — no full reload between steps
- 🎞 **Bootstrap slide animations** (forward/back)
- ⏳ **Loading overlay** with Bootstrap spinner
- ✅ **Validation**
    - HTML5 client-side check prevents unnecessary requests
    - Server-side errors are displayed inline inside the active step
- 🔄 **Progress indicators**
    - `dots` (Bootstrap-style, non-interactive, developer-styled)
    - `progress` (progress bar)
    - `none` (no indicator)
- ♿ **Accessible controls**: Prev/Next buttons are automatically decorated as Bootstrap `carousel-control-prev`/`carousel-control-next`
- 🔌 **Developer events** for hooks and extensions
- 🔀 **Redirect finisher support** — handled as real browser redirects
- 🧩 **Multiple forms per page** — each carousel instance works independently

---

Installation
------------

[](#installation)

### Composer

[](#composer)

```
composer require belsignum/form-carousel
```

---

Usage
-----

[](#usage)

1. **Enable in content element**In `tt_content` of the form plugin you’ll find a field **“Render EXT:form as carousel (AJAX slide)”**. If enabled, the form is wrapped with `…`.
2. **TypoScript**The extension ships with TypoScript that is auto-loaded. It adds the wrapper to `tt_content.form_formframework`.
3. **JavaScript**Import and initialize the module in your build (e.g. Vite):

    ```
    import { FormCarousel } from 'vendor/belsignum/form-carousel/Resources/Public/JavaScript/form-carousel.esm.js';

    window.addEventListener('DOMContentLoaded', () => {
      FormCarousel.initAll(document);
    });
    ```
4. **Indicators**Configure per wrapper via `data-indicators`:

    - `dots` → Bootstrap-like dots (display-only)
    - `progress` → progress bar
    - `none` → disabled

---

Proxy navigation (outside slides)
---------------------------------

[](#proxy-navigation-outside-slides)

Prev/Next are rendered **outside** of the animated slides as **proxy controls**. This prevents the navigation UI from being animated together with the slide and keeps controls fixed in place.

- Proxies live as direct children of the `.form-carousel` wrapper: `.fc-control-prev` and `.fc-control-next` (both use Bootstrap `carousel-control-*` classes).
- Proxies **trigger the original** Prev/Next submitters inside the current form step.
- If a step has **no** Prev or **no** Next (or only a Submit), the corresponding proxy is **not** rendered.
- During requests or transitions the whole wrapper is temporarily locked via `pe-none` (see `lockUi()` / `unlockUi()` in the code).

**Note on in-slide buttons**You can safely hide the original in-slide Prev/Next (but not the Submit) via CSS so they do not show up inside the slide:

```
.form-carousel {
  .btn-group:is(.next:not(.submit), .previous) {
    display: none;
  }
}
```

This keeps the original buttons in the DOM for EXT:form logic, while the proxies provide the UX.

---

Events
------

[](#events)

Each `FormCarousel` instance dispatches **CustomEvents** on the document with the prefix `formcarousel:`. Listen with `document.addEventListener(eventName, handler)`.

**List of events:**

- **`formcarousel:beforeSubmit`** — right before an AJAX request is sent. `detail: { stepType, form, submitter }` (cancelable)
- **`formcarousel:validationFailed`** — HTML5 validation blocked submission. `detail: { stepType, form, submitter }`
- **`formcarousel:beforeSlide`** — when a slide transition is about to start. `detail: { direction }`
- **`formcarousel:afterSlide`** — when a slide transition is finished. `detail: { direction, form }`
- **`formcarousel:stepIndexChange`** — when the `data-step-index` changes. `detail: { previous, current }`
- **`formcarousel:decorateControls`** — after Prev/Next/Submit buttons are decorated. `detail: { form }`
- **`formcarousel:indicatorsUpdate`** — whenever indicators (dots/progress) are updated. `detail: { index, total }`
- **`formcarousel:serverError`** — server response contains validation errors. `detail: { form }`

**Example usage:**

```
document.addEventListener('formcarousel:afterSlide', e => {
    console.log('Slide finished', e.detail);
});

document.addEventListener('formcarousel:stepIndexChange', e => {
    console.log('Step changed:', e.detail.current);
});
```

---

Styling Indicators
------------------

[](#styling-indicators)

The extension does not provide full design for dots. Developers are expected to style them. Example SCSS:

```
.form-carousel .carousel-indicators {
  button {
    background: none;
    border: none;
    padding: 0;
    color: var(--bs-primary);
    pointer-events: none;
    &.active {
      color: var(--bs-primary);
    }
    &:after {
      content: "•";
      font-size: calc(var(--bs-font-size-base) * 1.875);
      font-weight: 900;
    }
  }
}
```

---

Requirements
------------

[](#requirements)

- TYPO3 v12+
- EXT:form enabled
- Bootstrap 5 (CSS for carousel + spinner)

---

Notes
-----

[](#notes)

- Bootstrap carousel **JavaScript is not instantiated**. Instead, this extension directly toggles Bootstrap’s **CSS classes** to achieve sliding animations.
- Indicators are **display-only** and intentionally not interactive.

---

License
-------

[](#license)

MIT License © 2025 [belsignum UG](https://belsignum.com)

###  Health Score

17

—

LowBetter than 6% of packages

Maintenance46

Moderate activity, may be stable

Popularity1

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity13

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/03d3db83203d6cf93e3b12cb86a8bd2dafe17669d605933d352c34eb607bea0e?d=identicon)[belsignum](/maintainers/belsignum)

---

Top Contributors

[![Andreas-Sommer](https://avatars.githubusercontent.com/u/30976558?v=4)](https://github.com/Andreas-Sommer "Andreas-Sommer (5 commits)")

### Embed Badge

![Health badge](/badges/belsignum-form-carousel/health.svg)

```
[![Health](https://phpackages.com/badges/belsignum-form-carousel/health.svg)](https://phpackages.com/packages/belsignum-form-carousel)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)