How do I add conditional logic to online forms?

Conditional logic in online forms means the form changes based on previous answers — for example, showing or hiding fields, skipping sections, or sending people down different paths.

Common ways to add it

1. Show/Hide fields

   • If someone selects “Yes,” reveal more questions.
   • If they select “No,” hide them.

2. Branching / Skip logic

   • Send users to different pages or questions depending on their answer.

3. Required-if logic

   • Make a field required only when a certain condition is met.

4. Calculated logic

   • Use answers to calculate a score, price, or outcome.

How to do it

If you’re using a form builder

Most tools have built-in conditional logic:

• Google Forms: section branching
• Typeform: logic jumps
• Jotform: conditions and actions
• Wufoo / Cognito Forms / Formstack: advanced rules
• Microsoft Forms: branching

Typical steps:

1. Add your questions.
2. Open the form’s Logic / Rules / Branching settings.
3. Choose:
   • Condition: e.g., “If answer = Yes”
   • Action: e.g., “Show question 5” or “Go to section 3”
4. Test the form thoroughly.

If you’re coding your own form

You can implement conditional logic with JavaScript by:

• listening for input changes,
• checking values,
• showing/hiding elements,
• toggling required,
• redirecting or changing steps.

Example:

<label>
  Do you have a pet?
  <select id="pet">
    <option value="">Choose</option>
    <option value="yes">Yes</option>
    <option value="no">No</option>
  </select>
</label>

<div id="petType" style="display:none;">
  <label>
    What kind of pet?
    <input type="text" />
  </label>
</div>

<script>
  const pet = document.getElementById('pet');
  const petType = document.getElementById('petType');

  pet.addEventListener('change', () => {
    petType.style.display = pet.value === 'yes' ? 'block' : 'none';
  });
</script>

Best practices

• Keep logic simple and easy to follow.
• Don’t overwhelm users with too many branches.
• Test every path.
• Make sure hidden required fields don’t block submission.
• Ensure forms still work well on mobile and with accessibility tools.

If you want, I can show you:

• how to do this in a specific form tool,
• or how to build it with HTML/JavaScript.