Be sure to look at the screen shots in the gallery

Requires Stacks 5.1 or StacksPro

Purpose:

F6Brancher allows you to add branching to Foundation 6 forms by comparing a field input to a set value and displaying another section of the form depending on the outcome.

Settings
  • Show Instructions: Shows these instructions in preview. Use only once per page.
  • Target Step: The step name. EX:step-1
  • Field: The field name in the step you want to compare.
  • Case/Logic: Choose to use case statement or logic expressions. Note this control effects what other controls display.
  • Operator: When Using Logic expression. The way to compare the values.
  • Value: When Using Logic expression. The value to compare with the field value.
  • More: When Using Logic expression. Allows you to add another expression that is AND(&&) or OR(||). If you choose None Only the expression above will be evaluated.
  • And/Or: When Using Logic expression. Allows you to add another expression that is And(&&) or Or(||). If you choose AND both expressions must be true. If you Choose OR either expression must be true.
  • Target Step: The And/Or field name in the step you want to compare.
  • Target Field: The And/Or field name in the step you want to compare.
  • Operator: When Using And/Or Logic expression. The way to compare the values.
  • Value: When Using And/Or Logic expression. The value to compare with the field value.
  • Case Statements: When using Case instead of logic expressions. A YAML style list of: Value:Step,Value:Step,...
  • Turn on Logging: For debugging. When checked logging will display in browser console. Use only once per page.
  • Section Buttons: Each section requires a "Step Complete Button. Use the F6 Button Group plain button(not link). Add a Custom Attribute of id with a value of step-N-complete where N is the current step. If needed you can also add a "Back" button. The custom attribute id would be: step-N-back. The final form step will need a normal submit button.

Basic use

F6Brancher lets you build branching Foundation 6 forms by breaking your form down into steps. 

To create a branched form, drag the F6 form onto the page as normal.
For each section(step) of the form drag on a F6Brancher stack. Add your form fields inside the F6Brancher stack and create the branching logic.
Each step in the form must be have a target step Example: step-1, step-2...step-9 etc.
For each step, add the Field name(the actual value of the name parameter of that input). This is the field that you will compare to the value you set.
Choose between Case and Logic statements.
Build out the formula. If using logic statements you can add a second argument using And/Or logic as well.
If you are using Case statements you will add a YAMAL style list of keys and values. EX.: red:step3,blue:step4,green:step6... the key is compared to the user input and the value is the step to go to if true.
For each step add a F6 button group (plain button not link etc.) add a custom attribute: id with a value of step-N-complete where N is the step number. You can also add a second "Back" button with a custom id attribute of step-N-back if needed. On the final step add a submit button to submit the form.