简要说明

在线留言模板包含验证、表单、回复三个部分，需要引入默认的js与css实现弹窗效果，还需要引入分页{include tpl=common/pagelist} 

顶部必须需要引入的js与css

<link type="text/css" rel="stylesheet" href="/{#css#}/artdialog.css">
<script type="text/javascript" src="{url ctrl=js ext=jquery.artdialog/}" charset="utf-8"></script>
<script type="text/javascript" src="/js/global.js" charset="utf-8"></script>

主体代码参考

【验证用的】
<script type="text/javascript">
$(document).ready(function(){
	$("#book_post").submit(function(){
		//提交表单
		if(!$('#title').val()){
			$.dialog.alert("主题不能为空");
			return false;
		}
		if(!$('#fullname').val()){
			$.dialog.alert('姓名不能为空');
			return false;
		}
		if(!$('#email').val()){
			$.dialog.alert('邮箱不能为空');
			return false;
		}
		if(!$('#content').val()){
			$.dialog.alert('留言内容不能为空');
			return false;
		}
		$(this).ajaxSubmit({
			'url':api_url('post','save'),
			'type':'post',
			'dataType':'json',
			'success':function(rs){
				if(rs.status == 'ok'){
					$.dialog.alert('您的留言信息已发布，请耐心等候管理员审核，感谢您的提交',function(){
						$.phpok.reload();
					},'succeed');
				}else{
					$.dialog.alert(rs.content,function(){
						$("#update_vcode").phpok_vcode();
						$("#_chkcode").val('');
					});
					return false;
				}
			}
		});
		return false;
	});
});
</script>

【主体表单】
        <div class="content mess">
				<form method="post" id="book_post">
				<input type="hidden" name="id" id="id" value="{$page_rs.identifier}" />
				{fields pid=$page_rs.id fields_format=1 in_title=1}
				<table width="100%">
				{loop from=$list key=$key value=$value}
				{if $value.identifier != 'adm_reply'}
				<tr>
					<td width="150px" align="right" valign="top">{$value.title}：</td>
					<td class="td">{$value.html}</td>
				</tr>
				{/if}
				{/loop}
				{if $sys.is_vcode && function_exists("imagecreate")}
				<tr>
					<td align="right" valign="top">验证码：</td>
					<td class="td">
						<table cellpadding="0" cellspacing="0" width="180px">
						<tr>
							<td><input type="text" name="_chkcode" id="_chkcode" class="vcode" /></td>
							<td align="right"><img src="" border="0" align="absmiddle" id="update_vcode" class="hand"></td>
						</tr>
						</table>
						<script type="text/javascript">
						$(document).ready(function(){
							$("#update_vcode").phpok_vcode();
							//更新点击时操作
							$("#update_vcode").click(function(){
								$(this).phpok_vcode();
							});
						});
						</script>
					</td>
				</tr>
				{/if}
				<tr>
					<td>&nbsp;</td>
					<td><input type="submit" value=" 提交 " class="submit" /></td>
				</tr>
				</table>
				</form>
			</div>
        
【管理员回复】
        {loop from=$rslist key=$key value=$value id=$tmpid}
		<div class="pfw{if $tmpid.num != $tmpid.total} mb10{/if}">
			<h3>{$value.title}<small>（{func time_format $value.dateline}）</small></h3>
			<div class="content">{$value.content}</div>
			{if $value.adm_reply}
			<div class="adm_reply"><span><img src="/{#images#}/user_default.png" align="absmiddle" width="15px" /> 管理员回复：</span>{$value.adm_reply}</div>
			{/if}
		</div>
		{/loop}

样式代码

.mess {
	padding: 0;
	margin: 0;
	font-size: 14px
}
.mess tr {
	padding: 0;
	margin: 0;
	line-height: 50px;
	height: 50PX
}
.mess input {
	display: inline-block;
	height: 25px;
	padding: 2px 8px;
	font-size: 12px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}

.mess textarea {
	width:500px !important;
	display: inline-block;
	padding: 2px 8px;
	font-size: 12px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}
.mess .submit {
	width: 240px;
	height: 40px !important;
	text-align: center;
	color: #fff !important;
	font-size: 16px;
	background: #4081d6 !important;
	border-radius: 10px;
	border: 0 none;
	cursor: pointer;
}
div.pfw{position:relative;border:1px solid #e1e1e1; margin-top:30px; }
div.pfw:after{content:".";display:block;height:0;clear:both;visibility:hidden;line-height:0;overflow:hidden;}
div.pfw h3{height:30px;line-height:30px;font-size:1em;margin:0;padding:0 0 0 20px;background:#f6f6f6 url(/images/heading_bg.png) 8px top no-repeat;border-bottom:1px solid #e1e1e1; color:#444; font-weight:bold;}
div.pfw h3 small{font-size:12px;color:#666;font-weight:normal;padding-left:4px;font-style:normal;}
div.pfw h3 .more{display:block;float:right;height:30px;line-height:30px;padding-right:8px;font-weight:normal;font-size:12px;margin-right:5px;}
div.pfw .content{margin:5px;font-size:12px;line-height: 1.6em;padding:10px;}
div.pfw .adm_reply {margin:6px 0 0 0;font-size:1em;line-height:200%;padding:25px 5px 25px 25px;position:relative; color:#444; border-top:1px solid #e1e1e1; background:#f7faff;}
div.pfw .adm_reply span{color:darkred; font-weight:bold; color:#e77718; }

手机端的主体与样式不复制了，看默认标准版的手机版样式

*第三方验证码*

验证码.zip

<form id="book_post"  method="post" class="form-info">
    <input type="hidden" name="id" id="id" value="{$page_rs.identifier}" />
    <input type="hidden" name="title" id="title" value="联系我们页面留言" />
    <div class="field-row">
        <div class="one-three">
            <p class="input-info"><input type="text" name="fullname" id="fullname" value="" placeholder="您的姓名 *"  required></p>
        </div>
        <div class="one-three">
             <p class="input-info"><input type="email" name="email" id="email" value="" placeholder="Email邮箱 *" required></p>
        </div>
        <div class="one-three">
             <p class="input-info"><input type="text" name="mobile" id="mobile" value="" placeholder="电话号码 *" required></p>
        </div>
     </div>
     <div class="input-text">
        <textarea id="content" name="content" placeholder="留言内容 *" required></textarea>
     </div>
     <div class="btn-submit">
         <button type="submit">提交留言</button>
         <div id="yanzhengma"></div>
     </div>
</form>


<link type="text/css" rel="stylesheet" href="/{#css#}/artdialog.css">
<script type="text/javascript" src="{url ctrl=js ext=jquery.artdialog/}" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="stylesheet/verify.css">
<script type="text/javascript" src="javascript/verify.min.js" ></script>
<script>
    $("#book_post").submit(function(){
        // 判断不为空
        // if(!$('#fullname').val()){
        //     $.dialog.alert('姓名不能为空');
        //     return false;
        // }
        $('#yanzhengma').show();
        return false;
    });
</script>