资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

pbootcms中关于自定义表单的自定义字段使用

作者:冲浪者科技 | 2023-11-02 | 热度:339 | 栏目:常见问题 | 收录:

我们平时在使用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


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


冲浪者科技专注品牌网站建设高端网站定制 网站制作 定制网站开发,网站改版升级,外贸网站建设,政府网站建设, 网站ipv6升级改造网站SEO优化推广小程序制作开发,400电话,企业邮箱,SSL证书安装等为一体的互联网整合营销一站式服务商。 咨询服务热线:173-7784-9589(微信同号)

—— 微信公众号 ——

互联网整合营销一站式服务商

多一份参考,总有益处

联系我们,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

全国统一服务热线:17377849589