Module

Developer
Supported

EE 1
EE 2
ProForm Drag and Drop Form Builder

Back to this add-on's main page
View Other Add-ons From Isaac Raway

     

You must be logged in to post.

[Resolved] conditional logic

Support Request

knewell
knewell

Does ProForm incorporate conditional logic into a form?

For example, certain fields will display based on previous field responses.

thank you

airways
# 1
Developer
airways

Currently you would need to implement something like this using template conditional logic or JavaScript. ProForm doesn’t yet have support for groups of fields that are only required / enabled when certain other fields have certain values. I have implemented this functionality for an older form module in the past, however, and will be adding it to ProForm soon.

knewell
# 2
knewell

Thank you for the information.

Do you have a simple example of how the template conditional logic would look? Or a javascript that you would recommend?

airways
# 3
Developer
airways

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.

knewell
# 4
knewell

This is great direction, thank you so much. It will take me a bit of time to work this into my development schedule, but I will let you know how it goes.

thanks again

airways
# 5
Developer
airways

Any luck with this?

knewell
# 6
knewell

I could not get wForms to work as described in their documentation. I ended up using a very simple javascript change function that will show/hide id elements as different radio buttons are clicked.

thanks for your helpful suggestions.

airways
# 7
Developer
airways

Glad to help!