How to Add Conditional Logic to Shopify Forms (2026)

Key takeaways

• Conditional logic shows or hides form fields based on a user’s previous answer.
• Shopify’s native contact form has no conditional logic — you need a form app or custom code.
• Typeform, Hulk Form Builder, and Jotform all support conditional logic out of the box.
• Custom JavaScript with show/hide logic is the native option for stores that want full design control.

To add conditional logic to a Shopify form, use a form tool that supports it (Typeform, Hulk Form Builder or Jotform) or add a few lines of JavaScript that show or hide fields based on an earlier answer. Shopify’s native contact form has no conditional logic of its own.

Instead of showing every field to every visitor, you show only the fields relevant to their situation. A B2B inquiry shows company size and industry fields; a B2C customer sees different fields entirely.

The result: shorter apparent form length, better data quality, and higher completion rates.

What is conditional logic in a form?

Conditional logic means: “Show field B only if the user answered X to field A.”

A practical example for a Shopify store:

• Question 1: “Are you a business or personal customer?” (dropdown: Business / Personal)
• If Business: show fields for Company Name, Company Size, Industry
• If Personal: skip those fields, go straight to message

Without conditional logic, you’d need to show all fields to everyone and mark most as optional — a messier experience.

Option 1 — Typeform (best UX for conditional logic)

Typeform has one of the cleanest implementations of conditional logic. Each question can branch based on previous answers, creating a fully personalized form flow.

How to set it up:

1. In your Typeform form editor, add your branching question (e.g., a Multiple Choice field)
2. Go to Logic → add a Logic Jump
3. Set the condition: “If answer is ‘Business’, go to Business Name question. If answer is ‘Personal’, go to Message question.”

Typeform handles the UX automatically — it shows only the relevant questions in sequence.

Option 2 — Hulk Form Builder (Shopify app)

Hulk Form Builder adds conditional logic to the forms you build in the app (not to Shopify’s native contact form).

Setup:

1. Install Hulk Form Builder from the App Store
2. Create your form, add all fields
3. Select a field → find the “Conditional logic” section
4. Set rules: “Show this field when [field name] equals [value]”

For a Business vs. Personal example: create the “Customer type” dropdown first, then add conditional rules to Business-specific fields.

Option 3 — Jotform

Jotform has robust conditional logic, including:

• Show/hide fields based on previous answers
• Jump to different form pages (in multi-step forms)
• Calculate values based on inputs
• Send different notification emails depending on answers

Setup: In Jotform’s form builder, select any field → Settings → Conditions → Add a new condition.

Embed the resulting form on your Shopify page via iframe.

Option 4 — Custom JavaScript (no app dependency)

For stores that want full design control and no third-party app overhead, conditional logic can be implemented with straightforward JavaScript.

Example setup:

HTML structure:

<select id="customer-type" name="contact[Customer Type]">
    <option value="">Select...</option>
    <option value="business">Business</option>
    <option value="personal">Personal</option>
</select>

<div id="business-fields">
    <input type="text" name="contact[Company Name]" placeholder="Company name" />
    <input type="text" name="contact[Industry]" placeholder="Industry" />
</div>

JavaScript:

var customerType = document.getElementById('customer-type')
var businessFields = document.getElementById('business-fields')

// Hide the business fields once JavaScript runs, so visitors without JavaScript still see them
businessFields.style.display = 'none'

customerType.addEventListener('change', function () {
    if (this.value === 'business') {
        businessFields.style.display = 'block'
    } else {
        businessFields.style.display = 'none'
    }
})

In a Shopify contact form, name the fields contact[...] so they appear in the email you receive.

This is clean, fast, and has zero external dependencies. The tradeoff: you write and maintain the code, and it needs to be added to your theme’s section or snippet files.

Describe this to Fudge, the AI operator for Shopify stores, instead: “Build a contact form with conditional logic — if the customer selects ‘Business’, show fields for Company Name and Industry. If they select ‘Personal’, hide those fields.” Contact forms, quote requests and wholesale applications are part of its popup and form builder, so the form is a section in your theme, shown as a working draft before it goes live.

To split a long form into steps instead, see Create Multi-Step Forms in Shopify.

Common use cases for conditional logic in Shopify

B2B vs B2C inquiry forms. Show company information fields only for business customers.

Product-specific inquiry routing. “Which product category does your question relate to?” → each answer routes to different follow-up fields and sends the submission to a different department email.

Wholesale application forms. “What is your business type?” (retail, online, wholesale) → show relevant fields for each.

Returns and support requests. “Select your issue type” (damaged item, wrong item, not delivered, other) → each issue type reveals different follow-up fields.

Event or service booking. “Select service type” → show different scheduling and detail fields for each service.

To build the contact form itself, see Add a Custom Contact Form in Shopify.

Testing conditional logic

After setting up conditional logic, test every path through the form:

1. Select each option in your branching question
2. Verify the correct fields show/hide
3. Submit the form via each path
4. Confirm the submission contains the correct data
5. Test on mobile — conditional logic animations sometimes behave differently on touch devices

For JavaScript implementations, also test with JavaScript disabled to ensure the form degrades gracefully (ideally shows all fields rather than showing nothing).

FAQ