| @@ -1,11 +1,11 @@ | ||
| 1 | 1 | === Smart Grid-Layout Design for Contact Form 7 === |
| 2 | -Contributors: aurovrata, StrangeTech, altworks, Birmania, netzgestaltung | |
| 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 module, form custom styling, contact form 7 extension, responsive forms, multi-step form, form builder, multi-slide slider form, repetitive fields, form custom JavaScript | |
| 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.9.2 | |
| 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 | |
| @@ -14,9 +14,9 @@ | ||
| 14 | 14 | == Description == |
| 15 | 15 | |
| 16 | 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. |
| 17 | 17 | |
| 18 | -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. | |
| 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 | 19 | |
| 20 | 20 | [youtube https://www.youtube.com/playlist?list=PLblJwjs_dFBsynXEstrV3fCIC7GBmK9HW] |
| 21 | 21 | |
| 22 | 22 | In addition, the plugin also introduces multiple smart input functionalities, such as, |
| @@ -38,9 +38,9 @@ | ||
| 38 | 38 | **For plugin developers** |
| 39 | 39 | If you wish to leverage the in-editor helper code functionality for your CF7 plugin, you need to use the following hooks, |
| 40 | 40 | `cf7sg_ui_grid_js_helper_hooks` - include js bind event code helpers. |
| 41 | 41 | `cf7sg_ui_grid_helper_hooks` - include php filter/action hooks code helpers. |
| 42 | -`cf7sg_enqueue_admin_editor_scripts` - to enqueue scripts on the admin editor page to bind to editor events for further dynamic code helpers. | |
| 42 | +`cf7sg_enqueue_admin_editor_scripts` - to enqueue scipts on the admin editor page to bind to editor events for further dynamic code helpers. | |
| 43 | 43 | |
| 44 | 44 | 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. |
| 45 | 45 | |
| 46 | 46 | = Checkout our other CF7 plugin extensions = |
| @@ -169,10 +169,10 @@ | ||
| 169 | 169 | The plugin will look for a JavaScript file `js/{$cf7key}.js` from the base of your theme root folder and load it on the page where your form is displayed. Create a `js/` subfolder in your theme (or child theme folder), and create a file called `<your-form-cf7key>.js` in which you place your custom JavaScript code. |
| 170 | 170 | |
| 171 | 171 | In addition, if you need to localise your custom script, you can do so using the following action hook, |
| 172 | 172 | ` |
| 173 | -add_action('smart_grid_register_custom_script', 'localise_custom_script', 10,1); | |
| 174 | -function localise_custom_script($cf7_key){ | |
| 173 | +add_action('smart_grid_register_custom_script', 'localise_custom_scritp', 10,1); | |
| 174 | +function localise_custom_scritp($cf7_key){ | |
| 175 | 175 | if('my-form'!=$cf7_key) return; |
| 176 | 176 | //your script is enqueued with the handle $cf7_key.'-js' |
| 177 | 177 | wp_localize_script($cf7_key.'-js', 'customObj', array('key1'=>'value1')); |
| 178 | 178 | } |
| @@ -179,10 +179,8 @@ | ||
| 179 | 179 | ` |
| 180 | 180 | |
| 181 | 181 | The `$cf7key` is the unique key associated with your form which you can find in the Information metabox of your form edit page. |
| 182 | 182 | |
| 183 | -**Alternatively you can now use the custom JS editor** built into the form editor, See this [video tutorial](https://www.youtube.com/watch?v=wTdLVtU_mlU&list=PLblJwjs_dFBslCf0mDCrDYGpm5hBY3sWv&index=4&t=205s) for more details. | |
| 184 | - | |
| 185 | 183 | If you wish to [wp_enqueue_script](https://developer.wordpress.org/reference/functions/wp_enqueue_script/) a general JavaScript file for all your forms, you can use the hook `smart_grid_register_scripts`, |
| 186 | 184 | `add_action('smart_grid_register_scripts', 'add_js_to_forms'); |
| 187 | 185 | function add_js_to_forms(){ |
| 188 | 186 | wp_enqueue_script('my-custom-script', '<path to your custom js file>', array(), null, true); |
| @@ -195,10 +193,8 @@ | ||
| 195 | 193 | function add_css_to_forms(){ |
| 196 | 194 | wp_enqueue_style('my-custom-style', '<path to your custom sheet>', array(), null, 'all'); |
| 197 | 195 | }` |
| 198 | 196 | |
| 199 | -**Alternatively you can now use the custom CSS editor** built into the form editor, See this [video tutorial](https://www.youtube.com/watch?v=0DYxRpWc_F0&list=PLblJwjs_dFBsynXEstrV3fCIC7GBmK9HW&index=3&t=1080s) for more details. | |
| 200 | - | |
| 201 | 197 | = 9.Can I have required fields in toggled sections? = |
| 202 | 198 | Yes, as of v1.1 of this plugin, toggled sections input fields are disabled when collapsed/unused, and therefore any fields within these sections are not submitted. So you can design fields to be required when toggled sections are used, and the fields will be validated accordingly too. |
| 203 | 199 | |
| 204 | 200 | Please note that in the back-end, these fields which are listed in the form layout but are not submitted are set eventually set as null in the filtered submitted data. So if you hook a functionality post the form-submission, be aware that you also need to test submitted values for `NULL` as opposed to empty. |
| @@ -268,12 +264,10 @@ | ||
| 268 | 264 | copy the filter helper code (see [screenshot](https://wordpress.org/plugins/cf7-grid-layout/#screenshots) #21) and place it in your *functions.php* file. The code sample assumes the above example fields and sets up a list element for each field, along with a column header. These list elements are then styled to display them as tables in your mail. |
| 269 | 265 | |
| 270 | 266 | = 15. How can I set a maximum number of rows to a table ? = |
| 271 | 267 | |
| 272 | -As of v2.8, this functionality has now been included. You will need to add the `data-max` attribute to your table (div.container.cf7-sg-table) in the text editor and set it to the row limit you want (see [screenshot](https://wordpress.org/plugins/cf7-grid-layout/#screenshots) #22). NOTE: in a lengthy form it is easy to navigate directly to the table or field's text code line using the shortcode navigation buttons provided in the Grid editor, (see [screenshot](https://wordpress.org/plugins/cf7-grid-layout/#screenshots) #19) | |
| 268 | +As of v2.8, this functionality has now been included. You will need to add the `data-max` attribute to your table in the text editor and set it to the row limit you want (see [screenshot](https://wordpress.org/plugins/cf7-grid-layout/#screenshots) #22). NOTE: in a lengthy form it is easy to navigate directly to the table or field's text code line using the shortcode navigation buttons provided in the Grid editor, (see [screenshot](https://wordpress.org/plugins/cf7-grid-layout/#screenshots) #19) | |
| 273 | 269 | |
| 274 | -When the limit of rows is reached, the add button is disabled and a message being displayed besides it. This message can be customised using the CF7 messages for the form (see the message tab in the form form editor), the message is labelled 'Message displayed when max tables rows reached.'. This message applies to all tables in a given form. Should you need to customise the messages for multiple tables, you can use the `data-max-row-msg` attribute on the table element (div.container.cf7-sg-table), with a custom message. | |
| 275 | - | |
| 276 | 270 | = 16. Can I add custom input or other html elements in the form ? = |
| 277 | 271 | |
| 278 | 272 | Yes this is possible. However, keep in mind that the forms are sanitised using [`wp_kses()`](https://codex.wordpress.org/Function_Reference/wp_kses) function, so any html elements which are not included in the set of permitted elements will be stripped out of the form. A filter is included for you add additional html code permitted by the sanitisation function, |
| 279 | 273 | |
| @@ -309,14 +303,8 @@ | ||
| 309 | 303 | = 19. Form previews throws 404 page not found error = |
| 310 | 304 | |
| 311 | 305 | You need to refresh your permalinks, please go to Settings->Permalinks in your dashboard, scroll down and hit the 'Save' button. |
| 312 | 306 | |
| 313 | -= 20. 522 Error on live sites = | |
| 314 | - | |
| 315 | -In some server configuration, accessing cloudflare resources results in 522 error (see this [thread](https://wordpress.org/support/topic/522-error-with-codemirror-jump-to-line-js/)). The plugin uses select2 JavaScript plugin library stored on the cdnjs cloudflare network for live sites. To force the plugin to use the local resource, insert the following filter in your `functions.php` file, | |
| 316 | - | |
| 317 | -`add_filter('cf7sg_use_local_select2', '___return_true');` | |
| 318 | - | |
| 319 | 307 | == Screenshots == |
| 320 | 308 | |
| 321 | 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. |
| 322 | 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. |
| @@ -343,165 +331,17 @@ | ||
| 343 | 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. |
| 344 | 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. |
| 345 | 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. |
| 346 | 334 | == Changelog == |
| 347 | -= 4.12.13 = | |
| 348 | -* fix dynamic list field filters for taxonomy source. | |
| 349 | -= 4.12.12 = | |
| 350 | -* change jquery ui cdn lib from cloudflare to ajax.googleapis.com. | |
| 351 | -= 4.12.11 = | |
| 352 | -* fix new taxonomy creation for dynamic fields. | |
| 353 | -= 4.12.10 = | |
| 354 | -* fix admin update query on form versions. | |
| 355 | -= 4.12.9 = | |
| 356 | -* fix class validation typo. | |
| 357 | -= 4.12.8 = | |
| 358 | -* validation of submission object for Conditional Fields PRO plugin. | |
| 359 | -= 4.12.7 = | |
| 360 | -* improve RTL slider form control buttons. | |
| 361 | -= 4.12.6 = | |
| 362 | -* fix multiple select on dynamic dropdown fields. | |
| 363 | -* fix pipes and _raw_ fields. | |
| 364 | -= 4.12.5 = | |
| 365 | -* improve trashing bookkeeping. | |
| 366 | -* clean up custom css/js files on form delete. | |
| 367 | -* fix filter values from deprecated hooks. | |
| 368 | -* fix admin php filter helper hooks in grid fields. | |
| 369 | -* fix default label option filter on dynamic list fields. | |
| 370 | -= 4.12.4 = | |
| 371 | -* re-introduce default selected options in dynamic list tags. | |
| 372 | -* adjust invalid tip position. | |
| 373 | -= 4.12.3 = | |
| 374 | -* fix free_text cb/radio fields | |
| 375 | -= 4.12.2 = | |
| 376 | -* fix hybrid selector in public js. | |
| 377 | -= 4.12.1 = | |
| 378 | -* update minfied js script. | |
| 379 | -* fix slider controls. | |
| 380 | -= 4.12.0 = | |
| 381 | -* enable custom options on select2 and HybridDropdown. | |
| 382 | -* update HybridDropdown library. | |
| 383 | -* fix taxonomy validation for nexted dynamic lists. | |
| 384 | -= 4.11.9 = | |
| 385 | -* security update on admin save form, replace file_exists with realpath. | |
| 386 | -= 4.11.8 = | |
| 387 | -* security update on admin save form. | |
| 388 | -= 4.11.7 = | |
| 389 | -* fix broken template for new forms. | |
| 390 | -* fix conditional [group] within cells. | |
| 391 | -* fix/enable custom classes to table cell `div.field` element. | |
| 392 | -= 4.11.6 = | |
| 393 | -* fix condition in admin notices. | |
| 394 | -= 4.11.5 = | |
| 395 | -* filter cf7 5.5 kses to ensure cf7sg html markup. | |
| 396 | -* flag cf7 form errors in admin table. | |
| 397 | -* allow for cf7 plugin bulk revalidation. | |
| 398 | -= 4.11.4 = | |
| 399 | -* check for valid WPCF7_MailTag object in mail tag table filter. | |
| 400 | -= 4.11.3 = | |
| 401 | -* enable script registration for forms that are not embeded in post contents. | |
| 402 | -= 4.11.2 = | |
| 403 | -* udpate CF7SG_VERSION_FORM_UPDATE to 4.11 | |
| 404 | -= 4.11.1 = | |
| 405 | -* fix slider controls bug. | |
| 406 | -= 4.11.0 = | |
| 407 | -* cleanup code. | |
| 408 | -* scroll up on slide change for multi-slider forms. | |
| 409 | -* added data-attributes to customise dynamic lists. | |
| 410 | -* added filter 'cf7sg_dynamic_list_options_attributes'. | |
| 411 | -* deprecated filter 'cf7sg_dynamic_dropdown_option_attributes'. | |
| 412 | -* added 'cf7sg_use_local_select2' filter to bypass cloudflare. | |
| 413 | -* css adjust not valid tip. | |
| 414 | -* fix js/css file duplication when copying forms. | |
| 415 | -* remove version check for forms not created in grid UI. | |
| 416 | -* fix rtl toggle style. | |
| 417 | -* enable rtl slider forms with glider.js lib update. | |
| 418 | -* enable custom slider control row. | |
| 419 | -* enable slider labelled dots. | |
| 420 | -* added dynamic checkbox field with nested lists. | |
| 421 | -* force dynamic tag select2 to open above (see select2 [issue](https://github.com/select2/select2/issues/3121#issuecomment-918379458) ) | |
| 422 | -* re-introduce HTML messages in CF7 submissions. | |
| 423 | -* added 'cf7sg_submission_success_message' filter. | |
| 424 | -* added 'cf7sg_redirect_on_success' filter for dynamic redirection on success. | |
| 425 | -= 4.10.0 = | |
| 426 | -* abstraction of dynamic lists to open the possibility for other tag fields. | |
| 427 | -* fix file required PHP fatal error. | |
| 428 | -= 4.9.2 = | |
| 429 | -* fix admin js to ensure form field updates reflect. | |
| 430 | -* added 'cf7sg_save_post' action for plugins to save form attributes. | |
| 431 | -= 4.9.1 = | |
| 432 | -* admin css style fix. | |
| 433 | -* pass button element in sgAddRow event. | |
| 434 | -= 4.9.0 = | |
| 435 | -* fix css/js codemirror empty line. | |
| 436 | -* change in file schema, CF7 5.4 file validation handling not longer exposes additional file validation/transport. | |
| 437 | -* files now stored in submission data array. | |
| 438 | -* added action 'cf7sg_valid_form_submission' fired once submission is validated. | |
| 439 | -= 4.8.2 = | |
| 440 | -* fix for new file validation in CF7 5.4. | |
| 441 | -* ajax submission spinner styling update. | |
| 442 | -= 4.8.1 = | |
| 443 | -* enabled other attributes for input elements in html text. | |
| 444 | -* fix HTML/UI form sync. | |
| 445 | -* add 'cf7sg_preserve_cf7_data_schema' filter for plugin owners to preserve CF7 data schema. | |
| 446 | -= 4.8.0 = | |
| 447 | -* fix missing search.png image for minified css. | |
| 448 | -* added custom attribute data-max-row-msg on tables. | |
| 449 | -= 4.7.8 = | |
| 450 | -* fix ie11 js fn. | |
| 451 | -= 4.7.7 = | |
| 452 | -* enable custom classes on collapsible title element. | |
| 453 | -* remove for..of loops for ie11 | |
| 454 | -* fixed 'cf7sg_dynamic_dropdown_default_value' filter for default value label in dynamic seelect fields. | |
| 455 | -= 4.7.6 = | |
| 456 | -* improve cf7sg js object validation. | |
| 457 | -= 4.7.5 = | |
| 458 | -* fix cf7sg js object validation for non-grid forms. | |
| 459 | -* do not flag non-grid forms if not requiring grid js resources. | |
| 460 | -= 4.7.4 = | |
| 461 | -* fix redirect for non-grid forms. | |
| 462 | -= 4.7.3 = | |
| 463 | -* fix hidden textarea cf7 editor. | |
| 464 | -= 4.7.2 = | |
| 465 | -* fix helper code for mailtag filter. | |
| 466 | -= 4.7.1 = | |
| 467 | -* fix bug preventing toggled sections within accordions. | |
| 468 | -* fix accordion activation/flagging when contains invalid fields. | |
| 469 | -* added dots button to slides. | |
| 470 | -= 4.7.0 = | |
| 471 | -* enable tab select for panels with invalid inputs. | |
| 472 | -* flag tabs with invalid fields. | |
| 473 | -* flag slides with invalid fields. | |
| 474 | -* flag collapsible sections with invalid fields. | |
| 475 | -* fix default dropdown cf7 tag value. | |
| 476 | -* upgrade glider.js to fix slider submit button bug. | |
| 477 | -= 4.6.2 = | |
| 478 | -* fix prefill for hidden fields. | |
| 479 | -* deprecated cf7sg_mailtag_grid_fields hook, replaced with existing cf7sg_mailtag_{$field_name} for tabbed/tabled fields. | |
| 480 | -= 4.6.1 = | |
| 481 | -* fix redirect bug. | |
| 482 | -= 4.6.0 = | |
| 483 | -* fix tabs row controls. | |
| 484 | -* cleanup row removal in js script. | |
| 485 | -* added js functions cf7sgRemoveTab cf7sgCountTabs | |
| 486 | -* clean up tab removal in js script. | |
| 487 | -* added new tutorial. | |
| 488 | -* upgraded CodeMirror to v5.58.3. | |
| 489 | -* improved handling of multi-form on page. | |
| 490 | -* fix textarea tag default value bug. | |
| 491 | -* added page redirect option. | |
| 492 | -* deprecated hooks cf7_smart_grid_form_id / smart_grid_register_custom_script. | |
| 493 | -* added action hook cf7sg_enqueue_custom_script-$form_key. | |
| 494 | 335 | = 4.5.0 = |
| 495 | 336 | * fix row cloning label removal bug. |
| 496 | 337 | * added js fn cf7sgCountRows, cf7sgRemoveRow. |
| 497 | -* added new tutorial. | |
| 498 | 338 | = 4.4.4 = |
| 499 | 339 | * fix codemirror tag match. |
| 500 | 340 | * improve corrupt form code retrieval when js error prevents editor loading. |
| 501 | 341 | = 4.4.3 = |
| 502 | 342 | * fix for conditional groups. |
| 503 | -* fix for conditional plugin admin submit. | |
| 343 | +* fix for condiitonal plugin admin submit. | |
| 504 | 344 | = 4.4.2 = |
| 505 | 345 | * fix preview translated forms. |
| 506 | 346 | = 4.4.1 = |
| 507 | 347 | * fix js min. |
| @@ -517,15 +357,15 @@ | ||
| 517 | 357 | * enabled pre-fill of form fields. |
| 518 | 358 | * add auto re-fill for preview/demo forms. |
| 519 | 359 | * enable toggle fields within sliders/accordions. |
| 520 | 360 | * added filter 'cf7sg_max_form_width' to change max width of form. |
| 521 | -* added filter 'cf7sg_responsive_width' to change responsive width cut-off limit. | |
| 361 | +* added filter 'cf7sg_responsive_width' to change responsive width cutoff limit. | |
| 522 | 362 | * updated translations PO files. |
| 523 | 363 | * added tr_TR, de_DE, he_IL locales .po files to languages. |
| 524 | 364 | = 4.3.2 = |
| 525 | 365 | * fix js slider bug. |
| 526 | 366 | = 4.3.1 = |
| 527 | -* rotate rows/columns for rtl forms to fix mobile screen collapse order. | |
| 367 | +* rotate rows/columns for rtl forms to fix mobile screen collaspe order. | |
| 528 | 368 | * added tutorial for modular forms. |
| 529 | 369 | = 4.3.0 = |
| 530 | 370 | * added filter 'cf7sg_new_cf7_form_template_arguments' to enable new form template arguments, cf7-polylang can set locale. |
| 531 | 371 | * fixed toggle in accordion row field disabled bug. |
| @@ -564,9 +404,9 @@ | ||
| 564 | 404 | * enabled javascript helper codes on js editor. |
| 565 | 405 | * added js functionality to further customise tables and tab structures. |
| 566 | 406 | * fixed table id attributes in tabbed sections. |
| 567 | 407 | * improved grouped toggles. |
| 568 | -* tutorial admin page with embedded YouTube videos. | |
| 408 | +* tutorial admin page with embeded youtube videos. | |
| 569 | 409 | * new pointers. |
| 570 | 410 | * added a general form mailtag. |
| 571 | 411 | * added html table construct for table/tabbed fields in mailtags. |
| 572 | 412 | * added mailtag for toggles and grouped toggles. |
