aurovrata / cf7-grid-layout

A WordPress plugin extension for Contact Form 7 to design responsive grid-layout forms.
https://wordpress.org/plugins/cf7-grid-layout/
GNU General Public License v2.0
6 stars 7 forks source link

Grid UI nested wrapper elements rules #36

Open aurovrata opened 1 year ago

aurovrata commented 1 year ago

Following the question raised in the issue #31 I am listing here was is currently possible in v4 of the plugin.

Collapsible sections

There are 2 types of collapsible sections. Simple collapsible sections are used to organise a large form into different sections to ease the filling in of the form. Multiple of these collapsible sections can be grouped in order to have an accordion style layout.

Allowed nested wrappers: rows, tabs, tables, collapsible section, external form.

Toggled Collapsible section

These have a toggle switch and any fields included within are not submitted with the section is not used. A toggle is typically a yes/no switch and the section asks additional information to the user.

For example, a form can have a toggled section with the title: "Do you speak any additional languages?" with a yes/no toggle. The toggle can then be opened and the user require to fill in additional fields.

In addition, several toggled sections can be grouped to have either/or type of answers.

Allowed nested wrappers: rows, tables, tabs, collapsible, toggled-collapsible, external form.

Rows

a row has a set of columns. Each column has a single cell containing a field label and description, and one or more cf7 field tags.

Allowed nested wrappers: rows, tables, tabs, collapsible, toggled-collapsible, external form.

Slider

A slider section wraps the entire form and transforms the form into multistep/multi-slide form. A slider automatically has an inner slide section too.

Allowed nested wrappers: slide section only.

Slide

A slide wrapper section only makes sense within the slider section and as such is only available when the slider is present.

Allowed nested wrappers: rows, tables, tabs, collapsible, toggled-collapsible, external form.

Tables

This is a field repeater section. Only a single row with columns can be converted into a table.

Allowed nested wrappers: none.

Tabs

This is a field repeater section which can allows to repeat entire sections of forms.

Allowed nested wrappers: rows, tables, collapsible, toggled-collapsible, external form.

NOTE: a tab can include a table, another repeater section, which results in an array of arrays of fields submission.

External form

the plugin allows forms to include other forms to ease maintenance of large forms. A modular approach to form design.

Allowed nested wrappers: none.

aurovrata commented 1 year ago

Proposed changes to v5 of the plugin

Limit toggled-collapsible sections

Allowed nested wrappers: rows, tables, ~tabs, collapsible, toggled-collapsible, external form~. Limit inner sections of toggled-collapsible sections to the following. This would simply the tracking of toggled field submission, which requires special care due to the limitations of the CF7 plugin.

Limit tabs inner sections

Allowed nested wrappers: rows, tables, ~tabs~, ~collapsible~, toggled-collapsible, ~external form~.

Inner tabs section make no sense as they can lead to too many nested arrays of submitted fields, which currently the plugin is not able to handle and would make no sense either.

Inner collapsible sections to organise a long form section seems counter-intuitive. A larger repeatable form section would probably better achieved by submitting a single form several times.

An external form would again allow all these sections to appear, so simpler to remove it too.