Smart Grid-Layout Design for Contact Form 7

(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.

(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.

(3) The CF7 form editor page is now replaced by the WP core <code>post.php</code> page for custom posts. It offers a UI grid building tool to help design grid layouts. This is done using a responsive CSS plugin, Smart grid, which divides a row into 12 equal width columns.

(4)The CSS smart-grid plugin columns layout, the total width of a row including column offsets need to add-up to 12 equivalent widths. If you try to add more columns which takes the total width beyond these 12 units, you will end up with the extra columns flowing below.

(5) The 'text' tab of the form designer allows you to edit the form source in a beautiful CodeMirror html editor with colour highlighted markup for both html and CF7 tags. This makes it a lot easier to customise your source code. Switching back to the grid mode, the plugin will attempt to identify new rows/columns, but if it fails to recognise your custom html code, it will simply leave it as is and display it a separate textarea.

(6) You can add new rows with the '+' button in the row controls, delete with the 'bin' button which only appears on the 2nd row onwards. You can edit the row with the 'pencil' button. Similarly, you can add columns with the '+' button on the column controls, delete with the 'bin' button (only available on the 2nd column onwards), and edit a column using the 'pencil' button.

(7) Columns can be resized and offset.

(8) A row can be converted into a collapsible 'accordion' style section to collapse part of your form into more manageable parts.

(9) Columns can further be converted into grids, allowing for more complex layouts such as multiple rows within a column.

(10) Once a column is converted into a grid, its inner rows have added capabilities. You can convert an inner-row into a tabled section of fields. Any fields which are added to this row will be cloneable into multiple rows by a user and therefore submit multiple sets of these fields.

(11) Here is an example of a tabled section of a form, where the plugin automatically inserts a button for your uses to clone the row and any fields within it.

(12) When a row is added below a table row, you can convert it to a table footer. This is useful if you want to add some instructions at the bottom of your table (or table footer headings). The plugin will then insert the 'Add Row' button below this row.

(13) Similar to a table row, you can convert an inner-row into a cloneable tabbed section of fields. This is similar to the table concept except that users can add additional tabs which clone the entire set of fields presents in the tabbed row. Make sure you give your tab a label.

(14) On the form front-end your users will be able to add new tabs.

(15) A column can be converted into an entire existing cf7 form by editing the column ('pencil' button) and selecting the option 'Insert Form'. This will convert the column into a dropdown field from which you can select an existing form that you have previously designed. This makes for modular design of forms.

(16) This plugin introduces dynamic dropdowns, which allow you to manage dropdown field options using various content managed in your WordPress dashboard. For example, you can use taxonomy terms as options, or you can use existing post types' allowing your users to select/link existing content from your WordPress CMS managed data to their submission. The dynamic dropdown can also be programmatically populated using a hook filter with the last option 'Custom'.

(17) If you create a dynamic-dropdown field or select filter as source, the plugin expects the options to be provided by a filter. Your field cell will have an extra 'filter' icon at the top, click it to reveal the filters available. The plugin has an extensible framework which allows other plugins to leverage the in-editor helper codes to be integrated for specific fields. For example the Google Map CF7 extension is such an example, and will expose <em>PHP filter helper codes</em> as well as <em>JavaScript helper codes</em> to customise your field further. You can click on the filter link which will copy a helper code snippet which you can paste in your <em>functions.php</em> file and customise to provide the options list. For JavaScript helper codes, paste them in your <code>&lt;theme folder&gt;/js/&lt;form-unique-key&gt;.js</code> file (see FAQ #8 for more details).

(18) A benchmark field is available which allows you to display warning when certain input values breach the benchmark limit. The benchmark field also emits a JavaScript event when the limit is breached so that custom JavaScript action can be executed.

(19) Click on the code icon in any given column cell of the grid UI editor and it will take you to the equivalent code lines in the text editor.

(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.

(21) The plugin include hooks for further customisation. Handy helper code snippets are provided within form editor in the metabox 'Actions &amp; Filers', with a set of links on which you can click to copy the code snippet and paste it in your <em>functions.php</em> file.

(22) You can set a maximum number of rows a user can add to a table, by adding the <code>data-max</code> attribute to your table element.

(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.

(24) Redirect your form on submission to one of your existing pages and retrieve the submitted values from a transient field.