Webform does offer conditional fields, but only on multipage forms. Any component we wish to make display under specific conditions can only be configured to do so based upon the value in a component from a preceding page.
The Webform Conditional (Same Page Conditionals) module delivers this dynamism by operating with components grouped on any given page. Using select components as the driver, we may specify conditions under which certain fields should display, and others should be hidden.
We need to install a module before we can enable and use it. Let's navigate to the Webform Conditional homepage at http://drupal.org/project/webform_conditional and download the latest 7.x version. The compressed folder needs to be extracted in sites/all/modules so that we have sites/all/modules/webform_conditional.
When the source code is in place, we navigate to our site's Modules page to enable the module by checking the box next to its name and clicking on Save configuration.
- Let's navigate back to our Video Survey Form and click on the Webform tab so that we arrive at the Form components page.
- Click on Edit next to the Terms of Use markup component and scroll down to the bottom of the component edit page.
- A new fieldset called CONDITIONAL RULES is available there. Let's expand the fieldset by clicking on its heading.
- Select Acceptance of Terms of Use in the Component drop down.
- Select Is one of as the logical Operator.
- Enter the Value of 1 and click on Save component.
- Now we apply a conditional rule to the Film Genre component by clicking on the Edit operation link.
- Scroll down and click on the CONDITIONAL RULES heading.
- Select Acceptance of Terms of Use from the Component drop down.
- Select Is one of as the logical Operator.
- Enter the Value of
0and click on Save component. - Let's have a look at how this has affected our form by clicking on the View tab.
- Selecting Yes, I accept under Acceptance of Terms of Use we see that the Film Genre grid is revealed and the Terms of Use markup component remains hidden.
- Selecting Tell me more causes the Terms of Use markup to replace the Film Genres grid.
We have achieved the objective of displaying certain components only when specific conditions are met. When we clicked on the View tab to load our form, neither the Terms of Use markup nor the Film Genres grid was visible to us. Their invisibility was due to the fact that there was no current selection in the Acceptance of Terms of Use.
Effectively, when translated to pseudocode, the two conditional rules we have specified look something like the following code:
If "Yes, I accept" is selected then show the Film Genres grid Else hide the Film Genres grid Endif If "Show me more" is selected then show the Terms of Use markup Else hide the Terms of Use markup Endif
On our initial view of the form neither option was selected, therefore the markup and grid were both hidden at the same time. As soon as we started making selections in the Acceptance of Terms of Use component the appropriate components would be displayed according to the rules we defined.
With clever use of JavaScript (as enabled by Drupal's integration of the jQuery library) the power of conditional fields is brought to any Webform page. No longer are we bound by the requirement of a multipage Webform to obtain conditional component display.
The exercise entitled Adding JavaScript tricks in Chapter 7, Theming Webform, gives us the basic underlying mechanics of how this module works under the hood.