Form builder redesign

[wiliamjk]

As discussed here, I'm reposting my suggestions here on GitHub for discussion.

...

As I believe this plugin is an excellent contribution to the community and thinking about its potential, I took the liberty of sketching some ideas that could improve the plugin’s usability.

I designed some screenshots of how the form editor look might work. Note that I reorganized the flow of adding fields a bit:

On this screen, I think we could cut out distractions. Also, I organize the fields into elements that can be inserted into columns that can be inserted into rows.
Columns can have adjusted sizes (such as 1/1, 1/2, 1/3, 2/3, 1/4, etc.). Rows take up the entire width and are filled with columns. Elements are stacked vertically within a column. You can only add a field within a column.

On this screenshot, we have a slightly more complex form. Notice how it is possible to organize the fields in columns and rows.

As the plugin is today, all fields are editable directly from the interface. I understand the practicality of this, but it means that there are a lot of editable fields and a lot of buttons, which makes the whole interface very confusing.
So I thought of editing the elements in a modal, by clicking on the pen icon that appears on the mouse hover.

Likewise, when clicking “Add Field”, a modal opens revealing the usual CF7 shortcodes.

When adding or editing a field, before editing the shortcode, we would have the option to add a label or a description. I think it’s important to limit this feature to only relevant field types. This doesn’t make sense for an acceptance field, for example.

I’m not a developer, so I don’t know the level of complexity of this proposal. It’s also just a start, I’m probably missing important features since I did it quickly. But I think an adjustment in this sense could already significantly improve the user experience. The idea was not to think of anything very innovative, but to try to reorganize what already exists.

If you like the ideas and want to move forward in that direction, I’d be happy to help. I am available for a more direct contact if you prefer.

Anyway, congratulations for the work so far, my intention with the review was not to criticize your work lightly, but just to warn new users that the plugin is not user-friendly and to say that this is its biggest flaw. But if we can fix that, I think your plugin has what it takes to become indispensable in any WordPress installation.

[aurovrata]

Great, edited issue to embed the screenshots to make it easier to refer to.

I will go through these this .w.e and provide some detailed comments

[philmck]

Great stuff! I'm keen to help, but I'm stuck in a theatre with phone off for the rest of the week so bear with me.

[SaaX-IRL]

Happy to help too - and I do think it could do with some improvements - I struggled with it in the past ;-)

[anton-vrba]

IMHO the form design is functional as it is, even if a bit cumbersome to use. Efforts would be better spent in introducing more functional form design elements, by that I mean the addition of a custom HTML blocks which are not associated with Contactform7. This would allow designing of structured forms that include bolder horisontal lines, custom text blocks, etc. This would be very useful in designing questionnaires, surveys, online exams, etc

I introduced such functionality by editing the HTML, which destroyed rendering of the form designer as illustrated by the images below; I use this plugin together with the companion plugin "Post My CF7 Form".

Above is the form in action. The blue text is rendered as the user types so that he can check it before submitting.

The added html code had to be placed at this peculiar position, at other position with would break the rendering of the form designer completely.

[aurovrata]

Dear all to ease the conversation I am going to split this discussion into several topics.

Here are the main points I have identified so far,

General redesign (issue #31)

@wiliamjk suggest to simplify the UI interface by hiding inner rows. I have created this issue to discuss this.

Add field button (issue #32)

@wiliamjk suggest to add a button for adding fields, at which point a list of field tags are displayed to allow to select a field.

Add custom HTML block (issue #33)

@anton-vrba suggest to add a custom HTML block that is not associated with CF7

Conditional elements (issue #34)

One of the issues with the integration of the Conditional Fields for CF7 plugin is the need to add `[group/] shortcodes which are currently not very well handled by the UI and makes for messy integration.
I have been thinking that this could be better integrated by hiding and flagging the group tags within the field element while showing it in the HTML code.

[aurovrata]

I’m not a developer, so I don’t know the level of complexity of this proposal. It’s also just a start, I’m probably missing important features since I did it quickly. But I think an adjustment in this sense could already significantly improve the user experience. The idea was not to think of anything very innovative, but to try to reorganize what already exists.

@wiliamjk not an issue, your proposals are a good start and address the need to enable a UI that is more accessible to users who need a simpler form creation process.

We need to find a way to integrate this with the need for flexibility so as not to limit more complex requirements.