PHPackages                             lyrasoft/formkit - 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. lyrasoft/formkit

ActiveWindwalker-package[Utility & Helpers](/categories/utility)

lyrasoft/formkit
================

LYRASOFT FormKit Package

0.2.3(3mo ago)0177MITPHPPHP >=8.4.6CI passing

Since Aug 19Pushed 3mo ago1 watchersCompare

[ Source](https://github.com/lyrasoft/luna-formkit)[ Packagist](https://packagist.org/packages/lyrasoft/formkit)[ RSS](/packages/lyrasoft-formkit/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (4)Versions (12)Used By (0)

LYRASOFT Formkit Package
========================

[](#lyrasoft-formkit-package)

[![](https://private-user-images.githubusercontent.com/1639206/360037850-f039758a-cdfb-49db-90a6-a8a759e222ce.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxOTk5MzEsIm5iZiI6MTc3NTE5OTYzMSwicGF0aCI6Ii8xNjM5MjA2LzM2MDAzNzg1MC1mMDM5NzU4YS1jZGZiLTQ5ZGItOTBhNi1hOGE3NTllMjIyY2UuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDQwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA0MDNUMDcwMDMxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NzUzZjRkYTQzNjVhZGU1NWRlNTQxMDYyYTBkNGU2ZTZiOGRkYjFkN2YwYzVlMDdlYjM1ZWIxOTY5ZGEwMzllNCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.QjXJgW_V57zpVdJqtF-i-qT3vcl3ob-y99JMAl6eGGM)](https://private-user-images.githubusercontent.com/1639206/360037850-f039758a-cdfb-49db-90a6-a8a759e222ce.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxOTk5MzEsIm5iZiI6MTc3NTE5OTYzMSwicGF0aCI6Ii8xNjM5MjA2LzM2MDAzNzg1MC1mMDM5NzU4YS1jZGZiLTQ5ZGItOTBhNi1hOGE3NTllMjIyY2UuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDQwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA0MDNUMDcwMDMxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NzUzZjRkYTQzNjVhZGU1NWRlNTQxMDYyYTBkNGU2ZTZiOGRkYjFkN2YwYzVlMDdlYjM1ZWIxOTY5ZGEwMzllNCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.QjXJgW_V57zpVdJqtF-i-qT3vcl3ob-y99JMAl6eGGM)

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

[](#installation)

Install from composer

```
composer require lyrasoft/formkit
```

Then copy files to project

```
php windwalker pkg:install lyrasoft/formkit -t routes -t migrations -t seeders
```

Seeders

- Add `formkit-seeder.php` to `resources/seeders/main.php`

### Language Files

[](#language-files)

Add this line to admin & front middleware if you don't want to override languages:

```
$this->lang->loadAllFromVendor('lyrasoft/formkit', 'ini');

// OR

$this->lang->loadAllFromVendor(\Lyrasoft\Formkit\FormkitPackage::class, 'ini');
```

Or run this command to copy languages files:

```
php windwalker pkg:install lyrasoft/formkit -t lang

```

### JS

[](#js)

You must add `useFormkit()` to any page which uses formkit to enable it, or just enable formkit at front `main.ts` once:

```
import { useFormkit } from '~vendor/lyrasoft/formkit/dist';

useFormkit();
```

Register Admin Menu
-------------------

[](#register-admin-menu)

Edit `resources/menu/admin/sidemenu.menu.php`

```
// Contact
$menu->link('表單管理')
    ->to($nav->to('formkit_list'))
    ->icon('fal fa-layer-group');
```

Use As Standalone Page
----------------------

[](#use-as-standalone-page)

Copy URL or open page from edit sidebar:

[![p-001-2024-08-22-02-24-19](https://private-user-images.githubusercontent.com/1639206/360046502-963362af-7644-46f9-8d7e-6ea07c9271bb.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxOTk5MzEsIm5iZiI6MTc3NTE5OTYzMSwicGF0aCI6Ii8xNjM5MjA2LzM2MDA0NjUwMi05NjMzNjJhZi03NjQ0LTQ2ZjktOGQ3ZS02ZWEwN2M5MjcxYmIuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDQwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA0MDNUMDcwMDMxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Nzg0YWVlMWI0NWI5YzZmNDQ4NWM4ZjI2MDZlZDg0N2EwZTAyYmFkNmIyN2M2NTIzMzJiODkwNmVmZDVlOGY3NyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.Ue8LXc3RBa_IYAY-AG2fSz_asrQYk77QDAmGEuZFt9w)](https://private-user-images.githubusercontent.com/1639206/360046502-963362af-7644-46f9-8d7e-6ea07c9271bb.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxOTk5MzEsIm5iZiI6MTc3NTE5OTYzMSwicGF0aCI6Ii8xNjM5MjA2LzM2MDA0NjUwMi05NjMzNjJhZi03NjQ0LTQ2ZjktOGQ3ZS02ZWEwN2M5MjcxYmIuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDQwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA0MDNUMDcwMDMxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Nzg0YWVlMWI0NWI5YzZmNDQ4NWM4ZjI2MDZlZDg0N2EwZTAyYmFkNmIyN2M2NTIzMzJiODkwNmVmZDVlOGY3NyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.Ue8LXc3RBa_IYAY-AG2fSz_asrQYk77QDAmGEuZFt9w)

You will see standalone page:

[![p-001-2024-08-22-02-25-15](https://private-user-images.githubusercontent.com/1639206/360047179-a5bb2f2b-3a18-4f9c-91d3-81ecb9cfc82f.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxOTk5MzEsIm5iZiI6MTc3NTE5OTYzMSwicGF0aCI6Ii8xNjM5MjA2LzM2MDA0NzE3OS1hNWJiMmYyYi0zYTE4LTRmOWMtOTFkMy04MWVjYjljZmM4MmYuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDQwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA0MDNUMDcwMDMxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MzlkNmQ5MGRhMzgzNzI1YmUyODVmM2MzYzdlMDY0ODRkZGMyNjRjNmEyY2EyM2VmMzhiMDJlNzRmYzY1NDI1NSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.khJBczfjbInXFk5d-7X8Z9BaUnAhPlssi_Osg_s6-vY)](https://private-user-images.githubusercontent.com/1639206/360047179-a5bb2f2b-3a18-4f9c-91d3-81ecb9cfc82f.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxOTk5MzEsIm5iZiI6MTc3NTE5OTYzMSwicGF0aCI6Ii8xNjM5MjA2LzM2MDA0NzE3OS1hNWJiMmYyYi0zYTE4LTRmOWMtOTFkMy04MWVjYjljZmM4MmYuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDQwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA0MDNUMDcwMDMxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MzlkNmQ5MGRhMzgzNzI1YmUyODVmM2MzYzdlMDY0ODRkZGMyNjRjNmEyY2EyM2VmMzhiMDJlNzRmYzY1NDI1NSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.khJBczfjbInXFk5d-7X8Z9BaUnAhPlssi_Osg_s6-vY)

The page extends layout is configuable, see config file:

```
    // ...
    'view' => [
        'default_extends' => 'global.body',
        'extends' => [
            'global.body' => 'Default Layout',

            // You can add new layout
            'layout.blog-layout' => 'Blog Layout',
        ]
    ],
    // ...
```

Add a new layout option, then it can be choose:

[![p-001-2024-08-22-02-34-42](https://private-user-images.githubusercontent.com/1639206/360054749-55498625-c2ad-4e0a-88cf-c1694c093a21.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxOTk5MzEsIm5iZiI6MTc3NTE5OTYzMSwicGF0aCI6Ii8xNjM5MjA2LzM2MDA1NDc0OS01NTQ5ODYyNS1jMmFkLTRlMGEtODhjZi1jMTY5NGMwOTNhMjEuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDQwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA0MDNUMDcwMDMxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YTMxMTIxNWNkZTY3MTQzMjM0N2UxMzJlMzY5ZWQxMjU2NDEyZDRiOTAxNmEyNTEyZTZlZmZmODIxNWQwYzZhYyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.Ombd_xnE0GpYYXtjvKl3cAkh-OxX9Pb0n3ehZPQo1sw)](https://private-user-images.githubusercontent.com/1639206/360054749-55498625-c2ad-4e0a-88cf-c1694c093a21.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxOTk5MzEsIm5iZiI6MTc3NTE5OTYzMSwicGF0aCI6Ii8xNjM5MjA2LzM2MDA1NDc0OS01NTQ5ODYyNS1jMmFkLTRlMGEtODhjZi1jMTY5NGMwOTNhMjEuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDQwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA0MDNUMDcwMDMxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YTMxMTIxNWNkZTY3MTQzMjM0N2UxMzJlMzY5ZWQxMjU2NDEyZDRiOTAxNmEyNTEyZTZlZmZmODIxNWQwYzZhYyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.Ombd_xnE0GpYYXtjvKl3cAkh-OxX9Pb0n3ehZPQo1sw)

You can disable page view by toggle `可使用公開網址`, if disable this field, the URL will unable to access form.

[![p-001-2024-08-22-02-26-13](https://private-user-images.githubusercontent.com/1639206/360047929-e242424d-3926-444e-947a-4eda019e9e9e.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxOTk5MzEsIm5iZiI6MTc3NTE5OTYzMSwicGF0aCI6Ii8xNjM5MjA2LzM2MDA0NzkyOS1lMjQyNDI0ZC0zOTI2LTQ0NGUtOTQ3YS00ZWRhMDE5ZTllOWUuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDQwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA0MDNUMDcwMDMxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NzYxNGQ3ZjlhZjk3YmFmY2Y3MDhiYTJmMjg1NDM5OTdlMjA2NDQ1YjM0YzkwZjRkZDdiZmYwODAzZDVkOGRiOSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.xmm2yqriXUIXyjqHC0kc4jvMcjl8ucMDU0zsiMAeJMA)](https://private-user-images.githubusercontent.com/1639206/360047929-e242424d-3926-444e-947a-4eda019e9e9e.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxOTk5MzEsIm5iZiI6MTc3NTE5OTYzMSwicGF0aCI6Ii8xNjM5MjA2LzM2MDA0NzkyOS1lMjQyNDI0ZC0zOTI2LTQ0NGUtOTQ3YS00ZWRhMDE5ZTllOWUuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDQwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA0MDNUMDcwMDMxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NzYxNGQ3ZjlhZjk3YmFmY2Y3MDhiYTJmMjg1NDM5OTdlMjA2NDQ1YjM0YzkwZjRkZDdiZmYwODAzZDVkOGRiOSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.xmm2yqriXUIXyjqHC0kc4jvMcjl8ucMDU0zsiMAeJMA)

Use By ShortCode
----------------

[](#use-by-shortcode)

You must manually process short code in code, for example:

```
$formkitService = $app->retrieve(\Lyrasoft\Formkit\Formkit\FormkitService::class);

// In blade
{!! $formkitService->parseShortCode($article->getFulltext()) !!}
```

Now you can copy the short-code to article content:

[![p-001-2024-08-22-02-29-41](https://private-user-images.githubusercontent.com/1639206/360050572-6af986b7-a8e3-4d12-bf49-af9019d052cc.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxOTk5MzEsIm5iZiI6MTc3NTE5OTYzMSwicGF0aCI6Ii8xNjM5MjA2LzM2MDA1MDU3Mi02YWY5ODZiNy1hOGUzLTRkMTItYmY0OS1hZjkwMTlkMDUyY2MuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDQwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA0MDNUMDcwMDMxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9M2YxOGZiOWQxYzA0OGQ3MTBkYmE2Zjg5Yzg5M2EyM2I3YjRmOTg5ZDRlMjI0OTY5NWQyZjU3ZTUxNzE3ZjlmZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.9ES7SMJArSNaEVUmjQoGqCMLpELshIPDpD_-oO2KXlU)](https://private-user-images.githubusercontent.com/1639206/360050572-6af986b7-a8e3-4d12-bf49-af9019d052cc.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxOTk5MzEsIm5iZiI6MTc3NTE5OTYzMSwicGF0aCI6Ii8xNjM5MjA2LzM2MDA1MDU3Mi02YWY5ODZiNy1hOGUzLTRkMTItYmY0OS1hZjkwMTlkMDUyY2MuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDQwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA0MDNUMDcwMDMxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9M2YxOGZiOWQxYzA0OGQ3MTBkYmE2Zjg5Yzg5M2EyM2I3YjRmOTg5ZDRlMjI0OTY5NWQyZjU3ZTUxNzE3ZjlmZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.9ES7SMJArSNaEVUmjQoGqCMLpELshIPDpD_-oO2KXlU)

Short-code usage:

```
[formkit id=123]
[formkit alias=foo-bar]
[formkit id=123 force=1]

```

### Formkit Publish Down

[](#formkit-publish-down)

When as formkit is render by short-code and was publish down, there are another `formkit/formkit-unpublish.blade.php`layout to show end information, it is default empty, you can modify it if you need.

Configure Mail
--------------

[](#configure-mail)

In `etc/packages/formkit.php`, you can add custom cc, bcc or target roles to receive mails.

The users fetch by roles, must enable `Receive Email` that can receive mail.

```
    // ...

    'receivers' => [
        'roles' => [
            'superuser',
            'admin'
        ],
        'cc' => [
            //
        ],
        'bcc' => [
            //
        ],
    ],

    // ...
```

To modify mail layout, see `mail/formkit-receiver-mail.blade.php` and `formkit/formkit-preview-table.blade.php`

Form Fields And Components
--------------------------

[](#form-fields-and-components)

### Add Custom Widget to Field Cards

[](#add-custom-widget-to-field-cards)

There has 3 porisions you can insert widgets to field card:

- start
- end
- toolbar

[![p-001-2024-08-22-02-48-28](https://private-user-images.githubusercontent.com/1639206/360061082-eea57150-c804-4a92-ac41-1936661b0861.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxOTk5MzEsIm5iZiI6MTc3NTE5OTYzMSwicGF0aCI6Ii8xNjM5MjA2LzM2MDA2MTA4Mi1lZWE1NzE1MC1jODA0LTRhOTItYWM0MS0xOTM2NjYxYjA4NjEuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDQwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA0MDNUMDcwMDMxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MzI1YWQ3OTY1NGU5NjRjMTg5M2I2NjFjODJiZWIwYzBhYjRlZDQzM2QxMWI1ZmQ5ZTNmZGZiNGFjODE1ODBiOSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.h0dKEe20_leTWklNZdoFacWrdfDxNUGuf15uYeMyFZo)](https://private-user-images.githubusercontent.com/1639206/360061082-eea57150-c804-4a92-ac41-1936661b0861.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUxOTk5MzEsIm5iZiI6MTc3NTE5OTYzMSwicGF0aCI6Ii8xNjM5MjA2LzM2MDA2MTA4Mi1lZWE1NzE1MC1jODA0LTRhOTItYWM0MS0xOTM2NjYxYjA4NjEuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDQwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA0MDNUMDcwMDMxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MzI1YWQ3OTY1NGU5NjRjMTg5M2I2NjFjODJiZWIwYzBhYjRlZDQzM2QxMWI1ZmQ5ZTNmZGZiNGFjODE1ODBiOSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.h0dKEe20_leTWklNZdoFacWrdfDxNUGuf15uYeMyFZo)

The code example:

```
// resources/assets/src/formkit/FieldCardEnd.vue

import { FieldEditCotent } from '~vendor/lyrasoft/formkit/dist';

const item = defineModel();

      背景顏色

    ...

```

```
// admin/main.ts
import FieldCardEnd from '~/formkit/FieldCardEnd.vue';
import { App as VueApp } from 'vue';

const u = useUnicorn();

u.on('formkit.prepared', (app: VueApp) => {
    app.provide('field.card.end', FieldCardEnd);
});
```

### Override Field Edit Components

[](#override-field-edit-components)

Fields components is localted at `assets/src/fields/*.ts`, copy the file you want to override to root project's `resources/assets/src`.

And register new component in `admin/main.ts`:

```
import { useFieldComponents } from '~vendor/lyrasoft/formkit/dist';

useFieldComponents({
  'text': () => import('~/formkit/my-form-text'),
});
```

### Add New Field Type

[](#add-new-field-type)

Create a new PHP class for field type:

```