Overview
Conditional logic is the process of changing program behavior based on whether certain conditions are met. It allows for dynamic responses and actions based on user input, data values, or other predefined criteria. In essence, it's about creating “if-then” scenarios within a system.
With ShortStack, you can create a variety of forms and campaigns that use conditional logic to enhance the user experience and streamline data collection.
Example
Let’s walk through a common ShortStack use case: displaying location-specific options based on a user’s state selection.
Example scenario:
If a user selects “New York” as their state, show a list of stores located in New York.
This logic can be repeated for multiple states, depending on where your storefronts or venues are located.
Configuring Conditional Logic
This guide covers how to set up the necessary Field and Action Widgets. It assumes you already have a Form Container in your campaign. If not, refer to the Form Container help doc for setup instructions.
1. Add the 'State' Standard Field
- Drag a Field Widget into your Form Container.
- Under Standard Fields, select State or Province.
- By default, this field displays U.S. states and territories. Edit the list as needed.
- Adjust any additional field settings to fit your campaign.
2. Add a Container Inside the Form Container
- Add a Container Widget within the Form Container.
- Set the container’s visibility to Starts Hidden.
This won’t impact form functionality—it simply helps with layout and logic targeting.
3. Add a List Field
- Drag a Field Widget into your Form Container, and place it inside the Container from Step 2.
- Under Custom Fields, select List.
- Enter your store or venue names as list options.
- Set Validation to either Require when visible or Never require, depending on your data collection needs.
Pro Tip: If you already have a list of stores, you can reuse custom fields in other forms! Select the Custom Field name in the list on the right when first selecting your field type.
4. Add Action Widgets
Now it's time to build the logic with Action Widgets.
4a. Action – Show New York Locations
- Add an Action Widget to the top of the campaign or directly above the Form Container.
- Under When, select: State is Changed.
-
Under And If, select: State is equal to and enter the list value.
Tip: If you didn’t change the state names, the value for New York will be NY.
(The pipe
|separates the label from the value—e.g.,New York|NY.) - Under Then, select the hidden container with the list to Show.
- Click Save and Exit.
4b. Action – Hide New York Locations
- Add another Action Widget at the same position.
- Under When, select: State is Changed.
- Under And If, select: State is not equal to and enter the value NY, or your list value.
- Under Then, select the same container in 4a to Hide.
- Click Save and Exit.
Test your campaign in Preview Mode to see the conditional logic in action. Repeat the setup for any additional states as needed.
Additional Conditional Logic Scenarios
Now that you understand the basics, you can explore more advanced use cases, such as:
- Adding age gates.
- Revealing additional fields only when a special code is entered.
- Showing a coupon code if the user provides their phone number for text alerts.
The possibilities are endless!
Special Considerations
Field Validation
If a Field Widget is set to Require Always but is hidden (either on its own or inside a container set to Starts Hidden), a warning will appear in the Edit Widgets panel. Click the warning icon to automatically update the setting to Require when visible.
Additionally, when adding a new Field Widget inside a hidden container, the required setting will default to Require when visible to avoid validation issues.
Smart Labels
Want to target multiple widgets in a single action? Use Smart Labels.
- Add Smart Labels in the widget’s Extras settings.
- Then, use the label in your Action Widget setup for easier targeting.
Learn more about using Smart Labels in Action Widgets.