sscms V7利用自定义表单实现在线留言功能的具体步骤如下：
1、在后台新建表单，这里以“联系我们”为例，如下：
2、保存后，侧边栏的表单管理里就会出现刚才的表单，点击它，给表单添加相关字段，设置必填验证等：
3、给表单添加测试数据，为了看出列表效果：
4、如果要展示表单数据列表，只需要在调用的地方加入下面的代码即可：
<stl:form name="表单名称" type="list"></stl:form>
5、在需要填写的地方加入下面代码：
<stl:form name="表单名称" type="submit"></stl:form>
列表模板的位置在：
/sitefiles/assets/forms/list/index.html
填写的模板在：
/sitefiles/assets/forms/submit/index.html
具体可以在表单管理->表单模板里看到：
当然，也可以自定义表单样式，下面是一个示例：
1、html代码：
<link rel="stylesheet" type="text/css" href="{Stl.SiteUrl}/tpl/style/popup.css">
<stl:form name="联系我们" id="myForm" onBeforeSend="validateForm">
<div class="contact-popup" id="contactPopup">
<div class="contact-form">
<div class="form-header">
<span>联系我们</span>
<img class="close" onclick="hideContactPopup()" src="{Stl.SiteUrl}/tpl/imgs/popup_close.png">
</div>
<div class="form-body">
<div class="left">
<div class="row">
<label>姓名*</label>
<input type="text" name="Name" placeholder="请输入您的姓名">
</div>
<div class="row">
<label>电话号码*</label>
<input type="text" name="Mobile" placeholder="请输入您的电话号码">
</div>
<div class="row">
<label>电子邮件*</label>
<input type="text" name="Email" placeholder="请输入电子邮箱">
</div>
<div class="row">
<label>公司名称*</label>
<input type="text" name="GSMC" placeholder="请输入公司名称">
</div>
<div class="row">
<label>工作职位*</label>
<input type="text" name="GZZW" placeholder="请输入工作职位">
</div>
</div>
<div class="right">
<div class="row">
<label>留言*</label>
<textarea name="Content" placeholder="请备注您的需求"></textarea>
</div>
<div class="contact-area">
<img src="{Stl.SiteUrl}/tpl/imgs/popup_logo.png">
<div>
<span>服务电话：{Stl.phone2}</span>
<span>联系邮箱：{Stl.email}</span>
<span>商务专线：{Stl.phone3}</span>
</div>
</div>
</div>
</div>
<div class="form-footer">
<a href="javascript：;" onclick="formSubmit()">提交</a>
</div>
</div>
<div onclick="hideContactPopup()" class="mask"></div>
</div>
</stl:form>2、popup.css
.contact-popup{position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; align-items: center; justify-content: center; display: flex; visibility: hidden; z-index: -1;}
.contact-popup.show{visibility: visible; z-index: 999;}
.contact-popup .mask{background: rgba(0, 0, 0, .6); left: 0; top: 0; width: 100%; height: 100%; z-index: 1; position: absolute;}
.contact-popup .contact-form{position: relative; transition: all 300ms; z-index:2; width: 960px; background: #fff; box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2); border-radius: 4px; transform: translateY(-200vh);}
.contact-popup.show .contact-form{transform: translateY(0);}
/* 注意：这个error样式，是为了显示错误 */
.contact-popup .error{border: 1px solid red !important;}
.contact-popup .form-header{display: flex; padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.09);}
.contact-popup .form-header .close{width: 24px; height: 24px; cursor: pointer; transition: all 300ms;}
.contact-popup .form-header .close:hover{transform: rotate(180deg);}
.contact-popup .form-header span{color: #000; font-size: 22px}
.contact-popup .form-body{padding: 30px 30px 0; display: flex; align-items: flex-start;}
.contact-popup .form-body .left, .contact-popup .form-body .right{width: 50%}
.contact-popup .form-body .row{display: flex; align-items: center; padding-bottom: 20px;}
.contact-popup .form-body input, .contact-popup .form-body textarea{padding: 10px 14px; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; transition: all 300ms}
.contact-popup .form-body input:hover, .contact-popup .form-body textarea:hover{border-color: #40a9ff}
.contact-popup .form-body input:focus, .contact-popup .form-body textarea:focus{border-color: #40a9ff; outline: 0; box-shadow: 0 0 0 2px #1890ff33;}
.contact-popup .form-body label{color: #3C3C3C; font-size: 20px;}
.contact-popup .form-body .left label{flex-shrink: 0; width: 100px; text-align: right; padding-right: 10px; white-space: nowrap;}
.contact-popup .form-body .left input{width: 100%}
.contact-popup .form-body .right{padding-left: 25px;}
.contact-popup .form-body .right .row{align-items: flex-start;}
.contact-popup .form-body .right label{white-space: nowrap; margin-right: 10px; transform: translateY(8px);}
.contact-popup .form-body .right textarea{width: 100%; height: 177px}
.contact-popup .contact-area{background: #F8F8F8; margin-left: 61px; display: flex; align-items: center; padding: 18px 0 18px 19px; border-radius: 4px;}
.contact-popup .contact-area span{display: block; color: #3C3C3C; margin-left: 30px;}
.contact-popup .form-footer{display: flex; justify-content: flex-end; padding-right: 120px; padding-bottom: 30px;}
.contact-popup .form-footer a{width: 140px; transition: all 300ms; height: 40px; text-align: center; line-height: 40px; color: white; font-size: 20px; letter-spacing: 10px; background: linear-gradient(90deg, #6B1342 0%, #E72C2C 100%); border-radius: 4px;}
.contact-popup .form-footer a:hover{transform: scale(1.1); opacity: .8}3、js
function validateForm(data) {
var success = true;
$('#myForm input').removeClass('error');
$('#myForm textarea').removeClass('error');
if (!data['Name']) {
$('#myForm input[name="Name"]').addClass('error');
success = false;
}
if (!data['Mobile']) {
$('#myForm input[name="Mobile"]').addClass('error');
success = false;
}
if (!data['Email'] || !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(data['Email'])) {
$('#myForm input[name="Email"]').addClass('error');
success = false;
}
if (!data['GSMC']) {
$('#myForm input[name="GSMC"]').addClass('error');
success = false;
}
if (!data['GZZW']) {
$('#myForm input[name="GZZW"]').addClass('error');
success = false;
}
if (!data['Content']) {
$('#myForm textarea[name="Content"]').addClass('error');
success = false;
}
return success;
}4、最终效果：
