gromit/oc-forms-plugin

OctoberCMS的前端表单构建器。

1.0.5 2024-03-04 17:49 UTC

This package is auto-updated.

Last update: 2024-09-04 18:47:28 UTC


README

GromIT.Forms 是 October CMS 的简单而强大的前端表单构造器。

创建表单

要创建新表单,请转到主菜单中的 表单。然后点击 添加表单 按钮。

在下一页上,您可以创建一个新的空表单。表单键必须是唯一的。

创建新空表单后,您可以在表单中添加字段。为此,请点击 添加字段 按钮,并选择字段类型。您可以添加任意数量的字段。

reCAPTCHA

GromIT.Forms 支持 Google reCAPTCHA。

要在使用表单时使用 reCAPTCHA,您必须转到 设置 -> 表单插件设置 -> reCAPTCHA 并输入您的网站密钥和密钥。您可以在 reCAPTCHA 控制面板 获取密钥。

渲染表单

要将表单渲染到页面中,请转到 CMS -> 页面 -> 您的页面,然后将侧边栏中的 表单 组件拖放到页面上。然后在组件设置中选择要渲染的表单。所有表单都无样式渲染,因此所有 CSS 都由您自己负责。

另一种选项是自行渲染表单。您可以像下面这样操作。

title = "Form"
url = "/"

[gromitForms]
==
{% set form = gromitForms.getForm('test-form-key') %}
<div id="my-form">
    <form data-request="gromitForms::onSubmit"
          data-request-update="success: '#my-form'"
          data-request-validate
          data-request-files
          data-request-flash>
        <input type="hidden" name="form_key" value="{{ form.key }}">
        <div>
            <label>
                Your name
                <input type="text" name="your_name" required>
            </label>
        </div>
        <button type="submit">Submit</button>
    </form>
</div>

<script src="{{ ['@jquery', '@framework', '@framework.extras'] | theme }}"></script>

请记住添加 October AJAX 框架以及带有 form_key 字段的额外内容。

导出和导入表单

创建表单后,您可以导出它以稍后导入。这对于在开发机器上测试表单并在生产环境中稍后导入非常有用。

要导出表单,请转到表单编辑页面,然后点击页面底部的 导出 按钮。

要导入表单,请转到 表单 页面并点击上传按钮。然后选择文件并点击上传。如果已存在具有上传文件中密钥的表单,则密钥将附加随机字符串。

导出提交

要导出提交

  • 转到 表单 -> 提交
  • 在工具栏中点击 导出 按钮
  • 选择表单
  • 点击 导出

事件

插件提供了一些事件。您可以捕获它们并对它们做些事情。

Event::listen(
    'gromit.forms::form.submitting',
    function (Form $form, array $data, ?array $requestData, ?array $userData) {
        //
    }
);

Event::listen(
    'gromit.forms::form.submitted',
    function (Form $form, Submission $submission) {
        //
    }
);