Need help with sub form fields

Question

Need some UI and UX suggestions and help regarding the following sub-form section

Is this ok? I want to clarify to users that by clicking on "Add Extra Data" it will add Title and Extra Data text boxes. Also, Users can remove those by clicking "Remove". Is this UI/UX clear enough?

Are there better techniques to handle this kind of situation in forms?

Thank you in advance for helping.

Answer 1

What you are trying to do is a kind of accordion form, similar to this example. I think you're too immersed in the form rather than the action. I would try to adjust the global layout to make the action clearer.

Some tips:

1. What the user is adding is a new Extra Data, so I would put the add + button associated with the general form title.
2. Put a name or title to each section. I would differentiate between a fixed title of the section and the editable name. A title always helps to clarify the difference between one element and another. When the user deletes it, it's clear that they're deleting the entire section, not just the edited text.
3. Visibly differentiates the title area either by typographical change, background, ... This helps to hierarchize, differentiating the element from its editable area and to create the partition between each of the new Extra Data added. In the image of the question, the centered line is confusing by not defining a total division of each piece, it seems the second field is part of the first.
4. The x is closely related to closing the window, I would not hesitate to put a trash can in the title area of each section to remove it permanently.

A basic draft:

5. Try not to make the user dizzy with trips from one place to another. A form implies the complication of "forcing" the user to insert data. Defining editing zones and action zones help to the clarity and understanding of the whole element.