pbootcms中關于自定義表單的自定義字段使用

我們平時在使用pbootcms程序建站時，經常會用到自定義表單的自定義字段功能，最新版的程序已可以支持全站全模板自定義調取使用了，非常的強大和方便，下面就說說具體的使用方法！

無論是自己新建模板還是直接使用默認的留言板模板都可以實現，直接在后臺加入自己的字段，前臺添加自定義標簽即可。

例如：我們直接在后臺留言字段新加了QQ（文本類型），聯系地址（文本類型），性別（單選類型），愛好（多選類型），預算（下拉菜單類型）等字段。

加好之后，直接在前臺模板頁面開始添加自定義標簽字段，頁面的樣式標簽很靈活，根據自己的項目需要添加即可。

<!-- 自定義表單字段 -->
                <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部分代碼，圖中紅色部分所標字段：

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
    },

這樣就已經全部完成了，清除下后臺緩存，然后去前臺看下頁面，并添加數據看一看。

新加的字段都能正常顯示，我們再添加一條數據測一測。

后臺的數據也都正常顯示，至此，自定義字段已經全部添加完畢，自己可以根據項目需求靈活定制！有幫助到大家的話，多多轉發一下，非常感謝！

沖浪者科技專注品牌網站建設，高端網站定制， 網站制作， 定制網站開發，網站改版升級，外貿網站建設，政府網站建設， 網站ipv6升級改造，網站SEO優化推廣，小程序制作開發，400電話，企業郵箱，SSL證書安裝等為一體的互聯網整合營銷一站式服務商。 咨詢服務熱線：173-7784-9589（微信同號）