=== Smart Grid-Layout Design for Contact Form 7 ===
Contributors: aurovrata, StrangeTech, altworks, Birmania, netzgestaltung
Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EDV4MEJLPT4VY
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
Requires at least: 4.7
Requires PHP: 5.6
Tested up to: 6.5.4
Stable tag: 4.15.8
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
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.
== Description ==
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 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!
Unpack this plugin archive file into your wp-content/plugins folder.
Activate the plugin through the 'Plugins' menu on WordPress.
Create a new form to leverage the grid editor, existing forms can only be edited in text mode.
Read the FAQs & Screenshot captions to understand how to use this plugin.
== Frequently Asked Questions ==
= 1. How do I drag and sort columns in the grid editor ? =
Columns can be rearranged within a row by simply dragging and dropping using the handled icon in the columns head. You can also drag and drop a column into another row, if the target row has sufficient space to receive the column, else a warning msg will appear. In that case, make some room in the target row and/or resize the column so as to ensure it will fit in the row.
Similarly, you can re-organise your rows within a given grid. Your initial form is grid. You can convert an existing column into a grid.
= 2. How do I create a dynamic dropdown list ?=
Simply create a new dynamic dropdown field using the added tag in the list of available tags and select the type of dynamic list you want to populate with. You create a list which will appear in the Information metabox in your edit page once you save your form. It uses the taxonomy management functionality of WordPress but is not associated with any posts as such. Simply edit the list by adding new terms to your list. These will appear in your dropdown field.
Alternatively select an existing post from your dashboard and the post titles will be used to populate the dropdown.
You also have the option to select a dynamic filter, and then the plugin will hook your functionality in your functions.php file to get your custom list.
= 3. How do I make nice dropdown selects? =
When you create a dynamic dropdown, or a cf7 dropdown field, you add class:nice-select to your tag or 'nice-select' in the class text field option. The plugin will convert your dropdown into a beautiful nice-select field.
= 4. How do I make powerful select2 dropdowns? =
When you create a dynamic dropdown, or a cf7 dropdown field, you add class:select2 to your tag or 'select2' in the class text field option. The plugin will convert your dropdown into a powerful and searchable jQuery Select2 field. You can also enable select custom user options (known as tagging in the plugin documentation: https://select2.org/tagging) by adding the 'tags' class to your cf7 tag, class:tags.
= 5.How do I display a pretty toggle switch on my collapsible section? =
When you convert a row into a collapsible section (see screenshot 8), you can check the toggle option which will insert 2 data attributes into your html row, with labels for the toggle switch on/off state. The default labels are 'yes' for on and 'no' for off. You can change the data-on and data-off attributes in the html text editor. Your form will display a toggle switch.
= 6.How do I reset a form?=
Navigate to the 'text' editor of the form, select all the html and delete the editor content. The plugin will create 1 default row with a single column in the 'grid' editor from which you can design your form afresh.
= 7.The columns are filled with default html field wrappers, how do I change this ?=
The plugin wraps each cf7 tag with the following html,
`
[CF7-tag shortcode]
`
Furthermore, CF7 tags that are marked as required, have the following html `*` appended in the