README

此插件提供了一种简单创建前端表单的方法。

安装

使用 composer 安装插件

composer require offline/oc-forms-plugin

特性

• 在后台创建表单
• 在前端显示表单
• 在后台查看提交
• 表单提交时发送电子邮件通知
• 将提交导出到 CSV
• 多站点支持
• 使用 Responsiv.Uploader 插件进行可选文件上传
• 默认与 OFFLINE.Boxes 集成。

用法

在后台，转到表单菜单项并创建一个新的表单。您可以使用 renderForm 组件在前端显示表单。所有表单的提交都将显示在后台。

组件

renderForm

使用 renderForm 组件在前端显示表单。

AJAX 框架依赖

组件需要在页面上有 AJAX 框架。您可以将 includeFramework 属性设置为 true 以自动包含框架。

CSS 类

默认表单标记包含一些 CSS 类，您可以使用这些类来设置表单样式。

您可以将 cssPrefix 属性设置为更改 CSS 类的前缀。

表单类

使用 formClasses 属性向表单元素添加额外的 CSS 类。

蜜罐

表单包含一个蜜罐字段来防止垃圾邮件。您可以通过将 honeypot 属性设置为 false 来禁用此功能。

文件上传

要启用文件上传，您需要安装 Responsiv.Uploader 插件

composer require responsiv/uploader-plugin

安装插件后，您可以在后台将文件上传字段添加到您的表单中。

您可以使用 fileuploadPlaceholderText 属性定义上传按钮的自定义占位符文本。

重要：Responsiv.Uploader 依赖于 jQuery。这意味着您需要在页面上包含 jQuery。如果您希望组件自动包含 jQuery，请将 includeJQuery 属性设置为 true。

验证码支持

要启用验证码支持，您需要安装 Captacha for Laravel composer 包

composer require mews/captcha

安装此包后，您可以在表单设置中启用验证码字段。

字段覆盖

renderForm 组件提供了一种强大的方法来覆盖默认表单字段部分。

为此，在您的 partials 目录中创建一个具有正确名称的部分。

覆盖按以下顺序处理

名称覆盖

通过名称覆盖字段。为此，创建一个具有以下名称的部分

_name_{fieldName}.htm
# Example: _name_address.htm
# Important: The field name is sluggified. So "Your Name" becomes "your-name".

类型覆盖

通过给定的输入类型覆盖所有字段。为此，创建一个具有以下名称的部分

_type_{fieldType}.htm
# Example: _type_email.htm

通用覆盖

查看 renderForm 组件的 默认部分。您可以覆盖任何其他部分，如 label 或 validation 消息。

OFFLINE.Boxes 集成

为了让 renderForm 组件在 Boxes 中可用，请使用以下部分

form.htm

{% component box.uniqueComponentAlias('renderForm') %}

form.yaml

handle: OFFLINE.Forms::forms
name: 'offline.forms::lang.forms'
section: 'offline.forms::lang.boxes_section'

validation:
    rules:
        form: required

components:
    renderForm:
        uniqueAlias: true
        # properties:
        #   formClasses: 'floating-label'
        #   cssPrefix: 'prefix-'
        #   includeJQuery: true
        #   includeFramework: true

form:
    fields:
        form:
            label: 'offline.forms::lang.form'
            type: dropdown
            span: full
            emptyOption: 'offline.forms::lang.form_empty_option'
            options: '\OFFLINE\Forms\Models\Form::getFormOptions'

辅助方法

prependField 和 appendField

这两个方法允许您在现有字段之前或之后添加字段。

$form->prependField([
    'name' => 'some-field',
    'label' => 'First field',
    'type' => 'text',
]);

mapFields

对表单中的每个字段应用转换。转换将接收字段作为其第一个参数。

$form->mapFields(function (array $field) {
    if (array_get($field, 'is_required')) {
        $field['label'] .= ' (required)';
    }

    return $field;
});

applyPlaceholderToFields

Form 模型提供了一个简单的辅助方法，将占位符应用于所有未设置占位符的字段。字段的 label 属性将用作占位符。

这对于需要每个字段都有占位符的“浮动标签”表单实现很有用。

您可以传递一个可选的转换函数。

$form->applyPlaceholderToFields(function(array $field) {
    if (array_get($field, 'is_required')) {
        $field['placeholder'] .= ' *';
    }

    return $field;
});

事件

offline.forms::form.extend

使用此事件对表单进行全局更改（前端、后端、导出）。

Event::listen(
    \OFFLINE\Forms\Classes\Events::FORM_EXTEND,
    function (\OFFLINE\Forms\Models\Form $form, string $context, $widget) {
            if ($context === Contexts::FIELDS) {
                // Form fields are being extended.
                info('$widget is a Backend Form widget');
            } else if ($context === Contexts::COLUMNS) {
                // List columns are being extended.
                info('$widget is a Backend Lists widget');
            } else if ($context === Contexts::COMPONENT) {
                // The form is rendered in the component.
                info('$widget is the RenderForm component');
            } else if ($context === Contexts::MAIL) {
                // The mail for a form submission is being sent.
                info('$widget is null');
            }

            // Add a field for a specific form.
            if ($form->slug === 'my-form') {
                $form->prependField([
                    'name' => 'my-hidden-value',
                    'label' => 'Something additional',
                    'type' => 'hidden',
                    'value' => 'Top secret'
                ]);
            }
    }
);

offline.forms::form.beforeRender

使用此事件在表单渲染之前进行更改。

Event::listen(
    \OFFLINE\Forms\Classes\Events::FORM_BEFORE_RENDER,
    function (\OFFLINE\Forms\Models\Form $form, \OFFLINE\Forms\Components\RenderForm $component) {
        // Do anything with the form or $form->fields here.
        $form->applyPlaceholderToFields();
    }
);