4d:I[267044,["/creators-assets/_next/static/immutable/chunks/36c08p67t0nml.js","/creators-assets/_next/static/immutable/chunks/3ayu63s3pbx5h.js","/creators-assets/_next/static/immutable/chunks/2qqxwi6m3n33t.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/3k0o12ps7rnq6.js","/creators-assets/_next/static/immutable/chunks/2fw--q9y_1nc-.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/271g_l-8c77ee.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/31xze_yiju0_q.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/42u1pxaq7eeka.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2gb4kwi-0_ftg.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/15z5hu5cixks0.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/41gwzxjlh6wda.js","/creators-assets/_next/static/immutable/chunks/0tb62zkq3ytzl.js","/creators-assets/_next/static/immutable/chunks/3wj273i6wglef.js","/creators-assets/_next/static/immutable/chunks/0gsy0nazl2cht.js","/creators-assets/_next/static/immutable/chunks/2_dm0za3asre2.js","/creators-assets/_next/static/immutable/chunks/0y1e6y4tai9kl.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/1gasll1b30-2c.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/15ey03cfkkg-y.js","/creators-assets/_next/static/immutable/chunks/1-gdi7ej49wy6.js","/creators-assets/_next/static/immutable/chunks/3oj8b9u7wi0dw.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/29vwz5igguxfe.js","/creators-assets/_next/static/immutable/chunks/3f2ccywlofkgw.js","/creators-assets/_next/static/immutable/chunks/0xifckmqg-iju.js"],"S"] 4e:T19bd,

A production-ready country selector that feels like it belongs in your product — not bolted on.

Drop it into any form, checkout flow, or onboarding screen. It silently detects the visitor's country via IP on page load and pre-selects it, so most users never have to touch it.

─────────────────────────────

FEATURES

─────────────────────────────

📍 IP Geo-Detection

Automatically detects and pre-selects the visitor's country using their IP address. Shows an animated "Auto-detected" badge next to the label. Disappears the moment the user picks manually. Toggle it off entirely if you don't need it.

🔍 Live Search with Keyboard Navigation

Built-in search filters the list as you type. Full keyboard support: Arrow keys to navigate, Enter to select, Escape to close. Animated clear button appears when there's a query. Result count shown at the footer.

🏳️ Flag Emojis

Generated programmatically from ISO codes — no image assets, no CDN, zero extra weight.

🌍 90+ Countries Built-In

Comprehensive global list, alphabetically sorted, including a "Global / Other" fallback option.

✏️ Editable Country List — 3 Modes

• Default: all 90+ countries

• Restrict: enter comma-separated ISO codes (e.g. US, GB, AU) to show only those, in that order

• Custom: replace the list entirely via the panel with your own name + code pairs

🎯 Smart Dropdown Positioning

The dropdown uses fixed positioning so it always escapes parent overflow:hidden frames — no clipping, no matter how the component is nested. Automatically flips upward if there's not enough space below.

📐 Width Control

Toggle between full-width (fills the container) or set a fixed pixel width via slider.

🎨 Fully Customisable

Every visual detail is exposed as a Framer property control:

• Accent colour, label, helper text, placeholder

• Field background, text, border colour, radius, width, padding

• Dropdown background, border, corner radius, shadow (BoxShadow control)

• Dropdown max height, row hover colour

• Font family + font size

• Element gap

• Required field marker

♿ Accessible

Correct ARIA roles: listbox, option, aria-expanded, aria-selected. Focus management on open/close. Shimmer skeleton while geo-detecting so the UI never looks broken.

─────────────────────────────

HOW TO USE

─────────────────────────────

1. Insert the component onto your canvas

2. Resize it or enable Full Width in the panel

3. Turn on IP Geo-Detection if you want automatic pre-selection

4. Optionally restrict or replace the country list

5. Style everything from the right panel — no code required

─────────────────────────────

REQUIREMENTS

─────────────────────────────

• Framer with code component support

• No external dependencies beyond Framer Motion (already included in Framer)

• Geo-detection uses the free GeoJS API (no API key required)

─────────────────────────────

PERFECT FOR

─────────────────────────────

Contact forms · Checkout flows · Onboarding screens · Lead capture · SaaS sign-up · Any project with a global audience

✅ Eligible for a Refund

Refunds are considered on a case-by-case basis in the following situations:

