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(5mo ago)0177MITPHPPHP >=8.4.6CI passing

Since Aug 19Pushed 5mo ago1 watchersCompare

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

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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Nzk1NzQ1NjIsIm5iZiI6MTc3OTU3NDI2MiwicGF0aCI6Ii8xNjM5MjA2LzM2MDAzNzg1MC1mMDM5NzU4YS1jZGZiLTQ5ZGItOTBhNi1hOGE3NTllMjIyY2UuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDUyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA1MjNUMjIxMTAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MzFkNzBhNzhhZTBkZTEzMTlkYjViYTRhZmUxZDdjZTY1NTVjMjA5OTdjZmZjOTYwMzc0ODRhN2E4YWJiNTUxNyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGanBlZyJ9.mAgy26_DSMMagfE-qvp2MiQx0OnQiBiLkGizNXGKunE)](https://private-user-images.githubusercontent.com/1639206/360037850-f039758a-cdfb-49db-90a6-a8a759e222ce.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Nzk1NzQ1NjIsIm5iZiI6MTc3OTU3NDI2MiwicGF0aCI6Ii8xNjM5MjA2LzM2MDAzNzg1MC1mMDM5NzU4YS1jZGZiLTQ5ZGItOTBhNi1hOGE3NTllMjIyY2UuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDUyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA1MjNUMjIxMTAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MzFkNzBhNzhhZTBkZTEzMTlkYjViYTRhZmUxZDdjZTY1NTVjMjA5OTdjZmZjOTYwMzc0ODRhN2E4YWJiNTUxNyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGanBlZyJ9.mAgy26_DSMMagfE-qvp2MiQx0OnQiBiLkGizNXGKunE)

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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Nzk1NzQ1NjIsIm5iZiI6MTc3OTU3NDI2MiwicGF0aCI6Ii8xNjM5MjA2LzM2MDA0NjUwMi05NjMzNjJhZi03NjQ0LTQ2ZjktOGQ3ZS02ZWEwN2M5MjcxYmIuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDUyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA1MjNUMjIxMTAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Mzc0YjYwNmM5ZmVhOTI3MmZjMzg2YTM5YTcyY2U0NzBhYmIxOGM0OGJmMjU1NGE4ZWM1YWFhYTMwYjIwYjI2ZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGanBlZyJ9.wrg3UBWAwM739FHh3oWD3nIWWuXg63k-37cztCkJJ_I)](https://private-user-images.githubusercontent.com/1639206/360046502-963362af-7644-46f9-8d7e-6ea07c9271bb.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Nzk1NzQ1NjIsIm5iZiI6MTc3OTU3NDI2MiwicGF0aCI6Ii8xNjM5MjA2LzM2MDA0NjUwMi05NjMzNjJhZi03NjQ0LTQ2ZjktOGQ3ZS02ZWEwN2M5MjcxYmIuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDUyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA1MjNUMjIxMTAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Mzc0YjYwNmM5ZmVhOTI3MmZjMzg2YTM5YTcyY2U0NzBhYmIxOGM0OGJmMjU1NGE4ZWM1YWFhYTMwYjIwYjI2ZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGanBlZyJ9.wrg3UBWAwM739FHh3oWD3nIWWuXg63k-37cztCkJJ_I)

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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Nzk1NzQ1NjIsIm5iZiI6MTc3OTU3NDI2MiwicGF0aCI6Ii8xNjM5MjA2LzM2MDA0NzE3OS1hNWJiMmYyYi0zYTE4LTRmOWMtOTFkMy04MWVjYjljZmM4MmYuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDUyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA1MjNUMjIxMTAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ODkzNTg3NWQ3NTgzMDI4NDM1MWIxMTI3MjY0ZjViNmU1MzJkOGZkYWUxOWZiNzI5YzI2NTM0OWEzZDVhM2QwZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGanBlZyJ9.oUME-IYMmJ2EP_6pCcemLlryywobje0p9gzoz37_L4Y)](https://private-user-images.githubusercontent.com/1639206/360047179-a5bb2f2b-3a18-4f9c-91d3-81ecb9cfc82f.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Nzk1NzQ1NjIsIm5iZiI6MTc3OTU3NDI2MiwicGF0aCI6Ii8xNjM5MjA2LzM2MDA0NzE3OS1hNWJiMmYyYi0zYTE4LTRmOWMtOTFkMy04MWVjYjljZmM4MmYuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDUyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA1MjNUMjIxMTAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ODkzNTg3NWQ3NTgzMDI4NDM1MWIxMTI3MjY0ZjViNmU1MzJkOGZkYWUxOWZiNzI5YzI2NTM0OWEzZDVhM2QwZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGanBlZyJ9.oUME-IYMmJ2EP_6pCcemLlryywobje0p9gzoz37_L4Y)

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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Nzk1NzQ1NjIsIm5iZiI6MTc3OTU3NDI2MiwicGF0aCI6Ii8xNjM5MjA2LzM2MDA1NDc0OS01NTQ5ODYyNS1jMmFkLTRlMGEtODhjZi1jMTY5NGMwOTNhMjEuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDUyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA1MjNUMjIxMTAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZWQ0YjljOGY4YTM3ZmE1NGY5MWYzYTQ2OTU3MDJiNjA1MDE4MzM2YTVkMDg2NzQyMThjOWUxMTVlZDE2N2ZiYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGanBlZyJ9.T9jAUX5FSU1AE03xd3uF9Taqk_a5TmC-17rut48d1k0)](https://private-user-images.githubusercontent.com/1639206/360054749-55498625-c2ad-4e0a-88cf-c1694c093a21.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Nzk1NzQ1NjIsIm5iZiI6MTc3OTU3NDI2MiwicGF0aCI6Ii8xNjM5MjA2LzM2MDA1NDc0OS01NTQ5ODYyNS1jMmFkLTRlMGEtODhjZi1jMTY5NGMwOTNhMjEuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDUyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA1MjNUMjIxMTAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZWQ0YjljOGY4YTM3ZmE1NGY5MWYzYTQ2OTU3MDJiNjA1MDE4MzM2YTVkMDg2NzQyMThjOWUxMTVlZDE2N2ZiYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGanBlZyJ9.T9jAUX5FSU1AE03xd3uF9Taqk_a5TmC-17rut48d1k0)

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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Nzk1NzQ1NjIsIm5iZiI6MTc3OTU3NDI2MiwicGF0aCI6Ii8xNjM5MjA2LzM2MDA0NzkyOS1lMjQyNDI0ZC0zOTI2LTQ0NGUtOTQ3YS00ZWRhMDE5ZTllOWUuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDUyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA1MjNUMjIxMTAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZmYxMmU4NmY1NDliNjgzMWIxNzY5NWYzOWQ4ODAwYjU2NDA5ZDcwY2E0Y2VkOTQ5YzE4MTI5YjMzZGVlMzNjMiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGanBlZyJ9.IW1kMhVJUOYKv2vbO8ESCT9mNmiFPeP8DKH8wk6pR9Q)](https://private-user-images.githubusercontent.com/1639206/360047929-e242424d-3926-444e-947a-4eda019e9e9e.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Nzk1NzQ1NjIsIm5iZiI6MTc3OTU3NDI2MiwicGF0aCI6Ii8xNjM5MjA2LzM2MDA0NzkyOS1lMjQyNDI0ZC0zOTI2LTQ0NGUtOTQ3YS00ZWRhMDE5ZTllOWUuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDUyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA1MjNUMjIxMTAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZmYxMmU4NmY1NDliNjgzMWIxNzY5NWYzOWQ4ODAwYjU2NDA5ZDcwY2E0Y2VkOTQ5YzE4MTI5YjMzZGVlMzNjMiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGanBlZyJ9.IW1kMhVJUOYKv2vbO8ESCT9mNmiFPeP8DKH8wk6pR9Q)

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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Nzk1NzQ1NjIsIm5iZiI6MTc3OTU3NDI2MiwicGF0aCI6Ii8xNjM5MjA2LzM2MDA1MDU3Mi02YWY5ODZiNy1hOGUzLTRkMTItYmY0OS1hZjkwMTlkMDUyY2MuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDUyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA1MjNUMjIxMTAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9M2ZiNzI1OGM4ZDA1ZTgyNGE5ZDNlMTFkYTIyNWU2YzE4MTkzZGM0M2NiMWE0MTcwNzVhOTFhN2RkNTlhNmYyYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGanBlZyJ9.DDSVNIHakk2ZHYbs7gKMYVjNMFa1tWSf4bvsjvrOzPM)](https://private-user-images.githubusercontent.com/1639206/360050572-6af986b7-a8e3-4d12-bf49-af9019d052cc.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Nzk1NzQ1NjIsIm5iZiI6MTc3OTU3NDI2MiwicGF0aCI6Ii8xNjM5MjA2LzM2MDA1MDU3Mi02YWY5ODZiNy1hOGUzLTRkMTItYmY0OS1hZjkwMTlkMDUyY2MuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDUyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA1MjNUMjIxMTAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9M2ZiNzI1OGM4ZDA1ZTgyNGE5ZDNlMTFkYTIyNWU2YzE4MTkzZGM0M2NiMWE0MTcwNzVhOTFhN2RkNTlhNmYyYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGanBlZyJ9.DDSVNIHakk2ZHYbs7gKMYVjNMFa1tWSf4bvsjvrOzPM)

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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Nzk1NzQ1NjIsIm5iZiI6MTc3OTU3NDI2MiwicGF0aCI6Ii8xNjM5MjA2LzM2MDA2MTA4Mi1lZWE1NzE1MC1jODA0LTRhOTItYWM0MS0xOTM2NjYxYjA4NjEuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDUyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA1MjNUMjIxMTAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NTAzYzIzZjhiZTgzZjkwYTY5MDcxZTJkM2UyNTY2MTNhZjAzYzJhMWQ3NGNlNjU2YjVhODMxZjI2ZjY4ZTY1YSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGanBlZyJ9.8TCWy1mut7WT9rCufpZReRivIucf5QhTkwhNylUZ9R8)](https://private-user-images.githubusercontent.com/1639206/360061082-eea57150-c804-4a92-ac41-1936661b0861.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Nzk1NzQ1NjIsIm5iZiI6MTc3OTU3NDI2MiwicGF0aCI6Ii8xNjM5MjA2LzM2MDA2MTA4Mi1lZWE1NzE1MC1jODA0LTRhOTItYWM0MS0xOTM2NjYxYjA4NjEuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDUyMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA1MjNUMjIxMTAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NTAzYzIzZjhiZTgzZjkwYTY5MDcxZTJkM2UyNTY2MTNhZjAzYzJhMWQ3NGNlNjU2YjVhODMxZjI2ZjY4ZTY1YSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmcmVzcG9uc2UtY29udGVudC10eXBlPWltYWdlJTJGanBlZyJ9.8TCWy1mut7WT9rCufpZReRivIucf5QhTkwhNylUZ9R8)

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:

```