form 表单标签

用于获取在后台创建的留言表单输出到前台，注意该标签不是自动生成表单

支持 v2.2.1.20220603 及以上版本

参数

示例

在任意页面调用表单，例如在联系我们调用在线留言表单

第一步：后台模型管理，新建留言表单，如果安装的是演示数据，那么已经存在留言表单了，创建好后点击字段管理进入，如下图所示

第二部： 绑定到栏目
第三步：来到模板页面，在你要调用的页面上调用form表单，catid是栏目ID，参考默认模板page_contact页面里面的调用
详情看里面的注释

// attr属性里面的字符内容，原样输出到form标签上，下面给了个class，id，以及enctype属性，默认已经有action、method属性了{hkcms:form catid="34" attr="class='frm-data' id='frm' enctype='multipart/form-data'"}// $item.category.title，获取当前留言表单的栏目信息，$item.category里面是栏目字段<h3 class="column-title">{$item.category.title}</h3><div class="form-group">
    // 语言包，不需要语言包就直接写中文即可
    <label>{:__('Name')}</label>
    // $item.field 里面就是提交的字段，看上图，获取name 姓名，就是$item.field.name
    <input class="form-control form-control-name" name="{$item.field.name|default=''}" id="name" placeholder="" type="text" required=""></div><div class="form-group">
    <label>{:__('Mail')}</label>
    <input class="form-control form-control-email" name="{$item.field.email|default=''}" id="email" placeholder="" type="email" required=""></div><div class="form-group">
    <label>{:__('Telephone')}</label>
    <input class="form-control form-control-subject" name="{$item.field.phone|default=''}" id="subject" placeholder="" required=""></div><div class="form-group">
    <label>{:__('Content')}</label>
    <textarea class="form-control form-control-message" name="{$item.field.content|default=''}" id="message" placeholder="" rows="10" required=""></textarea></div><div class="form-group">
    <label>{:__('Verify code')}</label>
    <div class="d-flex align-items-center">
        {// 输入框，可以自己写个输入框来实现自定义，样式的调整：里面有两个class分别是：form-control(bootstrap class) form-captcha，按这两个class调整即可}
        <div class="mr-3">{$item.captcha.input}</div>
        {// 验证码btn，图文验证码时是图片，其他的则是发送按钮}
        <div class="captcha" style="width: 138px">{$item.captcha.btn}</div>
    </div></div><div class="form-group">
    <button class="btn btn-primary  blank" type="submit">{:__("Submit")}</button></div>{/hkcms:form}

提示信息多语言化

字段如下图所示

当你的字段标题是中文的情况下，例如你有中英双语，在中文预览下你无需操作，在英文下你需要配置英文预览下显示的文字信息，步骤如下

1. 在后台右上角进入主题管理如下图配置

配置完成后即可实现不同语言下提示不同的信息内容

验证码、表单配置

如上面完整示例
使用{$item.captcha.input}可以获取到验证码，根据后台模型配置，会自动显示响应的输入框提示
使用{$item.captcha.btn}自动根据后台模型配置，显示按钮或图文

确保邮箱验证码有email字段，手机验证码有phone字段

若要自定义可自行增加验证码控件。

邮箱、手机验证码控件生成后并不能实现点击，官方并没有默认集成JS代码，下面提供了演示代码，需要JQ的支持

如果你的模板使用JQ以及错误提示框（layer），那么复制下面的代码放到页面底部就可以直接实现验证码发送功能。

<script>
    // 手机、邮箱验证码发送演示。需要jq、弹出框提示用的是layer
    $('[data-toggle="captcha_send"]').click(function (e) {
        var obj = this;
        if ($(obj).is('.disabled')) {
            return false;
        }

        // 发送类型，手机/邮箱
        var type = $(obj).data('type');
        var frm = $(obj).parents('form'); // 获取当前form表单
        var txt = ''; // 提示信息
        var inter = 0; // 定时器

        if (type=='email') {
            txt = frm.find('input[name="row[email]"]').val(); // 获取邮箱，确保里面有email字段
        } else if (type=='mobile') {
            txt = frm.find('input[name="row[phone]"]').val(); // 获取手机号
        }

        $(obj).addClass('disabled').text('发送中...');

        // 发送邮件
        $.ajax({
            type:"post",
            url:$(obj).data('url'), // 请求地址
            data:{type:$(obj).data('type'),obj:txt},
            success: function (res) {
                if (res.code==200) {
                    var seconds = 60;
                    inter = setInterval(function () {
                        seconds--;
                        if (seconds<=0) {
                            clearInterval(inter);
                            $(obj).removeClass('disabled').text('发送验证码');
                        } else {
                            $(obj).text('重新发送 '+seconds+' s');
                        }
                    }, 1000)
                    layer.msg('发送成功');
                } else {
                    // 发送错误提示错误信息
                    layer.msg(res.msg);
                    $(obj).removeClass('disabled').text('发送验证码');
                }
            },
            error: function (res) {
                layer.msg('error');
                $(obj).removeClass('disabled').text('发送验证码');
            }
        });
    })</script>

数据字典

下面的字段使用方法，默认是{$item.action} {$item.field.name} 这样来调用，也可以直接使用<?php dump($item);?>输出所有字段到页面上查看详细信息。

一级字段列表

all字段列表，多行，有几个字段就有几行