Duplicate purchase — You were charged more than once for the same component.
Non-delivery — You completed payment but never received access to the component.
Critical, unrepairable defect — The component does not function as described in the listing, and the issue cannot be resolved within 7 days of you reporting it.

To request a refund under any of the above, contact me within 14 days of your purchase date with your order details and a description of the issue.

❌ Not Eligible for a Refund

Refunds will not be issued for:

Change of mind or no longer needing the component.
Purchasing the wrong product — please read the listing and review all features before buying.
Inability to use the component due to an incompatible Framer plan or setup that does not meet the stated requirements.
Dissatisfaction with visual style or aesthetic preferences — all customisation options are clearly documented in the listing.
Issues caused by modifications you made to the component's code.
The free GeoJS API used for geo-detection experiencing downtime or changes on their end (this is a third-party service outside my control).

🛠️ Before Requesting a Refund — Try Support First

Most issues can be resolved quickly. If something isn't working as expected, reach out before opening a dispute:

Describe the issue in a message on Contra.
Include your Framer version, a screenshot or screen recording, and steps to reproduce.

I'm committed to making sure the component works exactly as described and will prioritise fixing legitimate bugs promptly.

🔄 Updates & Ongoing Support

Bug fixes and compatibility updates are provided free of charge to existing buyers.
Feature additions may or may not be included depending on scope.
Purchasing this component does not entitle you to a full support contract or custom development work.

📬 Contact

To raise a refund request or report a technical issue, message me directly through your Contra dashboard. Please include your order reference and a clear description of the problem.

This policy applies to purchases made through the Contra marketplace. Contra's own platform terms may also apply.

4f:T175c,

Bring the premium, high-converting Typeform user experience directly into your native Framer project—without the ugly third-party embeds or slow script lag.

Framer's built-in form is a single page. This component isn't. Multi-Step Form gives you a fully animated, question-by-question flow — the kind that consistently outperforms static forms on completion rate — without writing a single line of code.Every step is configured directly from the Framer properties panel. Add a step, pick a field type, set a label, done. No external tools, no embeds, no iframes.

✨ Typeform-Grade Premium Features

Stationary Header & Value Prop: Keep your main headline permanently anchored at the top while the interactive input fields slide beautifully underneath.
Keyboard Navigation Hotkeys: Just like Typeform, users can blast through choice menus (Contact Grids) using lightning-fast A, B, C, D key triggers.
Smart Geo-Location Lookup: Automatically detects and fills out the user's country selection instantly to drop form abandonment rates.
Granular Layout Sliders: Total freedom over design execution. Adjust card padding, vertical input spacing, text gaps, and border radiuses via native Framer layout sliders.
Dynamic String Piping: Pass user answers forward dynamically using smart token variables {{ like_this }}.
Production-Ready Endpoints: Fully independent routing. Send clean JSON or standard form-data directly to Zapier, Make, n8n, Webhooks, or Google Sheets.

🛠️ Setup in Seconds

Drop the component onto your canvas frame.
Customize your step sequence and choose your input engines (Email, Text, Grid, Dropdown, or Checkbox).
Connect your automated webhook URL.
Tweak the spacing gaps and color variables to brand it seamlessly to your landing page!

📋 Complete Feature List

Form Structure

Unlimited steps — add/reorder/remove via the Framer properties panel, zero code
Optional welcome cover screen — toggleable, with custom icon, title, subtitle, and CTA button text
Custom success screen — editable title, body copy, CTA button, and target URL
Auto-redirect after submission — configurable 0–15 second delay to any URL

Field Types (8 total)

Short Text — single-line open input
Email — with real-time format validation
URL — with real-time format validation
Dropdown Select — comma-separated choices
Single Checkbox — for agreements/consent
Multiple Checkboxes — multi-select option group
Country Dropdown — 30-country built-in list, with IP-based auto-detection
Button Grid — 2-column clickable option tiles with keyboard hotkeys (A, B, C…)

Smart UX Behaviours

IP-based geo-detection — auto-fills the country field on page load via GeoJS
{{token}} text interpolation — reference any previous answer inside later labels or placeholders (e.g. "Thanks {{name}}, what's your email?")
Keyboard-first navigation — Enter advances every step; A/B/C/D hotkeys select button-grid options instantly
Auto-focus — input receives focus automatically after each step transition completes
Per-step validation — required field enforcement, email format check, URL format check, with inline error messages
Newsletter opt-in checkbox — optional toggle attached to the email field step

