<@cms_custom_form>

自定义表单标签

标签名

<@cms_custom_form>

标签描述

获取自定义表单数据，通过${Data.name}获取表单字段值，通过${Data.action}获取表单提交api地址

标签属性

使用示例

示例1：自定义表单模板

<form id="form_contactus">
  <input type="hidden" id="formId" value="${CustomForm.formId}" />
  <table>
      <@cms_xmodel_field modelid="${CustomForm.modelId}">
      <#list DataList as field>
        <#if field.controlType == 'input'>
        <tr>
          <td style="padding:5px;text-align:right;width:70px">${field.name}</td>
          <td style="padding:5px;" colspan="2"><input type="text" class="form-control" id="${field.code}" /></td>
        </tr>
        </#if>
      </#list>
    </@cms_xmodel_field>
    <#if CustomForm.needCaptcha == 'Y'>
    <tr>
      <td style="padding:5px;text-align:right;width:70px">验证码</td>
      <td style="padding:5px;"><input type="text" class="form-control" id="captcha" /></td>
      <td><img src="" id="captcha-img-${CustomForm.formId}" class="captcha-img" style="height:34px;margin-right:5px;" /></td>
    </tr>
    </#if>
    <tr>
      <td></td>
      <td style="text-align:right;padding:5px;"><input type="button" class="form-control" value="提交" onclick="submitCustomForm()" style="color:#666;width:auto;"> </td>
    </tr>
  </table>
</form>
<script>
  (function(){
    var vid = localStorage.getItem("CC_VISITOR_ID")
    if(!vid || vid.length == 0) {
      import('${Prefix}js/fingerprint.js').then(FingerprintJS => FingerprintJS.load()).then(fp => fp.get()).then(result => localStorage.setItem("CC_VISITOR_ID", result.visitorId));
    }
    $(document).ready(refreshCaptcha).on("click", "#captcha-img-${CustomForm.formId}", refreshCaptcha);
    function refreshCaptcha() {
      var captchaEnabled = "${CustomForm.needCaptcha}" == "Y";
      if (captchaEnabled) {
        $.ajax({
          url: "${IsPreview?then(ApiPrefix,Prefix)}api/customform/captcha?formId=${CustomForm.formId}&_cc_uuid=" + localStorage.getItem("CC_VISITOR_ID"),
          type: "get",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          headers: {
            "cc-uuid": localStorage.getItem("CC_VISITOR_ID")
          },
          success: function(res) {
            if (res.code == 200) {
              $("#captcha-img-${CustomForm.formId}").attr("src", "data:image/gif;base64," + res.data.image);
            }
          }
        }) 
      }
    }
    function submitCustomForm() {
      $.ajax({
        url: "${CustomForm.action}",
        type: "post",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        headers: {
          "cc-uuid": localStorage.getItem("CC_VISITOR_ID")
        },
        data: JSON.stringify({"formId": $('#formId').val(), "uname": $('#uname').val(), "phone": $('#phone').val(), "email": $('#email').val(), "company": $('#company').val(), "captcha": $('#captcha').val() }),
        success: function(res) {
            alert(res.msg)
        }
      }) 
    }
  })()
</script>