| @@ -1,11 +1,11 @@ | ||
| 1 | 1 | === Smart Grid-Layout Design for Contact Form 7 === |
| 2 | 2 | Contributors: aurovrata |
| 3 | 3 | Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EDV4MEJLPT4VY |
| 4 | -Tags: contact form 7, contact form 7 module, styling, contact form 7 extension, responsive forms, form maker, form builder | |
| 4 | +Tags: contact form 7 module, form custom styling, contact form 7 extension, responsive forms, multi-step form, form builder, multi-slide slider form, repetitie fields, form custom javascript | |
| 5 | 5 | Requires at least: 4.7 |
| 6 | 6 | Requires PHP: 5.6 |
| 7 | -Tested up to: 5.4 | |
| 7 | +Tested up to: 5.5.3 | |
| 8 | 8 | Stable tag: trunk |
| 9 | 9 | License: GPLv2 or later |
| 10 | 10 | License URI: http://www.gnu.org/licenses/gpl-2.0.html |
| 11 | 11 | |
| @@ -11,18 +11,22 @@ | ||
| 11 | 11 | |
| 12 | 12 | This plugins allow pure CSS responsive grid layouts for contact form 7. It enables rich interlinking of your CMS data via taxonomy/posts populated dropdown fields. It also enables modular design of complex forms. |
| 13 | 13 | |
| 14 | 14 | == Description == |
| 15 | -**NOTE WordPress 5.0 & Gutenberg editor update** - this plugin is now compatible with WP 5.0, however, the Gutenberg editor does not recognise [shortcodes with hyphens](https://www.getgutenberg.io/documentation/content/shortcodes/) (dash) characters, so a new shortcode is introduced from v2.5, `[cf7form ...]`. Your form table will now display this new shortcode. Creating new pages/posts with Gutenberg from now on will require you use this new shortcode. The old remains active for existing content. | |
| 16 | 15 | |
| 17 | 16 | The plugin uses the [smart-grid](http://origin.css.gd/) 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. |
| 18 | 17 | |
| 18 | +v4.0 introduces a tutorial sections within the dashboard for quick rerefence to various youtube tutorials. For a full list of available tutorials visit this playlist. | |
| 19 | + | |
| 20 | +[youtube https://www.youtube.com/playlist?list=PLblJwjs_dFBsynXEstrV3fCIC7GBmK9HW] | |
| 21 | + | |
| 19 | 22 | In addition, the plugin also introduces multiple smart input functionalities, such as, |
| 20 | 23 | |
| 21 | -* **tabled input sections**: these allow you to group several 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. | |
| 22 | -* **tabbed sections**: with this plugin you can build tabbed sections of 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. | |
| 24 | +* **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. | |
| 25 | +* **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. | |
| 23 | 26 | * **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. |
| 24 | 27 | * **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). |
| 28 | +* **grouped toggled sections** for either/or optional sections. | |
| 25 | 29 | * **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. |
| 26 | 30 | * **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. |
| 27 | 31 | * **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. |
| 28 | 32 | * **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](https://wordpress.org/plugins/post-my-contact-form-7/) plugin. |
| @@ -28,9 +32,9 @@ | ||
| 28 | 32 | * **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](https://wordpress.org/plugins/post-my-contact-form-7/) plugin. |
| 29 | 33 | * **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. |
| 30 | 34 | |
| 31 | 35 | **Looking for Collaborators** |
| 32 | -Are you a WordPress developer or an HTML/JavaScript master? 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](https://github.com/aurovrata/cf7-grid-layout/wiki/Roadmap) if you want to collaborate. | |
| 36 | +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](https://github.com/aurovrata/cf7-grid-layout/wiki/Roadmap) if you want to collaborate. | |
| 33 | 37 | |
| 34 | 38 | **For plugin developers** |
| 35 | 39 | If you wish to leverage the in-editor helper code functionality for your CF7 plugin, you need to use the following hooks, |
| 36 | 40 | `cf7sg_ui_grid_js_helper_hooks` - include js bind event code helpers. |
| @@ -52,16 +56,12 @@ | ||
| 52 | 56 | * [Smart Grid-Layout Design for CF7](https://wordpress.org/plugins/cf7-grid-layout/) - 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. |
| 53 | 57 | |
| 54 | 58 | = Documentation = |
| 55 | 59 | |
| 56 | -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. | |
| 60 | +This plugin has a substantial set of [FAQs](https://wordpress.org/plugins/cf7-grid-layout/#faq) and [screenshots](https://wordpress.org/plugins/cf7-grid-layout/#screenshots) that is has a lot of information. Please go through the FAQs and screenshot captions to understand how to use the basic functionality. | |
| 57 | 61 | |
| 58 | -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. | |
| 62 | +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](https://wordpress.org/plugins/cf7-grid-layout/#screenshots) #21). | |
| 59 | 63 | |
| 60 | -Get in touch in the support forum if you some clarification. | |
| 61 | - | |
| 62 | -A video will be made available in the near future to further demonstrate how to use this plugin, so what this space! | |
| 63 | - | |
| 64 | 64 | = Support Open-source effort = |
| 65 | 65 | |
| 66 | 66 | 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. |
| 67 | 67 | |
| @@ -72,8 +72,9 @@ | ||
| 72 | 72 | * [jQuery Nice Select](http://hernansartorio.com/jquery-nice-select/) - makes beautiful dropdown fields. |
| 73 | 73 | * [jQuery Select2](https://select2.org/) - this plugin converts dropdowns into powerful searchable dropdown fields. |
| 74 | 74 | * [jQuery Toggles](https://simontabor.com/labs/toggles/) - enables pretty toggle switches on collapsible sections. |
| 75 | 75 | * [PHP Simple HTML Dom](https://github.com/voku/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. |
| 76 | +* [Glider.js slider](https://nickpiscitelli.github.io/Glider.js/) - a A blazingly fast, crazy small, fully responsive, mobile-friendly, dependency free, native scrolling list with paging controls! | |
| 76 | 77 | |
| 77 | 78 | = Thanks to = |
| 78 | 79 | Birmania [@birmania](https://profiles.wordpress.org/birmania/) for providing: |
| 79 | 80 | |
| @@ -296,8 +297,14 @@ | ||
| 296 | 297 | Create a new form to be able to leverage the grid editor functionality. |
| 297 | 298 | |
| 298 | 299 | this plugin allows you to create grid layout forms by creating a HTML markup and a CSS stylesheet which displays your form fields in a responsive grid. |
| 299 | 300 | |
| 301 | +The UI editor works by recognising the HTML structure that it creates. If you change that structure it tries to rebuild the UI and place your custom code in a text editor instead of a column cell...however, if you change the outer structure (the `div.container`) then it assumes the entire form is no longer using the UI markup and therefore disable the UI editor altogether. | |
| 302 | + | |
| 303 | += 19. Form previews throws 404 page not found error = | |
| 304 | + | |
| 305 | +You need to refresh your permalinks, please go to Settings->Permalinks in your dashboard, scroll down and hit the 'Save' button. | |
| 306 | + | |
| 300 | 307 | == Screenshots == |
| 301 | 308 | |
| 302 | 309 | 1. (1) This plugin replaces the CF7 post table page and post edit pages with WordPress core post edit and post pages. This means that other plugins that build on WordPress standards for custom admin dashboard functionality should now play nicely with CF7. One out-of-the-box improvement is the ability to customise the CF7 form table columns being displayed. |
| 303 | 310 | 2. (2) Form type taxonomy is introduced to manage forms. This is useful when designing forms that change according to the type of users and therefore leverages WP core taxonomy CMS functionality. |
| @@ -323,51 +330,83 @@ | ||
| 323 | 330 | 20. (20) v2.0 of the plugin introduces inline field hooks helpers. These are specific hooks which allow you to filter custom aspect of the field. Not all tags have field specific hooks, so if any are defined they will show up with the icon in the control bar. |
| 324 | 331 | 21. (21) The plugin include hooks for further customisation. Handy helper code snippets are provided within form editor in the metabox 'Actions & Filers', with a set of links on which you can click to copy the code snippet and paste it in your *functions.php* file. |
| 325 | 332 | 22. (22) You can set a maximum number of rows a user can add to a table, by adding the `data-max` attribute to your table element. |
| 326 | 333 | 23. (23) You can filter mail tags, hover your mouse over the blue information icon next to each tag and click the link, this will copy the filter code to your clipboard which you can paste into your functions.php file. |
| 327 | - | |
| 328 | 334 | == Changelog == |
| 329 | -= 3.3.1 = | |
| 330 | -* fixed multiple dynamic select tag. | |
| 331 | -= 3.3.0 = | |
| 332 | -* added 'cf7sg_ui_grid_helper_hooks' action for plugin integration. | |
| 333 | -* added 'cf7sg_ui_grid_js_helper_hooks' action for plugin integration. | |
| 334 | -* enabled in-editor js code helpers. | |
| 335 | -* updated screenshot 17. | |
| 336 | -= 3.2.1 = | |
| 337 | -* fix hidden fields. | |
| 338 | -* fix wpcf7_submit capability for subscribers_only attribute. | |
| 339 | -* upgrade select2 library for iOS touch fix. | |
| 340 | -= 3.2.0 = | |
| 341 | -* added cf7sg_mailtag_$mail_tag filters. | |
| 342 | -* replaced PhpQuery library with SimpleHTMLDom.php (https://github.com/voku/simple_html_dom) library for php 7 compatibility. | |
| 343 | -= 3.1.5 = | |
| 344 | -* fix continue for PHP 7.3+ | |
| 345 | -= 3.1.4 = | |
| 346 | -* fix continue. | |
| 347 | -= 3.1.3 = | |
| 348 | -* fix common validation bug. | |
| 349 | -* improve 'cf7sg_validate_submission' hook, data array contains file data. | |
| 350 | -* redirect cf7 plugin admin pages to smart grid pages. | |
| 351 | -= 3.1.2 = | |
| 352 | -* instantiate CodeMirror after library load and pass as attribute to anonymous function to fix conflict issue. | |
| 353 | -= 3.1.1 = | |
| 354 | -* fix helper bug inline filters. | |
| 355 | -= 3.1.0 = | |
| 356 | -* load minified resources on live sites. | |
| 357 | -= 3.0.4 = | |
| 358 | -* fix css style on rows/container for DIVI theme. | |
| 359 | -= 3.0.3 = | |
| 360 | -* fix add_cap bug for deleted roles. | |
| 361 | -= 3.0.2 = | |
| 362 | -* added 'wpcf7_manage_integration' cap to admin role. | |
| 363 | -= 3.0.1 = | |
| 364 | -* fix pointers dismiss bug. | |
| 365 | -= 3.0.0 = | |
| 366 | -* clean-up core integration with cf7 plugin. | |
| 367 | -* add WP std capabilities for better role management. | |
| 368 | -* automatic detection of required js scripts / css styling when form saved. | |
| 369 | -* more efficient loading of front-end resources (js/css). | |
| 370 | -* enabling benchmark fields for non-grid forms. | |
| 371 | -* enabling dynamic_select fields for non-grid forms. | |
| 372 | -* enabling sgv- validation for non-grid forms. | |
| 373 | -* added pointers to form edit screen. | |
| 335 | += 4.5.0 = | |
| 336 | +* fix row cloning label removal bug. | |
| 337 | +* added js fn cf7sgCountRows, cf7sgRemoveRow. | |
| 338 | += 4.4.4 = | |
| 339 | +* fix codemirror tag match. | |
| 340 | +* improve corrupt form code retrieval when js error prevents editor loading. | |
| 341 | += 4.4.3 = | |
| 342 | +* fix for conditional groups. | |
| 343 | +* fix for condiitonal plugin admin submit. | |
| 344 | += 4.4.2 = | |
| 345 | +* fix preview translated forms. | |
| 346 | += 4.4.1 = | |
| 347 | +* fix js min. | |
| 348 | += 4.4.0 = | |
| 349 | +* added action 'cf7sg_enqueue_admin_editor_styles' | |
| 350 | +* added action 'cf7sg_enqueue_admin_table_styles' | |
| 351 | +* added action 'cf7sg_enqueue_admin_table_scripts' | |
| 352 | +* added filter 'cf7sg_include_hidden_form_fields'. | |
| 353 | +* added filter 'cf7sg_prefill_form_fields'. | |
| 354 | +* differentiate preview forms on submission. | |
| 355 | +* fix rtl full-screen/custom editors buttons. | |
| 356 | +* improve full-screen. | |
| 357 | +* enabled pre-fill of form fields. | |
| 358 | +* add auto re-fill for preview/demo forms. | |
| 359 | +* enable toggle fields within sliders/accordions. | |
| 360 | +* added filter 'cf7sg_max_form_width' to change max width of form. | |
| 361 | +* added filter 'cf7sg_responsive_width' to change responsive width cutoff limit. | |
| 362 | +* updated translations PO files. | |
| 363 | +* added tr_TR, de_DE, he_IL locales .po files to languages. | |
| 364 | += 4.3.2 = | |
| 365 | +* fix js slider bug. | |
| 366 | += 4.3.1 = | |
| 367 | +* rotate rows/columns for rtl forms to fix mobile screen collaspe order. | |
| 368 | +* added tutorial for modular forms. | |
| 369 | += 4.3.0 = | |
| 370 | +* added filter 'cf7sg_new_cf7_form_template_arguments' to enable new form template arguments, cf7-polylang can set locale. | |
| 371 | +* fixed toggle in accordion row field disabled bug. | |
| 372 | +* enable preview link for forms with cf7sg_page custom post type. | |
| 373 | += 4.2.1 = | |
| 374 | +* fix notice dismissal bug. | |
| 375 | += 4.2.0 = | |
| 376 | +* fix regex look back for Safari browser. | |
| 377 | +* replaced slider js plugin with Glider-js. | |
| 378 | +* added new video tutorial for slider forms. | |
| 379 | += 4.1.4 = | |
| 380 | +* fix static reference. | |
| 381 | += 4.1.3 = | |
| 382 | +* better control of cf7 form requests. | |
| 383 | +* js regex look behind fix. | |
| 384 | += 4.1.2 = | |
| 385 | +* fix grid-loading script bug. | |
| 386 | +* fix tab navigation in UI editor. | |
| 387 | += 4.1.1 = | |
| 388 | +* improve loading of resources for non-grid forms. | |
| 389 | += 4.1.0 = | |
| 390 | +* added admin notices for plugin upgrade validation. | |
| 391 | +* fix singular fields with array values mail bug. | |
| 392 | += 4.0.1 = | |
| 393 | +* tables in tabs data consolidation bug fix. | |
| 394 | +* custom css/js dir creation fix. | |
| 395 | +* css/js editor window sroll lock fix. | |
| 396 | += 4.0.0 = | |
| 397 | +* custom js/css editors. | |
| 398 | +* added 'cf7sg_dynamic_dropdown_taxonomy_query' filter. | |
| 399 | +* slider forms. | |
| 400 | +* multi-step forms. | |
| 401 | +* added 'cf7sg_remove_table_row_labels' filter to remove labels in table rows. | |
| 402 | +* added 'cf7sg_admin_form_editor_jstags_other_items' for plugin developer. | |
| 403 | +* added 'cf7sg_admin_form_editor_jstags_last_item' for plugin developers. | |
| 404 | +* enabled javascript helper codes on js editor. | |
| 405 | +* added js functionality to further customise tables and tab structures. | |
| 406 | +* fixed table id attributes in tabbed sections. | |
| 407 | +* improved grouped toggles. | |
| 408 | +* tutorial admin page with embeded youtube videos. | |
| 409 | +* new pointers. | |
| 410 | +* added a general form mailtag. | |
| 411 | +* added html table construct for table/tabbed fields in mailtags. | |
| 412 | +* added mailtag for toggles and grouped toggles. | |
