|
I’ve found a JavaScript library named wForms which provides an example of how to do this type of thing. I haven’t used this but it is promising enough that I may well include it in a new demo template in the future, since support for this in ProForm will still need some JavaScript implementation to make the UI look nice.
To use this now, you would need to do a few things:
1. Setup (see the Setup section of the wForms site):
a. Add wForms to your site’s assets and include it in your header.
b. Define the Required CSS as noted here.
2. Create a checkbox on your form to serve as the switch. Using the sidebar that appears when you select the element in the form’s layout editor, set it’s class to switch-switchname (make up a value for switchname).
3. Add new fields to show when the switch is checked, with a class of onstate-switchname (the value for switchname must match the checkbox’s value above).
The elements with the class names that start with onstate- should now be hidden until the checkbox with the class starting with switch- is checked. You can create multiple switches with dependent fields in this way.
That should just about do it. Let me know if this works for you!
Note that all of these fields must be set to not required, or the form will not validate. That’s the part that I need to add to ProForm, as well as a nicer UI to associate the fields with their switches. If the validation is an issue you can add validation using the jQuery Validation plugin or a number of other JavaScript based solutions. wForms also supports validation.
I will definitely be adding better support for this in the near future.
|