PHPackages                             wisam-alhennawi/lara-forms-builder - 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 &amp; Helpers](/categories/utility)
4. /
5. wisam-alhennawi/lara-forms-builder

ActiveLibrary[Utility &amp; Helpers](/categories/utility)

wisam-alhennawi/lara-forms-builder
==================================

This is my package lara-forms-builder

v2.2.1(10mo ago)24.4k↑16.7%2[1 issues](https://github.com/wisam-alhennawi/lara-forms-builder/issues)[4 PRs](https://github.com/wisam-alhennawi/lara-forms-builder/pulls)MITBladePHP ^8.1|^8.2|^8.3|^8.4CI passing

Since Mar 17Pushed 1mo ago2 watchersCompare

[ Source](https://github.com/wisam-alhennawi/lara-forms-builder)[ Packagist](https://packagist.org/packages/wisam-alhennawi/lara-forms-builder)[ Docs](https://github.com/wisam-alhennawi/lara-forms-builder)[ RSS](/packages/wisam-alhennawi-lara-forms-builder/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (14)Versions (46)Used By (0)

lara-forms-builder package
==========================

[](#lara-forms-builder-package)

[![Latest Version on Packagist](https://camo.githubusercontent.com/2ba91590f7c6085bfce65bb998fb74e790b2e57bd357afcce3938b81626e29dc/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f776973616d2d616c68656e6e6177692f6c6172612d666f726d732d6275696c6465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/wisam-alhennawi/lara-forms-builder)[![GitHub Tests Action Status](https://camo.githubusercontent.com/160c244d94cc368c0d368db9fc7418e30947dedb3e92ed70c67ac69577fce2e1/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f776973616d2d616c68656e6e6177692f6c6172612d666f726d732d6275696c6465722f72756e2d74657374733f6c6162656c3d7465737473)](https://github.com/wisam-alhennawi/lara-forms-builder/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/b4e41bc5724abea8d8c45421d05227828d4a91dc02de24e77a48cdbe6d5090b8/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f776973616d2d616c68656e6e6177692f6c6172612d666f726d732d6275696c6465722f466978253230504850253230636f64652532307374796c652532306973737565733f6c6162656c3d636f64652532307374796c65)](https://github.com/wisam-alhennawi/lara-forms-builder/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/a6dab81d0ebf0a592540b03c61d92ca524ca19f29bff9035f3b350f353a39630/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f776973616d2d616c68656e6e6177692f6c6172612d666f726d732d6275696c6465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/wisam-alhennawi/lara-forms-builder)

About
-----

[](#about)

The main functionality of this package is:

- Generate Livewire forms (Show, Create, Update) by using one command and one Livewire component.

Laravel and PHP versions compatibility
--------------------------------------

[](#laravel-and-php-versions-compatibility)

lara-forms-builderLaravelPHP`= v2.2.*``^10.0` | `^11.0` | `^12.0``^8.1` | `^8.2` | `^8.3` | `^8.4`Requirements
------------

[](#requirements)

The following dependencies are required to use the package:

DependencyVersionPHP[8.x](https://www.php.net/releases/8.0/en.php)Laravel[10.x](https://laravel.com/docs/10.x)Jetstream[5.x](https://jetstream.laravel.com/)💡Livewire[3.x](https://livewire.laravel.com/docs/quickstart)💡Alpine.js[3.x](https://alpinejs.dev/)💡TailwindCSS[3.x](https://tailwindcss.com/docs)💡Pikaday[1.x](https://github.com/Pikaday/Pikaday)💡Moment[2.x](https://momentjs.com/docs/)💡💡 =&gt; You can install it with Auto Setup &amp; Configuration.

> Note that (pikaday &amp; moment) npm packages is required only if you have a date field within your form.

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

[](#installation)

```
composer require wisam-alhennawi/lara-forms-builder
```

Upgrade Guide
-------------

[](#upgrade-guide)

If you want to use the package in an existing project that use v1 the following changed are required.

all placed uses `$this->property` should be replaced with `$this->formProperties['property']`

```
     // V1
     $this->email
     // V2
     $this->formProperties['email']

     // V1
     $this->rules['email']
     // V2
     $this->rules['formProperties.email']
```

Auto Setup &amp; Configuration
------------------------------

[](#auto-setup--configuration)

```
php artisan make:lara-forms-builder-setup
```

This command will do the following:

- Install `"laravel/jetstream": "^5.0"` with `"livewire/livewire": "^3.0"` if not installed. Installing jetstream will install `"tailwindcss": "^3.0"` &amp; `"alpinejs": "^3.0"`.
- Install `"pikaday": "^1.0"` and `"moment": "^2.0"` npm packages and make required configuration.
- Add confirmation modal component to `app.blade.php` layout.
- publish `lara-forms-builder.php` config file and make required configuration.
- publish `lara-forms-builder.css` assets file and make required configuration.
- Run `npm install` &amp; `npm run build`.

Configuration
-------------

[](#configuration)

### Publishing Assets

[](#publishing-assets)

1. #### Config **(Mandatory)**

    [](#config-mandatory)

    You Must publish the config file and add it to the `tailwind.config.js` in order to apply the styles:

    ```
    php artisan vendor:publish --tag="lara-forms-builder-config"
    ```

    This is the contents of the published config file:

    ```
    return [
        'default_group_wrapper_class' => 'lfb-group-wrapper',
        'default_field_wrapper_class' => 'lfb-field-wrapper',
        'card_field_error_wrapper_classes' => 'shadow mb-4 overflow-hidden rounded-md col-span-2 sm:col-span-2',
        'primary_button_classes' => 'lfb-primary-button',
        'secondary_button_classes' => 'lfb-secondary-button',
        'footer_buttons_wrapper_classes' => 'lfb-buttons-wrapper',
        'previous_button_classes' => 'lfb-secondary-button',
        'next_button_classes' => 'lfb-primary-button',
    ];
    ```

    Update `tailwind.config.js`:

    ```
    export default {
         content: [
         './config/lara-forms-builder.php',
        ],
         theme: {
             extend: {
                 colors: {
                     'primary': '', // #7c8e63
                     'secondary': '', // #aebf85
                     'danger': '' // #DC3545
                 },
             },
         },
    };
    ```
2. #### CSS **(Mandatory)**

    [](#css-mandatory)

    Publishing css file is **Mandatory** to apply styles.

    ```
    php artisan vendor:publish --tag="lara-forms-builder-assets"
    ```

    That will make a new css file `lara-forms-builder.css` in the `public/vendor/lara-forms-builder/css/` directory. After that you must import this file with your `resources/css/app.css` by adding:

    ```
    @import "../../public/vendor/lara-forms-builder/css/lara-forms-builder.css";
    ```

    And feel free to edit the default style in `lara-forms-builder.css` to fulfil your form requirements style.
3. #### Translation (optional)

    [](#translation-optional)

    ```
    php artisan vendor:publish --tag="lara-forms-builder-translations"
    ```
4. #### Views (optional)

    [](#views-optional)

    ```
    php artisan vendor:publish --tag="lara-forms-builder-views"
    ```

### Using date in form (optional)

[](#using-date-in-form-optional)

Like it mention in the Requirements section if your form has a date field you must install required dependencies by following these steps:

- Installing pikaday:

    ```
    npm install pikaday
    ```

    add these to your `resources/js/app.js`

    ```
    import Pikaday from 'pikaday';
    window.Pikaday = Pikaday;
    ```

    add these to your `resources/css/app.css`

    ```
    @import 'pikaday/css/pikaday.css';
    ```
- Installing moment:

    ```
    npm install moment
    ```

### Use confirmation modal

[](#use-confirmation-modal)

In order to use the confirmation modal within your project you must include it globally in the default layout of your blade view where you want to use it. So you can add `@livewire('modals.confirmation')` to your `views/layouts/app.blade.php` inside the html `` tag.

Usage
-----

[](#usage)

### Create new Livewire from

[](#create-new-livewire-from)

By using this command you can create a new Livewire form depending on a model, additionally you can add \[--langModelFileName=\] tag to specify a lang file for model fields labels:

```
php artisan make:lara-forms-builder name model --langModelFileName=
```

Examples:

```
php artisan make:lara-forms-builder UserForm User --langModelFileName=users
php artisan make:lara-forms-builder Users.UserForm User --langModelFileName=users       //this will make a UserForm component inside Users directory.
```

### Form Component Types and Attributes

[](#form-component-types-and-attributes)

Forms are specified in a declarative manner as an array of the `fields` function in the form component class.

`beforeFormProperties()`, `afterFormProperties()` functions used to set options, values, etc. before/after setting the form properties (e.g. developers options in the following example).

`saveDevelopers()` function used to make operation after create/update a model (e.g. developers ids &amp; project id will be saved in pivot table in the following example).

**Note:** `saveDevelopers()`functions should follow the naming convention of the form field name `developers`.

```
public array $developersOptions = []; // For 'checkbox-group' options
public array $userIdOptions = []; // For 'user_id' options

public function beforeFormProperties(): void
{
    $this->developersOptions = User::all(['id as value', 'name as label'])->toArray();
}

public function afterFormProperties(): void
{
    $this->formProperties['developers'] = $this->model->developers->pluck('id');
}

protected function fields(): array
    {
        return [
            [
                'fields' => [
                    'title' => [
                        'type' => 'input',
                        'label' => __('models/projects.fields.title'),
                        'readOnly' => true
                    ],
                    'status' => [
                        'type' => 'select',
                        'label' => __('models/projects.fields.status'),
                        'styled' => true,
                        'searchable' => true,
                        'options' => [
                            [
                                'value' => '1',
                                'label' => __('Pending')
                            ],
                            [
                                'value' => '2',
                                'label' => __('Active')
                            ],
                            [
                                'value' => '3',
                                'label' => __('Completed')
                            ]
                        ]
                    ],
                    'type' => [
                        'type' => 'radio',
                        'label' => __('models/projects.fields.type'),
                        'options' => [
                            '1' => __('Public'),
                            '2' => __('Private')
                        ]
                    ],
                    'starting_date' => [
                        'type' => 'date-picker',
                        'label' => __('models/projects.fields.starting_date'),
                    ],
                    'user_id' => [
                        'type' => 'search-picker',
                        'label' => __('models/projects.fields.user_id'),
                        'searchPickerResultsProperty' => 'userIdOptions',
                        'placeholder' => __('Search for Team Leader'),
                    ],
                    'is_accepted' => [
                        'type' => 'checkbox',
                        'label' => __('models/projects.fields.is_accepted'),
                    ],
                    'description' => [
                        'type' => 'textarea',
                        'label' => __('models/projects.fields.description'),
                        'field_wrapper_class' => 'col-span-2',
                    ],
                    'developers' => [
                        'type' => 'checkbox-group',
                        'label' => __('models/projects.fields.developers'),
                        'options' => $this->developersOptions,
                    ],
                    'document' => [
                        'type' => 'file',
                        'label' => __('models/projects.fields.document'),
                    ],
                ]
            ]
        ];
    }

public function saveDevelopers($validated_date) {
    $this->model->developers()->sync($validated_date);
}

public function getUserIdOptions($searchPickerTerm)
{
    return User::select('id', 'name')
        ->where('name', 'like', '%' . $searchPickerTerm . '%')
        ->get()
        ->each(function($row){
            $row->key = $row->id;
            $row->value = $row->name;
            $row->labels = collect(['White', 'Green', 'Blue', 'Red', 'Yellow'])->random(rand(0, 3))->toArray();
        })
        ->toArray();
}

// will return ($user_id_search_picker_selected_value) which used in blade to display the selected option
public function getUserIdSearchPickerSelectedValueProperty()
{
    if ($this->formProperties['user_id']) {
        return User::find($this->formProperties['user_id'])->name;
    }
    return null;
}
```

The definition above is then rendered as displayed in this screenshot (with additional language dependent translations for the labels required):

[![Rendered Form according to code snippet](Example-Form.JPG)](Example-Form.JPG)

All form components have the following general properties:

- `type` (mandatory): Specifies the kind of form component, see the following subsections for supported types and their individual properties
- `label` (mandatory): Label text of the component, can also include HTML tags (please handle responsibly and do not allow user input to be used as labels)
- `validationAttribute` (optional): If set, the value will be used as the attribute label for validation messages. If not set, the `label` is also used as a field name for validation messages.
- `helpText` (optional): Help text displayed at the bottom of the component
- `readOnly` (optional): When set to true, the form field does not allow input or changes and only displays the current value
- `rules` (optional): Validation rules to be applied for this field. If not set, Eloquent model rules for the field with the same name will be used if available, otherwise no rules are applied.
- `field_wrapper_class` (optional): CSS class(es) to be added to the div that encloses the form component
- `tooltip` (optional): if set, the value is displayed as text in a tooltip on hover over a question mark icon rendered next to the label text

#### Type `input`

[](#type-input)

The `input` form field is a classic html input element. It has the following additional properties:

- `inputType` (optional): Specifies the specific type of input, e.g. email, number, url. Default if not provided is text.
- `secretValueToggle` (optional): Flag relevant for input type password, if set to true, an icon is displayed at the right end of the input field that allows to toggle the visilibity of the masked value on click.
- `fieldModifier` (optional): This parameter allows customization of Livewire's input handling behavior with Livewire's native modifiers. Simply pass a Livewire modifier string. For example:
    - `live.debounce.400ms` - Debounces input with 400ms delay
    - `live.throttle.750ms` - Throttles input to maximum 1 event per 750ms

If no modifier is specified, Livewire's default `live` modifier will be applied.

Example:

```
    'weight' => [
        'type' => 'input',
        'inputType' => 'number',
        'label' =>  __('models/dogs.fields.weight'),
        'fieldModifier' => 'live.debounce.400ms',
    ]
```

#### Type `textarea`

[](#type-textarea)

The `textarea` form field represents a text area and has the following additional properties:

- `rows` (optional): Defines the number of rows of the text area, default if not set is 5.

#### Type `select`

[](#type-select)

The `select` form field is a select box for single selection. It has the following additional properties:

- `options` (mandatory): Specifies the options to be displayed in the select box, provided as an array of objects with attributes `value` and `label` or a nested array of group label to array of objects with attributes `value` and `label` when grouped.
- `isGrouped` (optional): Defines whether the options are grouped, default when not set is false.
- `styled` (optional, not combinable with `isGrouped`): When set to true, uses a stylable div based select component instead of the html select element.
- `searchable` (optional, only when `styled` is `true`): When set to true, adds a search field that allows to filter the options for search expressions (simple case insensitive substring matching)

#### Type `radio`

[](#type-radio)

The `radio` form field represents radio buttons and has the following additional properties:

- `options` (mandatory): Specifies the options for the radio button selection as a simple array `value => label`.

#### Type `cards`

[](#type-cards)

The `cards` form field is a special layout element used to select among different options by clicking on one of several cards with rich content and an icon. It has the following additional properties:

- `options` (mandatory): Specifies the options to be selected as an array of objects with attributes `value` and `label` (can be HTML).
- `icon` (optional): SVG markup or URL to be displayed as icon in all cards, if not set, no icon is displayed.
- `card_field_error_wrapper_class` (optional): CSS class(es) to be added to error message boxes.
- `errorMessageIcon` (optional): Customized icon markup to be displayed in an error message, if not set, a default icon is used.

#### Type `checkbox`

[](#type-checkbox)

The `checkbox` form field is a single checkbox and does not have any additional properties.

#### Type `checkbox-group`

[](#type-checkbox-group)

The `checkbox-group` form field is a multi-select group of checkboxes. It has the following additional properties:

- `options` (mandatory): Specifies the values and labels for the checkboxes, provided as an array of objects with attributes `value` and `label` or a nested array of category label to array of objects with attributes `value` and `label` when grouped by category.
- `hasCategory` (optional): Defines whether the checkbox entries are grouped by category, default if not set is false.

#### Type `date-picker`

[](#type-date-picker)

The `date-picker` form field adds a Pikaday date picker. It does not have any additional properties.

#### Type `file`

[](#type-file)

The `file` form field represents a file input for a single file upload. It has the following additional properties:

- `preview` (optional): If set to the value `image`, a preview of the uploaded or existing file is displayed. In order to properly show a preview of an existing file (when editing an existing model), the URL to download the existing file must be set as an additional property `$this.{$key . '_preview'}`, e.g. `contact_photo_preview` for a field key `contact_property`. The preview URL can be determined and set in the `afterFormProperties` function.
- `removeIcon` (optional): Customized icon markup to be displayed as the icon to remove/reset a selected file before saving. If not set, a default icon is used.

Since binary files are usually not directly stored as properties of an Eloquent model, but must be processed separately, this type of form field will in most cases need additional file handling logic in the implementing form. The implementation follows the principles of Livewire file uploads () and essentially provides the view part of file upload. It is suggested to add the file handling in one of the callback or override functions, e.g. the `save...` function of the property such as the following code snippet for a property `attachment`:

```
public function saveAttachment($attachmentValue) {
    $attachmentValue->storeAs('attachments', $attachmentValue->getClientOriginalName());
}
```

#### Type `search-picker`

[](#type-search-picker)

The `search-picker` form field is an input field with search functionality which display the results as a list under the field. It has the following additional properties:

- `placeholder` (optional): Specifies the placeholder of the input field.
- `searchPickerResultsProperty` (mandatory): Refers to the defined array which has the search results. Every element in the array should have the following structure: ```
    [
        'key' => '',
        'value' => '',
        'labels' => [] // optional
    ]
    ```

**Note:** `getUserIdOptions()`, `getUserIdSearchPickerSelectedValueProperty()` functions should follow the naming convention of the form field name `user_id`.

#### Type `trix-editor`

[](#type-trix-editor)

The `trix-editor` form field is a rich text editor which uses [Trix](https://trix-editor.org/) under the hood. It has the general properties mentioned above excluding `readOnly`.

In order to use the trix-editor form field you have to add the following to your blade:

```

```

Please see the full documentation on the official [Trix page](https://github.com/basecamp/trix) .

### Form Layout

[](#form-layout)

#### Tabs

[](#tabs)

- A custom layout for components that utilize tabs to organize content.
- Each tab is represented as an array (in `fields()` method) containing `'key'`, `'title'`, and `'content'`. The `key` represents an internal technical key uniquely identifying the tab. The `title` property is used as label for both the tab navigation and the heading of the form; if an alternative (usually shortened) title for the navigation should be used, this can be specified with the optional property `navTitle`. The `'content'` array includes information about the form fields, their types, labels, options, and styling.

#### Multi-Step

[](#multi-step)

- The Multi-Step feature is designed to facilitate the creation of multi-step forms with a Tabs Layout. It provides methods to initialize steps, set the active step number, navigate between steps, and retrieve information about the form's multi-step structure.
- Usage
    - It works for now only with `Tabs Layout` and it is deactivated by default.
    - To enable the `multi-step` functionality, set the `isMultiStep` property to true when configuring the form.

- Example: ```
    use WisamAlhennawi\LaraFormsBuilder\LaraFormComponent;
    use WisamAlhennawi\LaraFormsBuilder\Traits\HasTabs;

    class CustomerForm extends LaraFormComponent
    {
        use HasTabs;

        public function mount(Customer $customer)
        {
            $this->mountForm($customer, [
                'activeTab' => 'address-data',
                'hasTabs' => true,
                'isMultiStep' => true, // Optional if you want to use the multi-step form feature
            ]);
        }

        protected function fields(): array
        {
            return [
                [
                    'key' => 'address-data',
                    'title' => __('Address Data'),
                    'content' => [
                        'group_info' => [
                            'group_wrapper_class' => 'grid grid-cols-4 gap-6',
                            'default_group_wrapper_class' => false
                        ],
                        'fields' => [
                            // Fields for the 'Address Data' tab
                            // Example:
                            'company' => [
                                'type' => 'input',
                                'label' => __('models/customers.fields.company'),
                                'field_wrapper_class' => 'col-span-4',
                            ],
                            // ... other fields
                        ],
                    ],
                ],
                [
                    'key' => 'contact-data',
                    'title' => __('Contact Data'),
                    'content' => [
                        'group_info' => [
                            'group_wrapper_class' => 'grid grid-cols-6 gap-6',
                            'default_group_wrapper_class' => false
                        ],
                        'fields' => [
                            // Fields for the 'Contact Data' tab
                            // Example:
                            'phone' => [
                                'type' => 'input',
                                'label' => __('customers.fields.phone'),
                                'field_wrapper_class' => 'col-span-2',
                            ],
                            // ... other fields
                        ],
                    ],
                ],
                // .. other tabs
            ];
        }

        // ... other component properties and methods
    }
    ```

### Form Methods

[](#form-methods)

- `protected function successMessage()`

    - Purpose:
        - The `successMessage()` function is responsible for generating a success message based on the outcome of a form submission.
    - Custom Success Message:
        - If a custom success message is provided through the `$customSuccessMessage` property, it will be used.
    - Default Success Messages:
        - If no custom success message is set, default success messages are used for create and update modes. ```
            trans('A new entry has been created successfully.')
            trans('Changes were saved successfully.')
            ```
        - These default messages can be further customized by adding translation keys in the language file. ```
            'A new '.$modelName.' has been created successfully.'
            'The '.$modelName.' has been updated successfully.'
            ```

            Example: ```
            'A new user has been created successfully.'
            'The user has been updated successfully.'
            ```
    - Displaying the Success Message:
        - The success message is displayed to the user either as a flash message or through a browser event. The display method depends on the value of the `$hasSession` property, which is true by default.
    - Another way to customize the success message is to override the `successMessage()` method in the component class.
- `protected function canSubmit(): bool`

    - Purpose: Check if the user is authorized to submit the form
- `protected function fieldIndicator($fieldKey): ?string`

    - Purpose:
        - Display an indicator (\*) for a required field in the form based on `required` rule in the rules array
    - Customization:
        - An indicator can be displayed based on a custom check (eg. conditional required rules like required\_if), to do that `shouldDisplayIndicatorBasedOnCustomCheck($key)` should be overwritten: Example:

        ```
            protected function shouldDisplayIndicatorBasedOnCustomCheck($key): bool
            {
                if ($key == 'email' && $this->formProperties['type'] == 'email') {
                    return true;
                }
                return false;
            }
        ```

#### Scroll to First Error

[](#scroll-to-first-error)

The `scrollToFirstError` feature allows the form to automatically scroll to the first field with an error after clicking the submit button. This enhances user experience by immediately directing attention to the area that needs correction.

###### How to Enable

[](#how-to-enable)

To enable this feature, add the following line in the `mount` method of your form component:

```
$this->scrollToFirstError = true;
```

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review [our security policy](../../security/policy) on how to report security vulnerabilities.

Credits
-------

[](#credits)

- [Wisam Alhennawi](https://github.com/wisam-alhennawi)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

49

—

FairBetter than 95% of packages

Maintenance64

Regular maintenance activity

Popularity27

Limited adoption so far

Community16

Small or concentrated contributor base

Maturity75

Established project with proven stability

 Bus Factor2

2 contributors hold 50%+ of commits

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 ~37 days

Recently: every ~82 days

Total

30

Last Release

74d ago

Major Versions

v0.4.0 → v1.0.02023-09-05

v1.9.1 → v2.0.0-beta.12024-02-29

v1.x-dev → v2.0.02024-10-09

PHP version history (2 changes)0.1.0PHP ^8.1

v2.2.0PHP ^8.1|^8.2|^8.3|^8.4

### Community

Maintainers

![](https://www.gravatar.com/avatar/fdda430c4210eba604571d8191c6c5010d9f6df42237cba759f023da3b325472?d=identicon)[wisam.alhennawi](/maintainers/wisam.alhennawi)

---

Top Contributors

[![wisam-alhennawi](https://avatars.githubusercontent.com/u/17822939?v=4)](https://github.com/wisam-alhennawi "wisam-alhennawi (172 commits)")[![HussamAlhennawi](https://avatars.githubusercontent.com/u/103761119?v=4)](https://github.com/HussamAlhennawi "HussamAlhennawi (122 commits)")[![sheol77](https://avatars.githubusercontent.com/u/29025120?v=4)](https://github.com/sheol77 "sheol77 (27 commits)")[![jpbu](https://avatars.githubusercontent.com/u/15219405?v=4)](https://github.com/jpbu "jpbu (17 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (10 commits)")[![florianbinderme](https://avatars.githubusercontent.com/u/902487?v=4)](https://github.com/florianbinderme "florianbinderme (3 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (2 commits)")

---

Tags

laravelwisam-alhennawilara-forms-builder

###  Code Quality

TestsPest

Static AnalysisPHPStan

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/wisam-alhennawi-lara-forms-builder/health.svg)

```
[![Health](https://phpackages.com/badges/wisam-alhennawi-lara-forms-builder/health.svg)](https://phpackages.com/packages/wisam-alhennawi-lara-forms-builder)
```

###  Alternatives

[spatie/laravel-livewire-wizard

Build wizards using Livewire

4061.0M4](/packages/spatie-laravel-livewire-wizard)[livewire/flux

The official UI component library for Livewire.

9475.0M86](/packages/livewire-flux)[leandrocfe/filament-apex-charts

Apex Charts integration for Filament PHP.

4861.2M8](/packages/leandrocfe-filament-apex-charts)[tonysm/importmap-laravel

Use ESM with importmap to manage modern JavaScript in Laravel without transpiling or bundling.

148399.8k1](/packages/tonysm-importmap-laravel)[bezhansalleh/filament-google-analytics

Google Analytics integration for FilamentPHP

205144.8k5](/packages/bezhansalleh-filament-google-analytics)[ralphjsmit/livewire-urls

Get the previous and current url in Livewire.

82270.3k4](/packages/ralphjsmit-livewire-urls)

PHPackages © 2026

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