How to Pass Framer CMS Variables (Job Title, Slug or SKU) Into Form Submissions

When you place a native Framer Form on a CMS Collection detail template — /jobs/[slug], /properties/[slug], /case-studies/[slug] or /products/[slug] — every page shares the exact same form. Without item context, an inquiry arrives in your inbox or CRM with the visitor's name and email, leaving your team to ask "Which job role or property listing did they apply for?"

CMS Hidden Field solves this cleanly without custom Code Overrides. It exposes up to 5 top-level string props in Framer's right-hand properties panel so Framer's native + → Set Variable button appears right next to every hidden field value.

---

Why CMS detail forms lose context

On a static landing page, you already know which page sent the lead, or you can capture the URL with Page Context. On a Framer CMS template, teams usually want structured CMS Collection fields alongside the submission:

• The exact Job Title, Department and Location on a careers board — routed into Notion, Airtable, Greenhouse webhooks or Slack.
• The Property ID, Listing Agent Email and Asking Price on a real-estate directory.
• The Product SKU, Variant Code and Unit Price on a wholesale quote form.
• The Event Name, Event Date and City on multi-city workshop RSVP pages.

Native Framer forms don't provide a multi-slot hidden component with bindable top-level CMS props, and hand-writing a custom React code component for every client project gets repetitive fast.

---

How CMS Hidden Field unlocks Set Variable (+)

Framer only shows the + → Set Variable pin on top-level ControlType.String controls (not inside nested array editors). CMS Hidden Field registers five clean top-level Name + Value pairs (Field 1 through Field 5) gated by a simple Fields counter:

1. On the Framer canvas, it renders a compact dark summary pill (CMS · job_title, job_slug, department) so designers can see and click it at any time.
2. In Preview and on the live published site, the wrapper collapses to display: none (zero pixels, zero Flex/Stack gap) and outputs standard <input type="hidden" name="..." value="..."> elements inside the <form>.
3. When the visitor submits, Framer serializes every non-empty hidden input right alongside Name, Email, File Upload resume links and custom questions.

---

Bind CMS fields in three steps

1. Open your CMS Collection page in Framer, select the Form component, and open FramerSend Fields.
2. Pick CMS Hidden Field, choose a starter preset (Job / Listing, Product / Quote, or Event / RSVP), and click Insert CMS Hidden Field.
3. Select the inserted badge inside your Form. In the right panel, click + next to Field 1 value → Set Variable → choose your CMS field (for example Title or Slug). Repeat for up to 5 slots and publish.

---

Presets, fallbacks and Framer honeypot safety

Three small details save hours of debugging on production Framer sites:

---

Common CMS form setups

• Careers & ATS pipelines: Pair CMS Hidden Field (job_title, job_slug, department) + Work Email or File Upload (CV PDF upload with zero storage setup) → send straight to Notion, Airtable or Slack.
• Real estate & marketplace inquiries: Bind listing_id, property_title and agent_code → route leads to HubSpot or GoHighLevel.
• B2B catalog quote requests: Bind product_sku, product_name and category + Number Stepper quantity → send to Google Sheets or Salesforce.

---

What we tested

We verified all 15 automated Playwright component and plugin-panel checks: rendering 1 to 5 hidden inputs inside FormData, stripping reserved honeypot field names (title → cms_title), falling back to the live <h1> heading and URL slug when Slot 1 is unbound, skipping empty values cleanly, and zero-pixel invisibility outside the Framer canvas.

CMS Hidden Field is live inside FramerSend Fields and documented at /fields/cms-field. Every FramerSend plan includes all 74 form fields and 110+ connectors from $5/month after a 14-day free trial.