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. [Utility & Helpers](/categories/utility) 4. / 5. belsignum/form-carousel ActiveTypo3-cms-extension[Utility & Helpers](/categories/utility) 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) ``` ### Alternatives [joanhey/adapterman Use any framework and application with Workerman. 85255.9k1](/packages/joanhey-adapterman)[kunstmaan/seo-bundle Annotating content with metadata for social sharing and seo purposes cannot be overlooked nowadays. The KunstmaanSeoBundle contains default editing functionality for OpenGraph data, meta descriptions, keywords and titles and Metriweb tags. Because the metatagging and tracking options are always changing, a free field to add custom header information is provided as well. 24130.0k2](/packages/kunstmaan-seo-bundle) PHPackages Β© 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)