Animations

Direction-aware slide transitions — steps slide left on advance, right on back
Animated progress bar — smooth fill driven by Framer Motion
Animation speed control — slider from 0.05s to 1.0s

Integrations & Data

Webhook URL — point to any endpoint
JSON payload mode — for Zapier, Make, N8N
URL-encoded form-data mode — for Formspree, Google Sheets via App Script
Event name routing key — tag each form with a unique identifier to filter submissions across shared endpoints
Submission envelope — includes date, time, form ID, event name, and all field values
Live console payload logger — real-time JSON preview in browser DevTools during setup

Design Controls (all in the properties panel)

Accent color (drives buttons, progress bar, focus rings, hotkey badges)
Card background, corner radius, border width/colour, box shadow
Custom font family
Three-tier colour system: title/label, body text, muted details
Field fill colour, text colour, border radius, border width/colour, vertical padding
Card padding, inner element gap, header gap
Progress bar: top edge / bottom edge / hidden
Step counter ("1 of 4"): show/hide
Static persistent header + subtitle (stays visible across all steps)
Framer design token support — native colour token variables work out of the box

4c:["$","$L4d",null,{"value":{"fallback":{"$inf$activity-creator-f3311b7c-05d1-49b9-9cb1-49898a4bcba6-all:/unified/creator/f3311b7c-05d1-49b9-9cb1-49898a4bcba6/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:f3311b7c-05d1-49b9-9cb1-49898a4bcba6:/unified/posts/?creator=f3311b7c-05d1-49b9-9cb1-49898a4bcba6&with=reposts":[{"data":[{"id":"019ecc35-b255-7958-b69d-59f4a8318939","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f3311b7c-05d1-49b9-9cb1-49898a4bcba6","name":"Adam Pavlakovich","slug":"adam-pavlakovich","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"FagFQ5LwZ7wxtyKNm61P","resolved":true,"title":"Geo Country Selector","body":"$4e","bodyJson":null,"introduction":"Dropdown Country Selector ","slug":"geo-country-selector","author":{"framerUserId":"f3311b7c-05d1-49b9-9cb1-49898a4bcba6","name":"Adam Pavlakovich","slug":"adam-pavlakovich","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/FagFQ5LwZ7wxtyKNm61P/geo-country-selector-Z7UG0KzKFnZp8FwiAGYnlHLWO6zLKE","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-06-07T05:39:27.549Z","updatedAt":"2026-06-15T07:31:35.633Z","publishedAt":"2026-06-15T16:55:31.669Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://uplifted-surprise-678863.framer.app/countryselector","price":"10","paymentUrl":"https://contra.com/payment-link/hFOX9cYF-geo-country-dropdown-selector","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"2cfRaK5gj2hTFb6ahzUh","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-15T16:55:31.669Z","updatedAt":"2026-06-15T16:55:31.669Z","type":"post"},{"id":"019ea27c-f5ea-72da-8511-acca0d7d93c4","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f3311b7c-05d1-49b9-9cb1-49898a4bcba6","name":"Adam Pavlakovich","slug":"adam-pavlakovich","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"NWeLFvRQnnVr95rY4yL2","resolved":true,"title":"Typeform Style Form","body":"$4f","bodyJson":null,"introduction":"Typeform-like premium multi-step form.","slug":"typeform-style-form","author":{"framerUserId":"f3311b7c-05d1-49b9-9cb1-49898a4bcba6","name":"Adam Pavlakovich","slug":"adam-pavlakovich","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/NWeLFvRQnnVr95rY4yL2/typeform-lead-form-LSiSQKIDmUDnbLgDzBwZvyfai8KL1H","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-06-06T07:06:19.875Z","updatedAt":"2026-06-07T15:06:20.704Z","publishedAt":"2026-06-07T14:29:18.954Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://uplifted-surprise-678863.framer.app","price":"10","paymentUrl":"https://contra.com/payment-link/u8BKAGds-typeform-like-multi-step-form-for-framer","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"XZ5lJLCv4vZmrdSJQwHl","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-07T14:29:18.954Z","updatedAt":"2026-06-07T14:29:18.954Z","type":"post"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L50"}]