我们平时在使用pbootcms程序建站时,经常会用到自定义表单的自定义字段功能,最新版的程序已可以支持全站全模板自定义调取使用了,非常的强大和方便,下面就说说具体的使用方法!


无论是自己新建模板还是直接使用默认的留言板模板都可以实现,直接在后台加入自己的字段,前台添加自定义标签即可。


例如:我们直接在后台留言字段新加了QQ(文本类型),联系地址(文本类型),性别(单选类型),爱好(多选类型),预算(下拉菜单类型)等字段。

1.png


2.png

加号之后,直接在前台模板页面开始添加自定义标签字段,页面的样式标签很灵活,根据自己的项目需要添加即可。


4.png

<!-- 自定义表单字段 -->
               <div class="form-group">
                   <label for="sex">性  别</label>
                   <div>
                       <input type="radio" name="sex" id="sex1" value="男">男
                       <input type="radio" name="sex" id="sex2" value="女">女
                   </div>
               </div>
               <div class="form-group">
                   <label for="aihao">爱  好</label>
                   <div>
                       <input type="checkbox" name="aihao" id="aihao1" value="唱歌">唱歌
                       <input type="checkbox" name="aihao" id="aihao2" value="跳舞">跳舞
                       <input type="checkbox" name="aihao" id="aihao3" value="上网">上网
                       <input type="checkbox" name="aihao" id="aihao4" value="看书">看书
                       <input type="checkbox" name="aihao" id="aihao5" value="游泳">游泳
                   </div>
               </div>
               <div class="form-group">
                   <label for="yusuan">预  算</label>
                   <div>
                       <select name="yusuan">
                           <option value="500元以内">500元以内</option>
                           <option value="500元-1000元">500元-1000元</option>
                           <option value="1000元-3000元">1000元-3000元</option>
                           <option value="3000元-5000元">3000元-5000元</option>
                           <option value="5000元-8000元">5000元-8000元</option>
                           <option value="10000元以上">10000元以上</option>
                       </select>
                   </div>
               </div>
               <!-- /自定义表单字段 -->
               <div class="form-group">
                   <label for="qq">QQ号码</label>
                   <div>
                       <input type="text" name="qq" required id="qq" class="form-control" placeholder="请输入QQ号码">
                   </div>
               </div>
               <div class="form-group">
                   <label for="dizhi">联系地址</label>
                   <div>
                       <input type="text" name="dizhi" required id="dizhi" class="form-control" placeholder="请输入联系地址">
                   </div>
               </div>


然后添加js部分代码,图中红色部分所标字段:


5.png

var qq=$(obj).find("#qq").val();
var dizhi=$(obj).find("#dizhi").val();
 
var sex = $('input[name="sex"]').filter(':checked').val();
var aihao = [];
 $("input:checkbox[name='aihao']:checked").each(function() {
       aihao.push($(this).val());
   });
var yusuan=$(obj).find("select[name='yusuan']").val();


data: {
    contacts: contacts,
    mobile: mobile,
       qq: qq,
       dizhi: dizhi,
    content: content,
    checkcode: checkcode,
       sex: sex,
       aihao:aihao,
       yusuan:yusuan
   },



这样就已经全部完成了,清除下后台缓存,然后去前台看下页面,并添加数据看一看。


3.png

新加的字段都能正常显示,我们子啊添加一条数据测一测。


6.png


后台的数据也都正常显示,至此,自定义字段已经全部添加完毕,自己可以根据项目需求灵活定制!有帮助到大家的话,多多转发一下,非常感谢!