PHPackages helsingborg-stad/modularity-frontend-form - 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. helsingborg-stad/modularity-frontend-form ActiveWordpress-plugin[Utility & Helpers](/categories/utility) helsingborg-stad/modularity-frontend-form ========================================= Frontend Form for Modularity. 0.81.2(1mo ago)0111[8 PRs](https://github.com/helsingborg-stad/modularity-frontend-form/pulls)MITPHPCI failing Since Apr 25Pushed 1mo ago3 watchersCompare [ Source](https://github.com/helsingborg-stad/modularity-frontend-form)[ Packagist](https://packagist.org/packages/helsingborg-stad/modularity-frontend-form)[ RSS](/packages/helsingborg-stad-modularity-frontend-form/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (18)Versions (267)Used By (0) Modularity Frontend Form ======================== [](#modularity-frontend-form) A modular, accessible, and extensible multi-step frontend form system for WordPress, built with TypeScript, PHP, and SCSS. Supports custom field types, validation, REST API integration, and advanced admin configuration. --- Features -------- [](#features) - **Multi-step forms**: Create forms with any number of steps, each with its own fields, validation, and UI. - **Custom field types**: Supports text, email, date, checkbox, select, WYSIWYG, repeater, and more. - **Progress bar**: Visual step progress indicator with validation feedback. - **REST API integration**: Submit, update, and read form data via secure endpoints. - **Admin configuration**: Use ACF to configure steps, fields, handlers, and logic. - **Validation**: Client and server-side validation, including custom error messages. - **Accessibility**: ARIA attributes, keyboard navigation, and semantic HTML. - **Status overlays**: User feedback for loading, errors, and success. - **Security**: Nonces, token validation, and output escaping. - **Extensible**: Add custom field types, handlers, and hooks. --- Usage ----- [](#usage) ### 1. Add a Form Module [](#1-add-a-form-module) - In WordPress admin, add a new "Frontend Form" module. - Configure steps and fields using the ACF field group "Configure Multistep Form". - Each step can have a title, description, and any number of fields. - Supported field types: text, email, date, checkbox, select, WYSIWYG, repeater, etc. ### 2. Configure Submission Handlers [](#2-configure-submission-handlers) - Choose where submissions are sent: Database, E-Mail, Webhook. - Configure handler settings in the module admin (e.g., webhook URL, email recipient). ### 3. Display the Form [](#3-display-the-form) - Use the module in any Modularity-enabled area (template, block, shortcode). - The form will render with animated step transitions, progress bar, and validation. ### 4. REST API Endpoints [](#4-rest-api-endpoints) - Submit: `POST /wp-json/modularity-frontend-form/v1/submit/post` - Update: `POST /wp-json/modularity-frontend-form/v1/submit/update` - Read: `GET /wp-json/modularity-frontend-form/v1/read/get` - Nonce: `GET /wp-json/modularity-frontend-form/v1/nonce/get` - All endpoints require valid nonces and tokens for security. ### 5. Customization [](#5-customization) - Add new field types by extending the JS/TS field architecture. - Add new handlers by implementing PHP handler interfaces. - Use SCSS variables for theming in `sass/_variables.scss`. - Override translations in the admin or via language files. --- Example: Basic Usage -------------------- [](#example-basic-usage) 1. **Add a module**: - Go to "Add Module" → "Frontend Form". - Configure steps and fields. 2. **Display in template**: - Use Modularity's template system or shortcode to render the form. 3. **Handle submissions**: - Data is stored, emailed, or sent to a webhook as configured. --- Developer Guide --------------- [](#developer-guide) - **JS/TS**: All frontend logic is in `/source/js/`. Use TypeScript interfaces for all APIs. - **PHP**: Backend logic, REST API, and admin config in `/source/php/`. - **SCSS**: Styles in `/source/sass/`. Use variables for theming. - **Tests**: Unit tests are next to source files. Run with `npm test` (JS/TS) or `composer test` (PHP). - **Linting**: Use `npm run lint` for JS/TS. --- Accessibility & UX ---------------------- [](#accessibility--ux) - All UI components are ARIA-compliant and keyboard accessible. - Animations are smooth and non-blocking. - Progress bar and step navigation are visually clear. --- Security -------- [](#security) - All output is escaped in PHP templates. - All user input is validated and sanitized. - Nonces and tokens are required for all REST API requests. --- Extending the Plugin -------------------- [](#extending-the-plugin) - **Add a field type**: Create a new JS/TS class in `/source/js/fields/field/`. - **Add a handler**: Implement a PHP handler in `/source/php/DataProcessor/Handlers/`. - **Add a REST endpoint**: Extend `/source/php/Api/`. Actions ------- [](#actions) ### ModularityFrontendForm/afterInsertPost [](#modularityfrontendformafterinsertpost) - `@param int|WP_Error $result` ``` do_action('ModularityFrontendForm/afterInsertPost', $result); ``` --- Contribution Guidelines ----------------------- [](#contribution-guidelines) - Fork, branch, and submit pull requests for all changes. - Write clear commit messages. - Review code for style, security, and performance. - Follow the standards in `.github/copilot-instructions.md`. --- License ------- [](#license) MIT --- For more details, see `.github/copilot-instructions.md` and the source code. All code, documentation, and contributions must follow workspace guidelines. ### Health Score 42 — FairBetter than 90% of packages Maintenance92 Actively maintained with recent releases Popularity12 Limited adoption so far Community13 Small or concentrated contributor base Maturity46 Maturing project, gaining track record Bus Factor1 Top contributor holds 90.7% 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. ### Release Activity Cadence Every ~1 days Recently: every ~13 days Total 154 Last Release 43d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/f46fe64973c3e89d15c745c0bf601c25983bafea81d30e64d4bf813a6f8c8c7c?d=identicon)[sebastianthulin](/maintainers/sebastianthulin) --- Top Contributors [![NiclasNorin](https://avatars.githubusercontent.com/u/103985736?v=4)](https://github.com/NiclasNorin "NiclasNorin (626 commits)")[![sebastianthulin](https://avatars.githubusercontent.com/u/797129?v=4)](https://github.com/sebastianthulin "sebastianthulin (45 commits)")[![thorbrink](https://avatars.githubusercontent.com/u/1064724?v=4)](https://github.com/thorbrink "thorbrink (17 commits)")[![nRamstedt](https://avatars.githubusercontent.com/u/16800993?v=4)](https://github.com/nRamstedt "nRamstedt (1 commits)")[![Sven65](https://avatars.githubusercontent.com/u/10225982?v=4)](https://github.com/Sven65 "Sven65 (1 commits)") ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/helsingborg-stad-modularity-frontend-form/health.svg) ``` [![Health](https://phpackages.com/badges/helsingborg-stad-modularity-frontend-form/health.svg)](https://phpackages.com/packages/helsingborg-stad-modularity-frontend-form) ``` ### Alternatives [helsingborg-stad/municipio A bootstrap theme for creating municipality sites. 4127.7k10](/packages/helsingborg-stad-municipio) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)