0

I'm currently building a form in HTML+CSS. As there are two forms in this I'll call "my form" for the one relevant to this question and "other form" for the form that has its own different solution

My form is intended to use only text inputs <input type="text"> for the data input at this point.

For some data inserted in my form, depending on data that is inserted by other people in "other form", different information will be used from "my form" in the final output.
Here's an example-idea of how "my form" looks like:

https://jsfiddle.net/brunoais/ekern79e/1/

I believe that it doesn't seem like that those (if A) and (If B) look like alternatives to each other.
Do not forget that condition A and condition B are only calculable at the time the other form is being answered. Also, one answer to my form will be used for multiple answers to the other form.
What are the "standard" ways without doing drastical changes I can apply to that construction to give the idea to whomever is filling that form that those two are actually mutually exclusive for each "final use" after "other form" is filled?

I already thought about...

  1. Using nested groups, but then there would be too many groups that would make the page huge with 1/3 of the page just to show the group namings.
  2. Using buttons to alternate but "Out of sight, out of mind" is a huge issue here because all fields must be filled.
  3. Side-by-side inputs but I need labels for them so that they can be properly identified.

Here's an image that tries to give a visual clue on how each part is interconnected.

http://puu.sh/nt42P/88e26edc00.png

I'll reiterate, I only need help about "my form". The rest is just to try placing you in the correct mindset. Also, due to my NDA, I'm not allowed to tell anything more, unfortunately...

closed as off-topic by JohnGB Mar 3 '16 at 9:13

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Site Reviews are off-topic because questions here are expected to be relevant for a variety of people in the same situation. Reviewing a site, flow or interface only helps one person at a specific time. Instead try to ask a focused question about a particular aspect of the design that solicits solutions, not opinions." – JohnGB
If this question can be reworded to fit the rules in the help center, please edit the question.

  • I'm a little confused. So your form is dynamically generated based on the input of another form? By calling the other form their form, does this imply you have no control over the other form? Is that other form filled out first, and then yours is displayed? Can you just show particular inputs and adjust their title/description depending on what was entered in the first form? – invot Mar 2 '16 at 19:54
  • Welcome to UX.SE. Please clarify your question, as right now it's hard to work out what you're asking. – JohnGB Mar 2 '16 at 22:33
  • @invot Try thinking like this: You have 2 computation boxes. The first is "my form". "My form" takes in input data that is just kept in... If this helps, think of it as configuration data. Every time a user goes to answer the "other form", the system chooses, for example, which "Content2" to show to the "other user" based on data it gets elsewhere. I need help showing to the user in "my form" that those are alternatives of the same thing and that they are related to mutually exclusive outcomes. If that doesn't help, I'll try to building an image and add it here in the next 9 hours. – brunoais Mar 2 '16 at 22:43
  • I think an illustration would help greatly, but here's what I am assuming: There are two users, each with a form to complete. Are they both filling out the forms at the same time? Does one form have to be complete before the other sees it? or is the exchange live and both users see what the other user is filling out real-time? – invot Mar 2 '16 at 22:59
  • @invot , I updated the question. Please see if that makes sense to you now. Thank you for trying. It's just too hard to know what is the minimal information to give while preventing clutter or telling too much. – brunoais Mar 3 '16 at 7:53
1

Could you not just use labels to explain that new fields have shown up and why you need that data?

Possibly using JavaScript to enable and disable the form fields as user enter information in the fields that require the option? Fieldsets are also a nice way of collating multiple fields together which are linked

I have updated the fiddle for you...

https://jsfiddle.net/7ovevjek/2/

  • Oh! No. This is a different one! The "if's" are applied later only and they the situations will change based on how the other form is answered. It's impossible to predict at the time this form is answered which fields will be required next... Actually, in the end, after enough answers to the other form, they all will be required. – brunoais Mar 2 '16 at 17:20
  • I edited the answer and added "Do not forget that condition A a"'s paragraph. I hope that helps you helping me. – brunoais Mar 2 '16 at 17:23
  • Ah! OK, I am still a bit confused, even with your edit. I think it needs a bit more context as I do not know at this point why it matters to the user. If they load a page with a form on it, do they really need to know that you have added new fields because some other people filled in a different form somewhere else? Surely you would just load a form and they would fill in whatever you ask. You would not ask anything you didnt need. – stradled Mar 2 '16 at 17:27
  • AH! I think you are confusing "my form" and "other form". Let's see if I can help you. This this: You are giving steps used to solve "other form" instead of not "my form". The form I need help with is the form that needs all fields answered, even fields that may never be used. The conditions A, B, etc... belong to system states of the program that will happen later. Depending on those states, the corresponding value given will be used. The states the program will be are completely out of the control of the user answering "my form" so he must fill all fields. Does that help? – brunoais Mar 2 '16 at 17:32
  • Hey. See if that update (last paragraphs) helps please. – brunoais Mar 3 '16 at 7:54

Not the answer you're looking for? Browse other questions tagged or ask your own question.