In this tutorial, we’ll guide you on how to use the show/hide logic functionality in single-step forms.
Note: Show/Hide logic is only available in single-step (classic) forms. In multi-step forms, this functionality is replaced by the "Jump" option, which serves the same purpose of dynamically showing or hiding fields based on user responses. This ensures a personalized form experience in both form types.
This will allow certain fields to appear or disappear depending on the user’s response, providing a smooth and dynamic user experience.
What is Show/Hide logic?
Show/Hide logic allows you to show or hide specific fields in your form based on the user's previous answers.
It creates a dynamic form experience, guiding users through only the relevant questions.
This functionality is ideal for creating customized user experiences and streamlining the form submission process.
What are single-step forms?
In single-step or classic forms, all questions are visible on a single page by default.
Even if you add multiple pages using the "+New Page" field, the form will still follow the basic behavior of a single-step form.
Follow this Step-by-step guide to adding Show/Hide logic in single-step forms:
Step 1: Create your form
Start by creating your form in the Formaloo dashboard.
🧩 Template:
For a ready-made solution, you can use this School consultation form Template to easily set up show/hide logic based on user roles (student, parent, educator) and customize the form experience.
For example, let's consider the school consultation form template, which uses show/hide logic based on the user’s selection in the “I'm” dropdown field.
The field options can be:
Student
Parent
Educator
Depending on the user's choice, the form will display relevant fields.
Step 2: Set up Show/Hide logic
Click on the first question (in this case, “I’m”).
Navigate to the Logic tab on the right-side menu.
Click on Advanced Logic to define your rules.
Example 1: Show fields based on user selection
Condition: If the user selects Student from the dropdown, show the fields related to student consultations (e.g., My name is).
Condition: If the user selects Parent, show the parent-related help request field. (e.g., My child's name is).
Condition: If the user selects Educator, show the educator-specific fields. (e.g., The student's name is).
Step 3: Use page breaks wisely (Optional)
Divide your form into sections: If you want to divide the form into sections using page breaks, ensure the show/hide logic is applied only to the fields available on the current page.
Important tip: Logic based on a question on a different page may lead to errors like blank pages or disrupted flow. For instance, if you show a field on Page 2 based on a selection on Page 1, make sure the logic only references fields that are on Page 1.
Step-by-step guide for logic with page breaks
1: Organize your pages
Ensure that the questions on each page are self-contained. For instance, if you use a Single-choice question on Page 1 and want to show or hide other questions based on the answer, those conditions should apply only to fields on Page 1.
2: Apply logic based on current page fields
If you use page breaks in your form, ensure that the conditions you set are based only on the fields before the page break. Here’s why:
Example: Let’s say you want to show a field on Page 2 based on an answer on Page 1. This could result in a blank page because the logic cannot reference fields across different pages.
To avoid this:
After adding a page break, ensure all logical rules apply to fields before the break.
If you want to control questions on Page 2, the logic should be based on the answers from Page 2, not the previous page.
Step 4: Preview and test your form
Preview the form to ensure the logic works as expected.
Test the flow by selecting different options and confirming that the corresponding fields appear.
📝 Additional Insight: Automate actions with "On Update" logic
Looking to streamline your workflows even further? With "On Update" logic, you can automate actions not just when a form is submitted, but whenever a response is updated.
💡 Why use "On Update" logic?
✔️ Automatically notify users when key responses change.
✔️ Reassign tasks based on updated priorities.
✔️ Trigger webhooks to sync data with external tools.
✔️ Send Slack messages to keep teams informed in real-time.
🔗 Learn more about how "On Update" logic works and how to set it up:
👉 What is "On Update" logic and how it works? 🚀
Visualizing logic in single-step forms with the Logic Map
When adding conditional logic to single-step forms, a logic map provides a visual breakdown of each rule and how questions appear based on user responses.
This is especially useful for single-page forms or forms with page breaks, where keeping the flow intuitive is key.
Benefits of using the Logic Map for single-step forms
Clarify Show/Hide rules: With a map, see exactly where each show/hide condition leads, confirming that only relevant questions display based on user input.
Prevent blank pages: When using page breaks, the logic map ensures conditions are based on fields within the same page, helping avoid errors that result in blank pages.
Optimize form flow: A visual map allows you to refine how questions appear sequentially, creating a more streamlined experience without unnecessary steps.
Accessing and using the Logic Map
Open the Logic tab: In the form editor, go to the Logic tab, where you can set up show/hide rules.
Select the Logic Map overview option: The logic map shows a layout of each field and displays which ones appear based on conditions, especially useful for forms with multiple sections.
Review page transitions: When using page breaks, confirm that logic references only fields within the current page, ensuring a smooth flow from start to finish.
Using a logic map for single-step forms enables you to build efficient, responsive forms that adapt seamlessly to each user’s inputs, whether on a single page or across multiple sections.