Conditional LogicPRO

Conditional Logic provides a way for you to create dynamic forms that change according to the way a user interacts with your form.

An example of conditional logic might be that you might want to show a particular field or block of text if a checkbox field is checked. Or you might want to show a warning if a range slider is greater than 50%. The possibilities are endless.

Other examples:

  • Automatically save the form progress when a ‘Next tab’ button is clicked
  • Show shipping address fields is a ‘Use separate shipping address’ checkbox is checked
  • Make the form turn green all required fields are complete and the form validates
  • Show an ‘Almost there!’ message when a progress bar is equal to or great than 75%
  • Fire an email action if a user clicks a button
  • Push partial form completions to an email marketing connector such as Constant Contact or MailChimp
  • Show additional form fields if the hue of a color field exceeds a certain value
  • Fire JavaScript when a field is clicked on or changed

Adding Conditional Logic

To add conditional logic to your form:

  1. Edit a form
  2. Click the ‘Conditional Logic’ icon at the top of the page. The Conditional Logic sidebar will open.

WS Form PRO - Conditional Logic

Conditional Logic and the Debug Console

The debug console logs all conditional logic activity in the ‘Log’ tab.

Conditional Log Reference

Form

IF
NameField TypeJS EventCase Sensitive
Validatedwsf-validateOptional
Not validatedwsf-validateOptional
Clickedmousedown, touchstartOptional
Mouse overmouseoverOptional
Mouse outmouseoutOptional
THEN / ELSE
NameOptions
Submit
Save
Add wrapper classUser Defined
Remove wrapper classUser Defined
Run JavaScript

Tab

IF
NameField TypeJS EventCase Sensitive
Clickedmousedown, touchstartOptional
Mouse overmouseoverOptional
Mouse outmouseoutOptional
THEN / ELSE
NameOptions
Click

Section

THEN / ELSE
NameOptions
Set visibilityVisible, Hidden
Set disabledNot disabled, Disabled
Add wrapper classUser Defined
Remove wrapper classUser Defined

Field

IF
NameField TypeJS EventCase Sensitive
EqualsNumber
Does not equalNumber
Greater thanNumber
Less thanNumber
Greater than or equal toNumber
Less than or equal toNumber
EqualsTextOptional
Does not equalTextOptional
ContainsTextOptional
Does not containTextOptional
Starts withTextOptional
Does not start withTextOptional
Ends withTextOptional
Does not end withTextOptional
Is blankOptional
Is not blankOptional
Row checkedOptional
Row not checkedOptional
Row selectedOptional
Row not selectedOptional
Is valid email address
Is not a valid email address
Is valid URL
Is not a valid URL
Matches JS regexText
Does not match JS regexText
Clickedmousedown, touchstartOptional
Mouse overmouseoverOptional
Mouse outmouseoutOptional
FocussedfocusOptional
BlurredblurOptional
ChangedchangeOptional
On inputinputOptional
Key UpkeyupOptional
Key DownkeydownOptional
EqualsDatetime
Does not equalDatetime
Greater thanDatetime
Less thanDatetime
Equals (#RRGGBB)Text
Does not equal (#RRGGBB)Text
Hue greater thanNumber
Hue less thanNumber
Saturation greater thanNumber
Saturation less thanNumber
Lightness greater thanNumber
Lightness less thanNumber
reCAPTCHA valid
reCAPTCHA invalid
Signed
Unsigned
File selected
No file selected
File count equalsNumber
File count does not equalNumber
File count greater thanNumber
File count less thanNumber
Matches fieldTextOptional
Does not match fieldTextOptional
Character count equalsNumber
Character count does not equalNumber
Character count greater thanNumber
Character count less thanNumber
Word count equalsNumber
Word count does not equalNumber
Word count greater thanNumber
Word count less thanNumber
THEN / ELSE
NameOptions
Set visibilityVisible, Hidden
Set requiredNot required, Required
Focus
Set valueUser Defined
Set disabledNot disabled, Disabled
Set read onlyNot read only, Read only
Set valueUser Defined
Set valueUser Defined
Set colorUser Defined
Set valueUser Defined
Set valueUser Defined
Set valueUser Defined
Set valueUser Defined
Set custom validityUser Defined
Select
Deselect
Reset
Check
Uncheck
Set row required
Set row not required
Set row disabled
Set row not disabled
Add row classUser Defined
Remove row classUser Defined
Set row visible
Set row not visible
Focus row
Set row custom validityUser Defined
Set HTML
Set content
Set label
Click
Add wrapper classUser Defined
Remove wrapper classUser Defined
Add field classUser Defined
Remove field classUser Defined
Reset
Reset
Set requiredNot required, Required

Action

THEN / ELSE
NameOptions
Run
Enable on form save
Enable on form submit
Disable on form save
Disable on form submit