前言介紹
- 這款 WordPress 外掛「Bootstrap for Contact Form 7」是 2014-11-03 上架。
- 目前有 10000 個安裝啟用數。
- 上一次更新是 2018-05-24，距離現在已有 2537 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 3.6 以上版本才可以安裝。
- 有 26 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
flixos90 | gidomanders |
外掛標籤
wpcf7 | bootstrap | bootstrap 3 | contact form 7 | bootstrap framework |
內容簡介
Bootstrap for Contact Form 7 修改了熱門的 Contact Form 7 外掛 的所有輸出，以與當前版本 3 的流行 CSS 框架 Bootstrap 完全兼容。對於 Bootstrap 使用者來說，這意味著什麼: 不需要額外的 CSS 規則-從現在開始，Contact Form 7 可以完美地與整個 Bootstrap 設計融合在一起。甚至可以通過 Contact Form 7 的“附加設置”選項使用不同的表單佈局。
此插件是 Contact Form 7 的插件。插件需要 Contact Form 7 被啟用，否則它將不會改變任何內容。此外，您應該與基於 Bootstrap 的 WordPress 主題一起使用，否則表單可能看起來很奇怪（使用此插件也沒有意義）。
用法
Bootstrap for Contact Form 7 本身不提供額外的選項，因此您幾乎可以像以前那樣繼續使用 Contact Form 7。
插件不會破壞您表單的外觀，但建議您調整聯繫表單短碼以獲得完美的結果:一般來說，您不應再使用 HTML 標記來包裝字段短碼。它們已經包括完整的 Bootstrap-ready 標記，包括顯示標籤。閱讀設置指南，進行快速簡介。
高級功能
插件提供了一些附加有用的功能，以進一步增強您的表單:
表單佈局可以更改為橫向或內嵌式
全局更改表單的輸入大小
複選框和單選框組可以顯示為每行一個、內嵌式或作為 Bootstrap 按鈕
文本輸入和文本區支持 Bootstrap 的輸入組功能，在它們之前或之後添加內容
文本輸入和文本區可以內嵌顯示字符計數（來自 Contact Form 7 的 [count] 短碼）
驗證碼輸入字段可以內嵌顯示驗證圖片
通過在聯繫表單的 URL 中使用 GET 參數，可以預定義字段值
上述功能在其他說明頁面上有詳細說明。
插件的基本想法
許多 WordPress 主題都基於 Bootstrap-儘管通常的方法是使用 CSS 規則為 HTML 內容設置樣式，但也可能從相反的角度進行-這樣很多好處。
當使用一個提供網站所有重要組件通用樣式的知名框架時，將同樣的樣式應用於第三方插件可能需要花費大量時間（顯然這些插件尚未針對框架編寫），這是很正常的。但如果您正在為 WordPress 主題使用 Bootstrap，您一定會喜歡這個事實，即您不需要再為 Contact Form 7 插件編寫 CSS 規則。從一開始它就看起來像 Bootstrap，以符合您的網站設計。如果你不使用 Bootstrap，這個插件對你來說是無用的-但也許你剛好有一個想法，如何調整另一個流行的 WordPress 插件以與另一個精編寫的 CSS 框架集成。
高級功能
附加設置
在這裡，您可以找到作為 Bootstrap for Contact Form 7 插件一部分的附加設置。如果您想了解原始 Contact Form 7 插件的其他設置，請訪問
原文外掛簡介
Bootstrap for Contact Form 7 modifies all the output of the popular Contact Form 7 plugin to be fully compatible with the current version 3 of the popular CSS framework Bootstrap. What this means to you as a Bootstrap user: No additional CSS rules necessary – from now on, Contact Form 7 integrates seamlessly with the overall Bootstrap design. It is even possible to use different form layouts via Contact Form 7’s “Additional Settings” tab.
This plugin is an addon to Contact Form 7.
The plugin requires Contact Form 7 to be activated, otherwise it won’t change anything. Furthermore you should be using it in conjunction with a Bootstrap-based WordPress theme, otherwise the forms might look weird (and there would be no point in using this addon anyway).
Usage
Bootstrap for Contact Form 7 does not provide additional options itself, so you can continue using Contact Form 7 (almost) the same way you did before.
The plugin will not break your form’s appearance, however it is recommended to adjust the contact form shortcodes to achieve perfect results: Generally, you should not be using HTML tags any longer to wrap the field shortcodes. They already include the complete Bootstrap-ready markup, including displaying labels. Read the Setup Guide for a quick introduction.
Advanced Features
The plugin brings some additional useful features to enhance your forms even more:
the form layout can be changed to a horizontal or inline one
the form’s input size can be globally changed
checkbox and radio groups can be displayed either one per line, inline or as Bootstrap buttons
text inputs and textareas support Bootstrap’s input group feature to add content before or after them
text inputs and textareas can show a character count (the [count] shortcode from Contact Form 7) inline
the captcha input field can show the captcha image inline
by using GET parameters in a URL to a contact form, field values can be predefined
The above features are explained in detail on the Other Notes page.
Basic Idea behind the Plugin
Lots of WordPress Themes are based on Bootstrap – and while it is the general approach to use CSS rules to style your HTML content, it is also possible the other way around – with many benefits.
When using a well-known framework which provides general styles for all the important components of a website, it can be time-consuming to apply the same styles to third-party plugins which (obviously) have not been written with a framework in mind. This is perfectly fine, but if you’re using Bootstrap for your WordPress theme, you will certainly love the fact that you do not need to write CSS rules for the Contact Form 7 plugin any longer. It will all look like Bootstrap from the beginning so that it fits into your website design. If you’re not using Bootstrap, this plugin is useless for you – but maybe you’re just having an idea how you can adjust another popular WordPress plugin to integrate with another well-written CSS framework.
Advanced Features
Additional Settings
Here you find additional settings which are part of the Bootstrap for Contact Form 7 plugin. If you want to learn more about the additional settings of the original Contact Form 7 plugin, please visit this page.
You can adjust several form properties (properties that affect an entire form, not just a single field of it) to give your forms the appearance you want. Here is a list of the properties, what they do and their possible values:
layout – adjusts the form’s layout (note that in most cases the inline form will need additional styling to look good); valid values: ‘default’, ‘inline’, ‘horizontal’; default value: ‘default’
size – adjusts the size of all input fields; valid values: ‘default’, ‘small’, ‘large’; default value: ‘default’
group_layout – adjusts the layout of checkbox and radio groups; valid values: ‘default’, ‘inline’, ‘buttons’; default value: ‘default’
group_type – adjusts the color of checkbox and radio groups with buttons layout; valid values: ‘default’, ‘primary’, ‘success’, ‘info’, ‘warning’, ‘danger’; default value: ‘default’
submit_size – adjusts the size of the submit button; valid values: ‘default’, ‘small’, ‘large’ or an empty string to force it to have the size defined in the size form property; default value is an empty string
submit_type – adjusts the color of the submit button; valid values: ‘default’, ‘primary’, ‘success’, ‘info’, ‘warning’, ‘danger’; default value: ‘primary’
required_html – adjusts the HTML output to append to required fields’ labels; valid values: any HTML output; default value: *
grid_columns – allows you to override the total grid column count of Bootstrap (you might only need to adjust this if you’re using a custom version of Bootstrap); valid values: any integer greater than 1; default value: 12
label_width – adjusts the form’s label width (applies only to horizontal layout); valid values: any integer between 1 and the value of grid_columns minus 1; default value: 3
breakpoint – adjusts the responsive breakpoint (applies only to horizontal layout); valid values: ‘xs’, ‘sm’, ‘md’, ‘lg’; default value: ‘sm’
There are four methods to adjust the above properties: The easiest one is to use the “Additional Settings” tab when editing a form in Contact Form 7 and insert any property and its desired value there, one per line. For example:
layout:horizontal
size:large
group_layout:inline
Alternatively you can use the filter cf7bs_form_{{FORM_ID}}_properties where {{FORM_ID}} must be replaced by the ID of the form you would like to modify (you find that number in the overall form’s shortcode). An array of all the properties and their values is passed to that function so that you can easily adjust them. Example (in this case we would adjust the contact form with the ID 3):
function my_custom_form_properties( $properties ) {
$properties['layout'] = 'horizontal';
$properties['size'] = 'large';
$properties['group_layout'] = 'inline';
return $properties;
}
add_filter( 'cf7bs_form_3_properties', 'my_custom_form_properties' );
The third way does something slightly different from the other two since it does not change a specific form’s properties, but the default properties for all forms. To do that, you should use the filter cf7bs_default_form_properties which works exactly like the other filter mentioned above.
The fourth method is different from the others as it allows to override the form settings on a per-field basis. You can add any of the setting names plus its intended value as a shortcode attribute for any field to make this field behave differently from the form’s setting. This can be especially helpful if you need to create advanced form layouts like when you need multiple fields on the same line. For example, you could do the following to display two fields in one row, even though the form’s layout is set to ‘default’:
Note that the custom form filter takes precedence over the properties defined in the admin, while the default filter is just used as fallback.
Input Groups
All textual input fields support the input group feature that Bootstrap provides. To use it, add a shortcode-like construct (almost, but it has to use curly braces instead) into the content of any text / email / url / tel input shortcode. Example:
[text twitter-username]{input_before}@{/input_before}Your Twitter Handle[/text]
Note that the input_before and input_after can also be added to textareas. In this case, the content will be displayed directly above or below the textarea respectively.
Submit Button Alignment
The submit button can be aligned left, center or right to fit your form’s desired appearance. Simply provide an align option with either ‘left’, ‘center’ or ‘right’ as value. Example:
[submit align:right "Send"]
Inline Character Count
Contact Form 7 provides a [count] shortcode that renders a number indicating how many characters have been entered or how many characters are remaining in a specific input field. Using it on its own looks kind of ugly though. But guess what, you can adjust that too by adding an option include_count to any text / email / url / tel / textarea input. You can optionally specify a value for that option as well which can consist of the positioning (‘before’ or ‘after’) and the count direction (‘up’ or ‘down’) of the counter. Just as a reminder, when choosing ‘down’, make sure you give the input element a maximum length, otherwise there is no point in having that counter. Example:
[text your-text maxlength:80 include_count:after:down]Your Text[/text]
By the way, have you read the information about input groups above? You can combine those with the character count (because just seeing a number without any additional information might confuse your site’s visitors). The following example will show a message like ‘433 characters left’ after the field:
[textarea your-text maxlength:500 include_count:after:down input_after:characters---left]Your Text[/textarea]
Inline Captcha Image
If you’ve been using Contact Form 7 together with the Really Simple CAPTCHA plugin, you are probably aware of the [captchar] (captcha input field) and [captchac] (captcha image) shortcodes it provides. You can still use them independently, but it probably looks nicer to have the captcha image show up inline, right beside its input field. To accomplish this, remove the [captchac] shortcode completely and instead add a new option include_captchac to the [captchar] shortcode. You can optionally give this option a value (either ‘before’ or ‘after’) to mark the location where the image should show up. Example:
[captchar your-captcha include_captchac:before]Captcha[/captchar]
Custom Form URLs
You can add GET parameters to populate your forms with custom initial values by simply using the field name as parameter’s key and the desired value as the parameter’s value. This works with checkboxes, date fields, number fields, select fields, all text fields and textareas. The easiest way to create such a URL is to use the plugin’s function cf7bs_add_get_parameter() where you provide parameters similarly to the WordPress Core function add_query_arg. Example:
$my_custom_url = cf7bs_add_get_parameter( array(
'your-name' => 'John Doe',
'your-email' => '[email protected]',
'your-subject' => 'Support Request',
), 'http://www.example.com/my-custom-form/' );
Filter Field Arguments
As of version 1.2.3, field arguments for every single field can be filtered, which allows you to basically modify anything you like. The filters you need to hook your function into have the following structure cf7bs_form_{{FORM_ID}}_field_{{FIELD_BASETYPE}}_{{FIELD_NAME}}_properties. Yep, it’s a long filter name, but it is necessary so that you can filter in the most detailed way possible. When using one of the filters, replace {{FORM_ID}} with the ID of the form, {{FIELD_BASETYPE}} with the type of the field you need to adjust (be sure to not include the asterisks here!) and {{FIELD_NAME}} with the name of the field. The function should accept one argument, an array of parameters. For an overview about the available parameters, please check the plugin’s source code.
Unsupported functionality
While the plugin tries to support as many features as possible from the original Contact Form 7 (in combination with adding new ones!), not everything is and can be supported.
There are two things in particular which are explicitly not supported:
the size option on all input fields (Bootstrap form elements scale automatically, so we do not need a custom size for those)
the label_first option on checkbox and radio fields (Bootstrap natively only supports checkboxes and radio buttons where the label is displayed after them)
If you discover any other Contact Form 7 feature than the above two which is not supported by Bootstrap for Contact Form 7, you can raise an issue or submit a support request.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Bootstrap for Contact Form 7」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0.0 | 1.1.0 | 1.1.1 | 1.2.0 | 1.2.1 | 1.2.2 | 1.2.3 | 1.2.4 | 1.3.0 | 1.3.1 | 1.4.0 | 1.4.1 | 1.4.2 | 1.4.3 | 1.4.4 | 1.4.5 | 1.4.6 | 1.4.7 | 1.4.8 | trunk |
延伸相關外掛（你可能也想知道）
Bootstrap Blocks 》Bootstrap Gutenberg Blocks 是一款 WordPress 外掛，此外掛會將 Bootstrap 元件及佈局選項作為 Gutenberg 區塊加入。, 功能, , 支援 Bootstrap v5 和 v4, 支...。
Easy Bootstrap Shortcode 》, 如需外掛程式支援請前往http://support.oscitasthemes.com, 支援 WordPress 4.3 及 Twitter 3.2.0, , Easy Bootstrap Shortcode 是相容於 bootstrap 3.3.0 ...。
Bootstrap Shortcodes 》這個 WordPress 外掛可添加 Twitter Bootstrap 3.3 的快速代碼。, 最新的 Bootstrap, Bootstrap Shortcodes 外掛可透過 TinyMCE 豐富編輯器快速且容易地實現 ...。
Contact Form Clean and Simple 》一個簡潔明瞭的 AJAX 聯絡表單，搭配 Google reCAPTCHA、Twitter Bootstrap 標記和 Akismet 垃圾郵件篩選功能。, , , 簡潔：所有使用者輸入均被剝離，以避免...。
Genesis Widget Column Classes 》使用起來非常簡單。您可以透過下拉式選單為小工具新增欄位類別，並檢查小工具是否為第一個，最後儲存即可！, 我針對 Genesis Framework 建立了這個外掛程式，...。
CPT Bootstrap Carousel 》這款外掛提供自定義文章類型選擇圖像和內容，並使用短代碼 [image-carousel] 從 Twitter Bootstrap 輸出 輪播。, 插件假設您已經在使用 Bootstrap，因此需要...。
Easy Responsive Tabs 》, 您可以在Visual Composer osCitas Fancy Tabs中獲取專業版, 如果需要插件支援請到http://support.oscitasthemes.com, 支援 WordPress 4.0, , Easy Responsi...。
B Slider- Gutenberg Slider Block for WP 》B Slider 是一個受 Gutenburg 區塊影像和文字幻燈片的 WordPress 外掛。使用此外掛，您可以非常輕鬆地快速建立您的幻燈片。B Slider 是最好的選擇，無論是對...。
All Bootstrap Blocks 》建立完全響應式的 Bootstrap 5 頁面佈局。37 個免費區塊，包括容器、行、列、工具提示、手風琴、卡片、按鈕等等。, 全面免費的 Bootstrap 區塊, 介紹 All Boo...。
Theme Blvd Shortcodes 》在使用 Theme Blvd 框架的佈景主題中，有許多內部元素及其他第三方物件整合，例如 Twitter Bootstrap 和 FontAwesome，可供使用。使用 Theme Blvd 主題 時，...。
Tabs Widget for Page Builder 》Page Builder by SiteOrigin 編輯器很好用，但缺少一個「標籤(widget)」，所以我們創建了一個。, 「Tabs for Page Builder」widget 可以讓你添加多個標籤，每...。
Cool Responsive Megamenu 》Cool Megamenu 是一個易於使用且高度自訂的響應式 WordPress 外掛。它可以直接與 WordPress 3 菜單系統配合使用，讓您在開始時非常簡單，但同時又可以建立高...。
Bootstrap Modals 》此外掛將 Bootstrap v3 Modal 功能加入 WordPress。, 它僅添加呈現網站的 Bootstrap Javascript Modal Plugin 和相關的 CSS。, 此外掛沒有加載任何其他 Boots...。
BlockStrap Page Builder – Bootstrap Blocks 》BlockStrap Page Builder Blocks提供了一系列的Bootstrap區塊，讓您可以製作整個網站，包括頁首、頁尾，甚至菜單。, 用於構建此外掛的資源, , , 圖像塊區塊的...。
Advanced Bootstrap Blocks 》這個外掛可以為 WordPress 的編輯器新增靈活的 Bootstrap 4 區塊，讓您可以使用 Bootstrap 樣式網格來建立自訂頁面版型。, 您正在使用 Advanced Bootstrap Bl...。