How to Show or Hide Fields in a Framer Form (Conditional Logic Without Code)

Asking every visitor every possible question kills form completion rates. An individual freelancer shouldn't have to fill out Company Name, VAT ID and Procurement Contact, while an enterprise buyer choosing the Business plan does need those exact fields.

Conditional Fields brings real show/hide logic to native Framer forms — keeping your own Framer typography, animations and layout while revealing follow-up questions only when an earlier answer calls for them.

---

Why shorter conditional forms convert better

Progressive disclosure solves the tug-of-war between marketing (who want higher completion rates) and sales or ops (who want richer qualification data):

• Fewer visible inputs up front. Visitors start a calm 3-field form instead of staring at a 14-field wall of optional boxes.
• Contextual follow-ups. Show a "What could we improve?" textarea only when a Star Rating or NPS Score is low, or show dietary notes only when Attending in person is checked.
• Cleaner CRM payloads. Irrelevant fields stay out of your HubSpot, Airtable or Notion records instead of arriving as stale default values.

---

Why hiding fields with CSS or variants breaks submission

A common Framer workaround is toggling layer opacity or switching component variants to hide an input visually. In real HTML forms, visual hiding causes three painful bugs:

---

How Conditional Fields works in native Framer forms

Conditional Fields is a zero-dependency code component written straight into your Framer project (zero external scripts, zero network requests):

1. 8 built-in operators — equals, does not equal, contains, does not contain, is empty, is not empty, is checked and is not checked, with Show or Hide actions and optional case matching.
2. Watches any input type — native text inputs, selects, radio groups, checkboxes, and custom code-component fields like Image Choice, Button Choice or Star Rating.
3. True HTML form lifecycle — hidden targets receive display: none, disabled and have required suspended while hidden. Turning on Required when shown enforces completion only when the question is actually on screen.
4. Designer-friendly canvas — on the Framer canvas every layer stays visible so you can style freely, while a compact rule badge shows which condition controls which fields.

---

Add show/hide rules in three steps

1. Select your native Form on the Framer canvas and open Conditional Fields (or FramerSend Fields) → click Insert condition.
2. In the right-hand properties panel, set Watch field (for example Plan), choose the condition (equals → Business), and enter the target field names separated by commas (Company, Team size).
3. Toggle Required when shown if those follow-up fields must be answered when visible, then test in Preview and publish.

---

Chained rules, connected frames and live calculators

For richer intake flows, rules compose cleanly without writing a single line of code:

• Chained dependencies: drop one condition per rule — Rule 1 shows Plan Tier when Account Type equals Team, and Rule 2 shows SSO Provider when Plan Tier equals Enterprise.
• Connected Framer frames: instead of listing field names, connect entire Framer frames to the component's Content connector to toggle section headers, dividers, callout cards and multi-column rows together.
• Multi-Step + Calculator aware: pair Conditional Fields with Multi-Step Form to tailor Step 2 based on Step 1, or pair it with Calculator so hidden optional add-ons automatically contribute 0 to the live quote total, then route high-tier leads to a custom booking page with Conditional Redirect.

---

What we tested

We verified all 23 automated Playwright harness checks plus live published Framer multi-step submissions: verifying that hidden required fields never block submit and never appear in FormData, restoring required when revealed, case-insensitive dropdown matching, checkbox is checked frame toggling, mutation-observed hidden inputs (such as Star Rating and Image Choice), form reset re-evaluation, and leaving Framer's aria-hidden honeypot inputs untouched.

Install Conditional Fields on the Framer Marketplace or get it alongside all 72 Framer form fields and 110+ connectors from $5/month after a 14-day free trial.