Form UI redesign - Add field button

[aurovrata]

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

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.

[aurovrata]

I had also thought of doing something similar to this, but in addition to making a modal for filling a field, I was thinking that it would be useful to be able to edit a field with the modal. Currently, this is not possible as it requires parsing the shortcode back into a tag and filling in the modal form. However, there might be ways to solve this.

CF7 limitations

There are limitations to what we can do which are forced on us from the CF7 plugin itself. Its author is notorious for not collaborating with plugin extension authors in order to facilitate extensibility functions. So we are limited by what we can do. For example, the field tag modal forms do not follow any template, and as such it is difficult to extract field tag options.

[wiliamjk]

Obviously, being able to edit the field tag would be the best possible solution. But I understand that this feature may not be easy to achieve.

In any case, the other suggestions would already be a great advance!

[wiliamjk]

I've briefly tested this functionality now in beta3 and it looks promising.

I took the liberty of making a mockup with some small suggestions for improvements based on what is already done.

To make it clearer when creating the field for the first time, I suggest that the first modal that opens is the modal with the CF7 field options list.

To make it clearer when creating the field for the first time, I suggest that the first modal you open is the modal with the CF7 field options list. After choosing the field and configuring it, then the second modal is opened to include the field label/description.

When clicking on "Add a new shortcode", the first modal reappears and the process starts again (including a new shortcode in the field).

If the user clicks on a field that already exists, then the second modal opens first.

I also wanted to suggest a reorganization of the fields. Since the label is on top of the field and the description is below, I thought it would be worth organizing it that way, if possible. In addition, I changed the instructions and the text of the button a little to try to make it more intuitive.

It's just a few visual tweaks, I hope it makes sense to you ☺️

[aurovrata]

To make it clearer when creating the field for the first time, I suggest that the first modal that opens is the modal with the CF7 field options list.

that's an interesting suggestion, however I recently came across a case of a user creating custom CF7 tags which do not have a tag manager button in the form editor. The default CF7 custom tag registration process does not include the custom tag in the list of fields tags in the admin editor.

This means that the user can edit/insert their custom tag manually (without using the tag generator modal) and the plugin will recognise the custom field in the backend.

In light of this, I feel opening the field name/desc/shortcode modal first make more sense as not all users will end up using the 2nd modal with the tag generator.

what do you think?

Having said this, I find your other tweaks pertinent,

• centre align the tags generator list (looks nicer)
• retain the order of the UI field entries in the modal, namely Name / field tag/ desc

[aurovrata]

update the modal layouts in beta4

[wiliamjk]

I'm afraid that a non-advanced user who doesn't know your plugin will mistakenly think that the CF7 shortcode generators are not available to him.

In this case, I believe the most elegant solution would be to make it clear to the regular user that the CF7 fields are there while making it clear to the advanced user that he can add a shortcode from scratch. Both at the same time.

I adjusted the mockup exemplifying:

[wiliamjk]

Here's a marketing question to ask about the plugin itself. Because seeing its promise to allow the creation of advanced layouts without having to touch the HTML/CSS manually, I have the impression that the plugin is aimed at a less skilled target audience.

At the same time, I know advanced users want to do much more elaborate things with the plugin.

If we want to embrace both audiences, it's interesting for us to make sure that the regular user won't be scared off by a bunch of complicated tools that only advanced users use. Advanced users who are willing to do more elaborate things can take a few more clicks to find a tool they are not used to.

What do you think about it? Am I getting it right?

[wiliamjk]

Another suggestion...

When clicking on "Add field" the modal should appear automatically, no? One less click since I wouldn't need to click on "[select a field]"

[aurovrata]

I believe the most elegant solution would be to make it clear to the regular user that the CF7 fields are there while making it clear to the advanced user that he can add a shortcode from scratch. Both at the same time.

ok, we can try that. I will adapt the modal sequence and design.

Advanced users who are willing to do more elaborate things can take a few more clicks to find a tool they are not used to.

that's true

One less click since I wouldn't need to click on "[select a field]"

yes, that makes sense.

[aurovrata]

@wiliamjk following this thread, I have now enabled in beta 7 release,

• a more intuitive modal sequence based on whether a field is already set or not as well as when clicking the 'add field' button.
• a custom tag modal for custom field tags that are registered without a tag generator form.
• a custom HTML modal as was requested by @anton-vrba

[wiliamjk]

I'm testing beta 9.

I have to say that I loved a lot of what I saw, I think it's a big step forward!

I'll comment here on some small tweaks related to the "add field button":

• I think it would be important to organize the buttons in order of importance, with the most used at the beggining. For example, "text" is a bit hidden among so many options.
• In the future, we can think of more visual buttons with icons. But not now 😬

• The "edit shortcode" button is a bit confusing. By clicking on it, I have the impression that I am going to edit the shortcode that I have already added, but in practice, it adds a new shortcode. I think just changing the text to "add new shortcode" would solve it, no?

I think that to be very clear, it would be interesting to review some supporting texts. My suggestions are as follows:

• Field label support text, replace The label field is displayed before the field, but is optional by Optional. It will be displayed before the field.. I think the information that it's optional should come first because it's important. Being at the end of the text, the user can pass the eye and not see it.
• Field tag title, replace Field tag by Field shortcode. I think the user can get confused with the word "tag", since it may have to do with post tags, for example. "Shortcode" is the most appropriate description for this field, isn't it?
• Field tag support text, include Required. You can enter any type of shortcode accepted by CF7, including more than one. Add a new one with the CF7 editor by clicking on the "add new shortcode" button.. I know it sounds redundant, but it's nice to make it clear that if the user already knows CF7, this is where he will put the shortcode. Furthermore, the possibility of including more than one is not obvious either. Finally, it explains what the button on the side does.
• Field description support text, replace The field description is displayed after the field, but is optional by Optional. It will be displayed after the field..

That would be it about this feature, I'll see if I comment more about other features in other threads. But congratulations so far, I'm very happy with the result!