这个比较简单一些。
- 先写好留言表单的html代码，我的代码如下：（采用了bootstrap响应式框架）
<div class="message">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" style="font-size: 16px; color: #666;">姓名：</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="请问您怎么称呼">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" style="font-size: 16px; color: #666;">电话：</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="请输入您的电话">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" style="font-size: 16px; color: #666;">邮箱：</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="请输入您的邮箱">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" style="font-size: 16px; color: #666;">留言：</label>
<div class="col-sm-10">
<textarea class="form-control" placeholder="请描述您的需求或问题" rows="4"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary btn-lg">提交</button>
</div>
</div>
</form>
</div>
2.在Siteserver后台功能管理——表单提交管理处添加留言表单，根据需要填写信息，然后点击表单字段——（批量）新增字段
添加表单
新增字段
3.添加好字段后返回表单，点击预览，可看到生成的代码。
根据需要，把相应的代码添加到之前写好的表单代码中。
注：表单要被包裹在<stl:input inputName="客户留言"></stl:input>标签中。
模板代码如下：
<div class="message">
<stl:input inputName="客户留言">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" style="font-size: 16px; color: #666; margin-top:10px;">姓名：</label>
<div class="col-sm-10" style="margin-bottom: 20px;">
<input id="name" name="name" type="text" class="form-control" value="" placeholder="请问您怎么称呼">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" style="font-size: 16px; color: #666; margin-top:10px;">电话：</label>
<div class="col-sm-10" style="margin-bottom: 20px;">
<input id="phone" name="phone" type="text" class="form-control" value="" placeholder="请输入您的电话">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" style="font-size: 16px; color: #666; margin-top:10px;">邮箱：</label>
<div class="col-sm-10" style="margin-bottom: 20px;">
<input id="email" name="email" type="text" class="form-control" value="" placeholder="请输入您的邮箱">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" style="font-size: 16px; color: #666; margin-top:10px;">留言：</label>
<div class="col-sm-10" style="margin-bottom: 20px;">
<textarea id="message" name="message" class="form-control" value="" placeholder="请描述您的需求或问题" rows="4"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10" >
<button id="submit" type="submit" class="btn btn-primary btn-lg" value=" 提 交 ">提交</button>
</div>
</div>
</form>
</stl:input>
</div>
做成模板后不知为什么form-group的下边距失效了，只能在这里添加style样式。
最终效果：
PC端
手机端
参考：
