Bootstrap for Contact Form 7 – WordPress plugin 外掛推薦下載

點擊下載

聯繫表格7的引導程序

外掛Plugin描述

聯繫表格7的引導程序修改了流行的聯繫表格的所有輸出7外掛Plugin與流行的CSS框架 Bootstrap 的當前版本3完全兼容。這對於您作為Bootstrap用戶意味著什麼:不需要額外的CSS規則 – 從現在開始,Contact Form 7可以與整個Bootstrap設計無縫集成。甚至可以通過Contact Form 7的“其他設置”選項卡使用不同的表單佈局。

此外掛Plugin是聯繫表格7的外掛Plugin。
該外掛Plugin需要激活聯繫表格7,否則不會改變任何內容。此外,您應該將它與基於Bootstrap的WordPress主題結合使用,否則表單可能看起來很奇怪(無論如何使用此外掛Plugin都沒有意義)。

用法

聯繫表格7的Bootstrap本身不提供其他選項,因此您可以像以前一樣繼續使用聯繫表格7(幾乎)。

該外掛Plugin不會破壞表單的外觀,但建議調整聯繫表單短代碼以獲得完美結果:通常,您不應再使用HTML標記來包裝字段短代碼。它們已經包含完整的Bootstrap-ready標記,包括顯示標籤。請閱讀設置指南以獲得快速介紹。

高級功能

該外掛Plugin帶來了一些額外的有用功能,可以進一步增強您的表單:

表單佈局可以更改為水平或內嵌,表單的輸入大小可以全局更改為checkbox和無線電組可以每行顯示一個,inline或者Bootstrap buttonstext輸入和textareas支持Bootstrap的輸入組功能,用於在文本輸入之前或之後添加內容,textareas可以顯示字符數(來自Contact Form 7的[count]短代碼)內聯驗證碼輸入字段可以使用內聯來顯示驗證碼圖像在聯繫表單的URL中獲取參數,可以預定義字段值

上述功能在其他註釋頁面上有詳細說明。

外掛Plugin背後的基本理念

很多WordPress主題基於Bootstrap – 雖然它是使用CSS規則來設計HTML內容樣式的一般方法,但也可以採用其他方式周圍 – 有很多好處。

當使用一個眾所周知的框架為網站的所有重要組件提供通用樣式時,將相同的樣式應用於(顯然)尚未編寫的第三方外掛Plugin可能非常耗時考慮到框架。這非常好,但如果您使用Bootstrap作為WordPress主題,您肯定會喜歡這樣一個事實,即您不再需要為Contact Form 7外掛Plugin編寫CSS規則。它從一開始就看起來像Bootstrap,因此它適合您的網站設計。如果你沒有使用Bootstrap,這個外掛Plugin對你來說沒用 – 但也許你只是想知道如何調整另一個流行的WordPress外掛Plugin以與另一個編寫良好的CSS框架集成。

高級功能

其他設置

您可以在此處找到其他設置,這些設置是Contactstform 7外掛Plugin的Bootstrap的一部分。如果您想了解有關原始Contact Form 7外掛Plugin的其他設置的更多信息,請訪問此頁

您可以調整多個表單屬性(影響整個表單的屬性,而不僅僅是單個字段它)給你的表格你想要的外觀。以下是屬性列表,它們的作用及其可能的值:

layout – 調整表單的佈局(請注意,在大多數情況下,內聯表單需要額外的樣式才能看起來很好);有效值:’default’,’inline’,’horizo​​ntal’;默認值:’default’ size – 調整所有輸入字段的大小;有效值:’default’,’small’,’large’;默認值:’default’ group_layout – 調整復選框和廣播組的佈局;有效值:’default’,’inline’,’buttons’;默認值:’default’ group_type – 使用按鈕佈局調整復選框和單選按鈕組的顏色;有效值:’默認’,’主要’,’成功’,’信息’,’警告’,’危險’;默認值:’default’ submit_size – 調整提交按鈕的大小;有效值:’default’,’small’,’large’或空字符串,以強制它在 size 表單屬性中定義大小;默認值為空字符串 submit_type – 調整提交按鈕的顏色;有效值:’默認’,’主要’,’成功’,’信息’,’警告’,’危險’;默認值:’primary’ required_html – 調整HTML輸出以附加到必填字段的標籤;有效值:任何HTML輸出;默認值:< span class =“required”> *< / span> grid_columns – 允許您覆蓋Bootstrap的總網格列數(如果您可能只需要調整此值)’使用自定義版本的Bootstrap);有效值:任何大於1的整數;默認值:12 label_width – 調整表單的標籤寬度(僅適用於水平佈局);有效值:1之間的任何整數和 grid_columns 減1的值;默認值:3 斷點 – 調整響應斷點(僅適用於水平佈局);有效值:’xs’,’sm’,’md’,’lg’;默認值:’sm’

