fluentform-custom-fields

Name: fluentform-custom-fields
Author: Lonsdale201

21stars1forks

How to install fluentform-custom-fields?

lonsdale201/wp-agent-skills/fluentform-custom-fields

$npx -y skills add Lonsdale201/wp-agent-skills --skill fluentform-custom-fields

Installs into the current project.

Summary

Builds and reviews third-party Fluent Forms input fields with the Free-core BaseFieldManager API. Covers fluentform/loaded bootstrap, editor component schema, frontend rendering, input-name mapping, conditional logic, server-side normalization and validation, response formatting,

Files · 1

View on GitHub

SKILL.md

1	# Fluent Forms custom fields
2
3	Build fields against the documented Free-core `BaseFieldManager` contract. Do
4	not copy a Pro component and accidentally make the extension depend on Pro.
5
6	Read [field-contract.md](references/field-contract.md) when implementing a new
7	field or debugging nested values, response rendering, editor settings, or Pro
8	feature detection.
9
10	## Availability contract
11
12	\| Surface \| Availability in 6.2.7 \|
13	\|---\|---\|
14	\| `FluentForm\App\Services\FormBuilder\BaseFieldManager` \| Free \|
15	\| Editor registration, frontend render hook, parser input type, conditional support \| Free \|
16	\| Element input/validation/response filters \| Free \|
17	\| Phone, range slider, NPS, ranking, dynamic field, chained select, repeater, rich text, file upload \| Pro implementations \|
18
19	The Pro fields demonstrate the same Free base class. Referencing their element
20	keys, JavaScript, uploader, data-source, or server classes is still Pro-only.
21
22	## Workflow
23
24	1. Inspect the installed versions and feature-detect every class or constant used.
25	2. Choose a globally unique, lowercase element key and a configurable input
26	`attributes.name`; never use the element key as a permanent business ID.
27	3. Bootstrap on `fluentform/loaded` and instantiate the field once.
28	4. Return a complete editor component with `element`, `attributes`, `settings`,
29	and `editor_options`.
30	5. Render with the inherited markup helpers so labels, error placement,
31	conditional logic, repeated form instances, and accessibility remain intact.
32	6. Normalize before rule validation, validate on the server, then add a separate
33	display formatter for entries/emails.
34	7. Test editor insertion, saved/reloaded configuration, classic and
35	conversational rendering, valid/invalid submission, conditional visibility,
36	entry display, email/feed value, and two instances of the same form.
37
38	## Bootstrap and field skeleton
39
40	```php
41	use FluentForm\App\Services\FormBuilder\BaseFieldManager;
42	use FluentForm\Framework\Helpers\ArrayHelper as Arr;
43
44	add_action('fluentform/loaded', static function (): void {
45	if (!class_exists(BaseFieldManager::class)) {
46	return;
47	}
48
49	new Acme_Order_Code_Field();
50	});
51
52	final class Acme_Order_Code_Field extends BaseFieldManager
53	{
54	public function __construct()
55	{
56	parent::__construct(
57	'acme_order_code',
58	__('Order code', 'acme-addon'),
59	['order', 'reference', 'code'],
60	'advanced'
61	);
62	}
63
64	public function getComponent()
65	{
66	return [
67	'index' => 20,
68	'element' => $this->key,
69	'attributes' => [
70	'type' => 'text',
71	'name' => 'acme_order_code',
72	'value' => '',
73	'class' => '',
74	'placeholder' => '',
75	],
76	'settings' => [
77	'label' => __('Order code', 'acme-addon'),
78	'admin_field_label' => '',
79	'label_placement' => '',
80	'help_message' => '',
81	'container_class' => '',
82	'validation_rules' => [
83	'required' => [
84	'value' => false,
85	'message' => __('This field is required.', 'acme-addon'),
86	],
87	],
88	'conditional_logics' => [],
89	],
90	'editor_options' => [
91	'title' => __('Order code', 'acme-addon'),
92	'icon_class' => 'ff-edit-text',
93	'template' => 'inputText',
94	],
95	];
96	}
97
98	public function render($data, $form)
99	{
100	$data['attributes']['id'] = $this->makeElementId($data, $form);
101	$data['attributes']['class'] = trim(
102	'ff-el-form-control ' . Arr::get($data, 'attributes.class', '')
103	);
104
105	$input = '<input ' . $this->buildAttributes($data['attributes'], $form) . '>';
106	$html = $this->buildElementMarkup($input, $data, $form);
107
108	$this->p

People who liked this also viewed

6 picks

Type

fluentform-custom-fields

21stars1forks

View on GitHub

How to install fluentform-custom-fields?

lonsdale201/wp-agent-skills/fluentform-custom-fields

$npx -y skills add Lonsdale201/wp-agent-skills --skill fluentform-custom-fields

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Fluent Forms custom fields
2
3	Build fields against the documented Free-core `BaseFieldManager` contract. Do
4	not copy a Pro component and accidentally make the extension depend on Pro.
5
6	Read [field-contract.md](references/field-contract.md) when implementing a new
7	field or debugging nested values, response rendering, editor settings, or Pro
8	feature detection.
9
10	## Availability contract
11
12	\| Surface \| Availability in 6.2.7 \|
13	\|---\|---\|
14	\| `FluentForm\App\Services\FormBuilder\BaseFieldManager` \| Free \|
15	\| Editor registration, frontend render hook, parser input type, conditional support \| Free \|
16	\| Element input/validation/response filters \| Free \|
17	\| Phone, range slider, NPS, ranking, dynamic field, chained select, repeater, rich text, file upload \| Pro implementations \|
18
19	The Pro fields demonstrate the same Free base class. Referencing their element
20	keys, JavaScript, uploader, data-source, or server classes is still Pro-only.
21
22	## Workflow
23
24	1. Inspect the installed versions and feature-detect every class or constant used.
25	2. Choose a globally unique, lowercase element key and a configurable input
26	`attributes.name`; never use the element key as a permanent business ID.
27	3. Bootstrap on `fluentform/loaded` and instantiate the field once.
28	4. Return a complete editor component with `element`, `attributes`, `settings`,
29	and `editor_options`.
30	5. Render with the inherited markup helpers so labels, error placement,
31	conditional logic, repeated form instances, and accessibility remain intact.
32	6. Normalize before rule validation, validate on the server, then add a separate
33	display formatter for entries/emails.
34	7. Test editor insertion, saved/reloaded configuration, classic and
35	conversational rendering, valid/invalid submission, conditional visibility,
36	entry display, email/feed value, and two instances of the same form.
37
38	## Bootstrap and field skeleton
39
40	```php
41	use FluentForm\App\Services\FormBuilder\BaseFieldManager;
42	use FluentForm\Framework\Helpers\ArrayHelper as Arr;
43
44	add_action('fluentform/loaded', static function (): void {
45	if (!class_exists(BaseFieldManager::class)) {
46	return;
47	}
48
49	new Acme_Order_Code_Field();
50	});
51
52	final class Acme_Order_Code_Field extends BaseFieldManager
53	{
54	public function __construct()
55	{
56	parent::__construct(
57	'acme_order_code',
58	__('Order code', 'acme-addon'),
59	['order', 'reference', 'code'],
60	'advanced'
61	);
62	}
63
64	public function getComponent()
65	{
66	return [
67	'index' => 20,
68	'element' => $this->key,
69	'attributes' => [
70	'type' => 'text',
71	'name' => 'acme_order_code',
72	'value' => '',
73	'class' => '',
74	'placeholder' => '',
75	],
76	'settings' => [
77	'label' => __('Order code', 'acme-addon'),
78	'admin_field_label' => '',
79	'label_placement' => '',
80	'help_message' => '',
81	'container_class' => '',
82	'validation_rules' => [
83	'required' => [
84	'value' => false,
85	'message' => __('This field is required.', 'acme-addon'),
86	],
87	],
88	'conditional_logics' => [],
89	],
90	'editor_options' => [
91	'title' => __('Order code', 'acme-addon'),
92	'icon_class' => 'ff-edit-text',
93	'template' => 'inputText',
94	],
95	];
96	}
97
98	public function render($data, $form)
99	{
100	$data['attributes']['id'] = $this->makeElementId($data, $form);
101	$data['attributes']['class'] = trim(
102	'ff-el-form-control ' . Arr::get($data, 'attributes.class', '')
103	);
104
105	$input = '<input ' . $this->buildAttributes($data['attributes'], $form) . '>';
106	$html = $this->buildElementMarkup($input, $data, $form);
107
108	$this->p

People who liked this also viewed

6 picks

Type