What is an intuitive and clutter-free method for dealing with additional form fields?

Question

I need to design a web app interface that would allow users to specify conditions that must be met before an action is triggered.

For instance, Action A will only happen if:

• the current time is between 4pm and 8pm
• the location is either CA or NY
• the some-arbitrary-number is above 65

All of the rules are optional, but some are more complicated than others.

After the initial form elements are filled out, what are some good practices for showing the additional form fields (i.e. conditions/rules) in an intuitive manner?

My inclination is to space everything out so the additional form fields don't cause too much noise. The extra space would also make way for hints or explanations to describe the rule or condition in a few brief words.

Answer 1

I think you're asking about conditional form fields, meaning one field is conditional on the state of another.

I typically do this with some JS. For instance, if my form has two questions in the form of checkboxes:

[ ] If this is checked we need to ask another question

[ ] This is some other question

If the first gets checked, I THEN show the other field:

[X] If this is checked we need to ask another question

    Some other information needed: [                 ]

[ ] This is some other question

As for how to expose it, I like to do a quick animated slide-down to reveal to make it a bit more obvious that the action happened.