README

在构建表单时有许多选项，以下是您可以选择的选项和可以添加的字段类型。

选项

这些选项是表单插件为您设置表单所必需的。它们位于您的 .config.yml 文件中 forms 键下。

forms:
    my-form: # This is your form ID
        remote: <key> # If this form is handled by our remote API, the key goes here and the below options are configured remotely.
        name: Contact Form # This is the name of the form
        email: true # Should the result be sent in an e-mail?
        db: false # Should the result be stored in a database?
        autoresponder: true # Should the user get a thank you message?
        recipient: chris@resknow.co.uk # Where to send the form to
        subject: New message # The subject line of the e-mail
        subject_autoresponder: Thank you # The subject line of the autoresponse
        success_message: Your message has been sent # Message to display when the form is submitted successfully
        location: /thanks # URL to direct users to after successfully submitting the form
        submit: # Submit button options
            text: Submit
            classes: button positive

        honeypot: false # Set to true to add a honeypot to reduce spam submissions.

        fields:
            ...

注意： honeypot 功能会创建一个键名为 how 的字段，因此请避免使用该键为自己的字段。

字段

字段定义在表单配置的 fields 键下。有许多字段类型，以下列出了这些类型及其可用选项。

大多数字段类型也支持作为选项的 HTML 属性。

文本字段

    # Text field
    name: # This is the field key (HTML name attribute)

        ### Required ###
        label: Name # Label
        type: text # Input type

        ### Optional ###
        show_label: false # Whether to display the label above the field (defaults to true)
        validate: required # Validation rules {see: https://github.com/Wixel/GUMP#available-validators}
        filter: trim|sanitize_string # Filter rules {see: https://github.com/Wixel/GUMP#available-filters}
        classes: block pad-16 # Custom CSS classes to add to this field
        value: Chris # A default value
        placeholder: Enter your name # Placeholder text
        description: Something useful # Description to display under the field

        ### Optional HTML Attributes ###
        autocomplete: "true"
        autofocus: "true"
        min: 2
        max: 6
        pattern: /0-9/+
        step: 2
        maxlength: 100
        readonly: "true"
        disabled: "true"

文本区域字段

    # Text field
    message: # This is the field key (HTML name attribute)

        ### Required ###
        label: Message # Label
        type: textarea # Input type

        ### Optional ###
        show_label: false # Whether to display the label above the field (defaults to true)
        validate: required # Validation rules {see: https://github.com/Wixel/GUMP#available-validators}
        filter: trim|sanitize_string # Filter rules {see: https://github.com/Wixel/GUMP#available-filters}
        classes: block pad-16 # Custom CSS classes to add to this field
        value: Chris # A default value
        placeholder: Enter your name # Placeholder text
        description: Something useful # Description to display under the field

        ### Optional HTML Attributes ###
        autocomplete: "true"
        autofocus: "true"
        min: 2
        max: 6
        pattern: /0-9/+
        step: 2
        maxlength: 100
        readonly: "true"
        disabled: "true"

选择字段

    # Select field
    country: # This is the field key (HTML name attribute)

        ### Required ###
        label: Country # Label
        type: select # Input type
        options: # List of options (key: value)
            uk: United Kingdom
            usa: United States
            can: Canada

        ### Optional ###
        show_label: false # Whether to display the label above the field (defaults to true)
        validate: required # Validation rules {see: https://github.com/Wixel/GUMP#available-validators}
        filter: trim|sanitize_string # Filter rules {see: https://github.com/Wixel/GUMP#available-filters}
        classes: block pad-16 # Custom CSS classes to add to this field
        value: Chris # A default value
        description: Something useful # Description to display under the field

        ### Optional HTML Attributes ###
        readonly: "true"
        disabled: "true"

日期选择器字段

提供处理日期的日期选择器 UI。

    # Datepicker field
    date: # This is the field key (HTML name attribute)

        ### Required ###
        label: Date # Label
        type: datepicker # Input type

        ### Optional ###
        show_label: false # Whether to display the label above the field (defaults to true)
        validate: required # Validation rules {see: https://github.com/Wixel/GUMP#available-validators}
        filter: trim|sanitize_string # Filter rules {see: https://github.com/Wixel/GUMP#available-filters}
        classes: block pad-16 # Custom CSS classes to add to this field
        value: Chris # A default value
        placeholder: Enter your name # Placeholder text
        description: Something useful # Description to display under the field

        ### Optional HTML Attributes ###
        autocomplete: "true"
        autofocus: "true"
        min: 2
        max: 6
        pattern: /0-9/+
        step: 2
        maxlength: 100
        readonly: "true"
        disabled: "true"

选择字段

提供基于按钮的小组选择的 UI。

    # Choice field
    country: # This is the field key (HTML name attribute)

        ### Required ###
        label: Country # Label
        type: select # Input type
        options: # List of options (key: value)
            uk: United Kingdom
            usa: United States
            can: Canada

        ### Optional ###
        show_label: false # Whether to display the label above the field (defaults to true)
        validate: required # Validation rules {see: https://github.com/Wixel/GUMP#available-validators}
        filter: trim|sanitize_string # Filter rules {see: https://github.com/Wixel/GUMP#available-filters}
        classes: block pad-16 # Custom CSS classes to add to this field
        description: Something useful # Description to display under the field

        ### Optional HTML Attributes ###
        disabled: "true"

所见即所得字段

    # Wysiwyg field
    message: # This is the field key (HTML name attribute)

        ### Required ###
        label: Message # Label
        type: wysiwyg # Input type

        ### Optional ###
        show_label: false # Whether to display the label above the field (defaults to true)
        validate: required # Validation rules {see: https://github.com/Wixel/GUMP#available-validators}
        filter: trim|sanitize_string # Filter rules {see: https://github.com/Wixel/GUMP#available-filters}
        classes: block pad-16 # Custom CSS classes to add to this field
        value: Chris # A default value
        description: Something useful # Description to display under the field

内容字段

允许您在表单中包含自定义内容。注意：此字段类型的标签从不显示，并且值不包括在用户输入中。

    # Content field
    notice: # This is the field key (HTML name attribute)

        ### Required ###
        label: ReCaptcha Notice # Label
        type: content # Input type
        callback: my_callback_function # PHP function that renders your content

分组字段

允许您将多个字段分组，默认使用 CSS Grid，但如果需要，您可以自定义样式。

注意：网格布局仅支持每行最多 4 个字段。

    # Content field
    group: # This is the field key (HTML name attribute)

        ### Required ###
        label: Group of fields # Label
        type: group # Input type
        fields: # A list of field IDs
            name
            date

        ### Optional ###
        show_label: false # Whether to display the label above the field (defaults to true)
        classes: block pad-16 # Custom CSS classes to add to this field
        description: Something useful # Description to display under the field
        grid: false # Display items as block

验证与过滤器

字段验证和过滤由 GUMP 完成。表单还提供垃圾邮件过滤器验证器，允许您在发现垃圾邮件时使表单无效。

有关详细信息，请参阅 Form 插件中的 inc/functions.php。

此验证器的键为 spam_filter。将此添加到验证规则中，以应用垃圾邮件检查。

渲染表单！

创建表单后，要在页面上渲染它，请在您希望显示的地方包含以下内容

Twig

{{ render_form('my-form') }}

PHP

<?php echo render_form('my-form') ?>

将 my-form 替换为您实际的表单 ID :)

另外，请注意，上面的示例截图包含自定义样式，Form 插件尽量不提供有偏见的样式，这取决于您作为设计师的选择。