前言介紹
- 這款 WordPress 外掛「Smart Grid-Layout Design for Contact Form 7」是 2017-10-23 上架。
- 目前有 10000 個安裝啟用數。
- 上一次更新是 2024-06-13，距離現在已有 325 天。
- 外掛最低要求 WordPress 4.7 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 5.6 以上。
- 有 72 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
altworks | birmania | aurovrata | strangetech | netzgestaltung |
外掛標籤
Multi-Step Form | responsive forms | form custom styling | contact form 7 module | contact form 7 extension |
內容簡介
本外掛使用「smart-grid」CSS 插件建立美觀的表單佈局。它提供了一個圖形編輯器來設計你的表單，以及一個彩色的 HTML 語法編輯器，使用了優秀的 CodeMirror 編輯器。現在，你可以輕鬆地設計智能佈局。
v4.0 在儀錶板中引入了教程部分，以便快速參考各種 YouTube 教程。若要查看完整的可用教程列表，請參閱本播放清單。
此外，本外掛還引入了多個智能輸入功能，例如：
- 表格輸入部分：這些允許你將多個重複的輸入欄位分組為表格行，外掛將自動在你的前端表單中添加「新增行」按鈕，讓你的用戶可以添加多行分組欄位。
- 分頁部分：使用此外掛，你可以構建重複欄位的分頁部分，讓你的用戶可以添加額外的選項卡。這與上述表格輸入部分的概念類似，但佈局卻不同。
- 可折疊部分：對於長而複雜的表單，你現在可以將前端欄位分組為可折疊部分，使用戶更容易查看整體情況。
- 可選部分的切換折疊：插入了一個默認為「是/否」值的切換，允許用戶提交可選欄位，設定此部分中的欄位為必填項目（有關詳細信息，請參閱常見問題解答）。
- 可選的「兩者其一」部分：用於兩個互斥的可選部分。
- 可重複使用的子表單：如果你的多個表單都涉及到重複出現的欄位，你現在可以構建一個子表單，並將其包含在所需的表單中，避免了每次都要重新設計表單的麻煩，也使得大型表單更容易維護。
- 表單類別：本外掛引入表單分類來將你的表單分類，以便在線註冊中使用，用戶可能需要與特定設置的表單相關聯才能進行訪問。
- 動態下拉菜單：這些是特殊的選擇欄位，你可以使用現有的文章標題或管理列表（如單位），甚至使用自定義過濾器來填充其內容。這使得在儀錶板中動態連接現有 CMS 數據成為易如反掌，為數據捕獲提供了非常強大的工具。
- 與「Post My CF7 Form」外掛兼容：最棒的是，你可以使用現在穩定的「Post My CF7 Form」外掛將所有表單映射到自定義文章。
- 重新設計的表單編輯器：本外掛現在使用 WordPress 默認的文章編輯器頁面來編輯/構建表單，從而使開發人員更容易在其上插入自己的功能，同時保留 Contact Form 7 的所有鉤子。
尋找合作夥伴：
你是 WordPress 開發人員還是 HTML / JavaScript 大師？想要參與此插件的開發嗎？在此插件的路線圖中有一些非常棒的功能，但我沒有足夠時間或資源在适當的时间內將它們全部實現。因此，如果你想參與其中，可以在 GitHub 上加入我。
針對插件開發人員：
如果你希望利用編輯器助手代碼功能來開發你的 CF7 插件，你需要使用以下鉤子：
- cf7sg_ui_grid_js_helper_hooks：包含 JavaScript 綁定事件代碼助手。
- cf7sg_ui_grid_helper_hooks：包含 PHP 過濾器/動作鉤子代碼助手。
- cf7sg_enqueue_admin_editor_scripts：在管理編輯器頁面上排隊執行腳本，以繫結編輯器事件以進行進一步的動態代碼助手。
如果你想查看如何使用這些鉤子的示例
原文外掛簡介
The plugin uses the smart-grid CSS plugin to build beautiful form layouts. It introduces a graphical editor to design your forms, as well as a coloured html syntax editor built using the excellent CodeMirror editor. It is now possible to design smart layouts with ease.
v4.0 introduces a tutorial sections within the dashboard for quick reference to various YouTube tutorials. For a full list of available tutorials visit this playlist.
In addition, the plugin also introduces multiple smart input functionalities, such as,
tabled input sections: these allow you to group several repetitive input fields as table rows, the plugin will automatically add an ‘Add Row’ button to your front end form, giving your users the ability to add multiple rows of your grouped fields.
tabbed sections: with this plugin you can build tabbed sections of repetitive fields, allowing your users to add additional tabs. It is a similar concept to the tabled input section above, but in a tabbed layout instead.
collapsible sections: for long and complex forms you can now group your front-end fields into collapsible sections, making it easier for user to see the big picture.
toggled collapsible sections for optional sections. A toggle with a default Yes/No value is inserted, allowing your users to submit optional fields which within the section can be set to required in your design (See FAQ section for more info).
grouped toggled sections for either/or optional sections.
reusable sub-forms: if you have fields which repeat across multiple forms, you can now build a sub-form which you can include in your form, saving you the trouble of redesigning the form each time, but also making large forms much easier to maintain.
form categories: the plugin introduces form taxonomy to classify your forms for the use of online registration where users may need to be associated with a given set of forms to access.
dynamic dropdown fields: these are special select fields which you can populate with either existing post titles, or managed lists such as units, or even using a custom filter. This makes dynamic interlinking of existing CMS data in your dashboard a piece of cake, giving you a very powerful tool for data capture.
plays nice with Post My CF7 Form plugin: and best of all you can map all your forms to custom posts using the now stable Post My CF7 Form plugin.
redesign the form editor: this plugin now uses the WordPress default post editor page to edit/build forms, therefore making it easier for developer to plugin their functionality on top, while preserving all the hooks of Contact Form 7.
Looking for Collaborators
Are you a WordPress developer or an HTML/JavaScript wizard? Want to collaborate on this plugin? There are some really great pieces of functionality that are in the roadmap for this plugin, but I just don’t have the time or resources to get them all on file in a timely manner. So join me on GitHub if you want to collaborate.
For plugin developers
If you wish to leverage the in-editor helper code functionality for your CF7 plugin, you need to use the following hooks,
cf7sg_ui_grid_js_helper_hooks – include js bind event code helpers.
cf7sg_ui_grid_helper_hooks – include php filter/action hooks code helpers.
cf7sg_enqueue_admin_editor_scripts – to enqueue scripts on the admin editor page to bind to editor events for further dynamic code helpers.
If you wish to see an example on how to use this, please check the Google Map CF7 extension plugin code. The cf7-google-map/includes/class-cf7-googleMap.php list the above hooks and the function calls are in the cf7-google-map/admin/class-cf7-googleMap-admin.php file.
Checkout our other CF7 plugin extensions
CF7 Polylang Module – this plugin allows you to create forms in different languages for a multi-language website. The plugin requires the Polylang plugin to be installed in order to manage translations.
CF7 Multi-slide Module – this plugin allows you to build a multi-step form using a slider. Each slide has cf7 form which are linked together and submitted as a single form.
Post My CF7 Form – this plugin allows you to save you cf7 form to a custom post, map your fields to meta fields or taxonomy. It also allows you to pre-fill fields before your form is displayed.
CF7 Google Map – allows Google Maps to be inserted into a Contact Form 7. Unlike other plugins, this one allows map settings to be done at the form level, enabling diverse maps to be configured for each form.
Smart Grid-Layout Design for CF7 – allows responsive grid layout Contact Form 7 form designs, enabling modular designs of complex forms, and rich inter-linking of your CMS data with taxonomy/posts populated dynamic dropdown fields.
Documentation
This plugin has a substantial set of FAQs and screenshots that is has a lot of information. Please go through the FAQs and screenshot captions to understand how to use the basic functionality.
The plugin has a number of hooks (filters and actions) which can be leveraged to further customise your form layouts and fields. Please refer to the Helper Metabox available in the form post editor when you create/edit a form. The helpers have commented code snippets which you can copy to and paste in your functions.php file to further understand how to use them. (See screenshot #21).
Support Open-source effort
This plugin would not have been possible without the following open-source efforts. Please consider visiting these plugins pages and making a donation to its authors to say thank you. Even small amount of beer money is always appreciated. Alternatively/additionally you can help in the maintenance or translation effort.
Beautify – a jQuery plugin to beautify html text, used in the text editor of this plugin.
CodeMirror – a remarkable jQuery text editor that allows for colour-coded highlighting among many other functionality. Used to edit form source code in text editor of this plugin.
CSS Smart Grid – a CSS plugin that allows for intuitive CSS styling of responsive grid layouts. Used for building the responsive form layouts.
jQuery Clipboard – copy text to the clipboard, used for helper links.
jQuery Nice Select – makes beautiful dropdown fields.
jQuery Select2 – this plugin converts dropdowns into powerful searchable dropdown fields.
jQuery Toggles – enables pretty toggle switches on collapsible sections.
PHP Simple HTML Dom – a php library that enables traversing and manipulation of html documents using CSS selectors like jQuery. This is used to build the modular functionality of form designs.
Glider.js slider – a A blazingly fast, crazy small, fully responsive, mobile-friendly, dependency free, native scrolling list with paging controls!
Thanks to
Birmania @birmania for providing:
a fix for JS toggles.
a fix for file fields in tabs as mail attachments
Andrew Browning @altworks for providing:
an IE polyfill for frontend table fields.
PenhTech @penhtech
a fix for continue warnings in php7.3
Thomas Fellinger @netzgestaltung
a fix for Really Simple Captcha plugin.
Privacy Notices
This plugin, in itself, does not:
track users by stealth;
write any user personal data to the database;
send any data to external servers;
use cookies.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Smart Grid-Layout Design for Contact Form 7」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0 | 1.8 | 1.9 | 4.3 | 4.4 | 4.5 | 4.6 | 4.7 | 4.8 | 4.9 | 4.10 | 4.11 | 4.12 | 4.13 | 4.14 | 4.15 | 1.0.1 | 1.0.2 | 1.0.3 | 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.4.0 | 1.4.3 | 1.4.4 | 1.4.5 | 1.4.6 | 1.5.0 | 1.5.1 | 1.5.2 | 1.5.3 | 1.6.0 | 1.7.0 | 1.7.1 | 2.0.0 | 2.0.1 | 2.1.0 | 2.1.1 | 2.1.2 | 2.1.3 | 2.1.4 | 2.1.5 | 2.1.6 | 2.2.0 | 2.3.0 | 2.4.0 | 2.4.1 | 2.5.0 | 2.5.1 | 2.5.2 | 2.5.3 | 2.5.4 | 2.5.5 | 2.5.6 | 2.5.7 | 2.5.8 | 2.6.0 | 2.7.0 | 2.7.1 | 2.8.0 | 2.8.1 | 2.8.2 | 2.8.3 | 2.9.0 | 3.0.0 | 3.0.1 | 3.0.2 | 3.0.3 | 3.0.4 | 3.1.0 | 3.1.2 | 3.1.3 | 3.1.4 | 3.1.5 | 3.2.0 | 3.2.1 | 3.3.0 | 3.3.1 | 3.3.2 | 3.3.3 | 3.3.4 | 3.3.5 | 3.3.6 | 3.3.7 | 3.3.8 | 4.0.0 | 4.0.1 | 4.1.0 | 4.1.1 | 4.1.2 | 4.1.3 | 4.1.4 | 4.2.0 | 4.2.1 | trunk | 1.4.1. | 2.10.0 | 2.10.1 | 2.10.2 | 2.10.3 | 2.10.4 | 2.10.5 | 2.11.0 | 4.15.1 | 4.15.2 | 4.15.3 | 4.15.4 | 4.15.5 | 4.15.6 | 4.15.7 | 4.15.8 |
延伸相關外掛（你可能也想知道）
暫無相關外掛推薦。