有四種方法可以調整上述屬性:最簡單的方法是在聯繫表7中編輯表單時使用“其他設置”選項卡並在其中插入任何屬性及其所需的值,一個每行。例如:

 佈局:horizo​​ntalsize:largegroup_layout:inline  

或者您可以使用過濾器 cf7bs_form _ {{FORM_ID}} _ properties 其中 {{FORM_ID}} 必須替換為您要修改的表單的ID(您可以在整個表單的短代碼中找到該數字)。將所有屬性及其值的數組傳遞給該函數,以便您可以輕鬆調整它們。示例(在這種情況下,我們將使用ID 3調整聯繫表單):

  function my_custom_form_properties($ properties){$ properties ['layout'] ='horizo​​ntal'; $ properties ['size'] ='大'; $ properties ['group_layout'] ='內聯'; return $ properties;} add_filter('cf7bs_form_3_properties','my_custom_form_properties');  

第三種方式與其他兩種方式略有不同,因為它不會更改特定表單的屬性,而是更改所有表單的默認屬性。為此,您應該使用過濾器 cf7bs_default_form_properties ,它與上面提到的其他過濾器完全相同。

第四種方法與其他方法不同,因為它允許在每個字段的基礎上覆蓋表單設置。您可以將任何設置名稱及其預期值添加為任何字段的短代碼屬性,以使此字段的行為與表單的設置不同。如果您需要創建高級表單佈局(例如在同一行上需要多個字段時),這將特別有用。例如,您可以執行以下操作以在一行中顯示兩個字段,即使表單的佈局設置為“default”:

 < div class =“form -group row“> < div class =“col-md-6”>< label for =“user-first-name”>名字< / label> [text user_first_name id:user-first-name layout:none] [/文本] LT; / DIV> < div class =“col-md-6”>< label for =“user-last-name”>姓氏< / label> [text user_last_name id:user-last-name layout:none] [/文本] LT; / DIV>< / DIV>  

請注意,自定義表單過濾器優先於admin中定義的屬性,而默認過濾器僅用作後備。

輸入組

所有文本輸入字段均支持Bootstrap提供的輸入組功能。要使用它,請在任何text / email / url / tel輸入短代碼的內容中添加類似短代碼的構造(幾乎,但必須使用花括號)。示例:

  [text twitter-username] {input_before} @ {/ input_before}您的Twitter句柄[/ text]  

請注意 input_before input_after 也可以添加到textareas。在這種情況下,內容將分別直接顯示在textarea的上方或下方。

提交按鈕對齊

提交按鈕可以左對齊,居中對齊或右對齊,以適合您的表單所需的外觀。只需提供對齊選項’left’,’center’或’right’作為值。示例:

  [提交對齊:右“發送”]  

內聯字符計數

聯繫表單7提供 [計數] 短代碼,用於顯示一個數字,表示已輸入的字符數或特定輸入字段中剩餘的字符數。雖然使用它本身看起來很醜陋。但是猜猜看,你也可以通過在任何text / email / url / tel / textarea輸入中添加 include_count 選項來調整它。您也可以選擇為該選項指定一個值,該值可以包括計數器的定位(“之前”或“之後”)和計數方向(“向上”或“向下”)。提醒一下,當選擇’down’時,請確保給輸入元素一個最大長度,否則沒有任何關係。示例:

  [text your-text maxlength:80 include_count:after:down]您的文本[/ text]  

幹得好。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *