Add a searchable country selector to any form input
Turns any text input into a filterable country dropdown. Search by name, select with a click or keyboard, and submit only the country name to your form. No external requests. No dependencies.
Webflow has no built-in country selector. Building one from scratch means sourcing a country list, writing search and filter logic, handling keyboard navigation, managing dropdown positioning, and ensuring the submitted value is clean and consistent - all in custom JavaScript. Most solutions reach for a third-party library that adds unnecessary weight, external dependencies, and in many cases cookies or tracking.
The Fractional Country Selector Kit solves this with a single lightweight script and a single custom attributes applied directly in the Webflow Designer.
Here is what you need to know:
- The Fractional Country Selector Kit works by turning any standard text input inside a Webflow form into a searchable country selector. As the user types a filtered dropdown appears beneath the input showing matching countries. The country list is bundled directly into the kit - no external API calls, no runtime dependencies, and no risk of a third-party service going down and breaking your form.
- Search is prioritised intelligently. Countries whose names start with the query appear first, followed by countries whose names contain the query anywhere. Typing
frshows France at the top before any other contains matches. - Only the country name is ever submitted. No flag emogi, ISO code, or anything else is ever added to your form. Your Zapier flows, Make automations, and Airtable integrations receive exactly what they expect.
- Flags and ISO codes are optional display elements in the dropdown. Enable or disable each independently with a single attribute. Flags are generated entirely from Unicode - no image requests, no external assets.
- Keyboard navigation is fully supported. Arrow keys move through the dropdown, Enter selects, and Escape closes it. The kit is accessible by default.
- Two built-in dropdown themes are available for use - light and dark - controlled by a single attribute. Both use consistent padding, border radius, and hover states so the dropdown looks intentional out of the box regardless of which theme fits your site. If you do not add a theme attribute, the kit will default to the light theme.
- Multiple instances work independently on the same page. A form with a billing country and a shipping country picker each operates completely in isolation. The 'Target' attribute creates the indidivual instance.
- The Fractional Country Selector Kit is fully GDPR, CCPA, and PIPEDA compliant. It sets no cookies, makes no external requests, and collects no personal data of its own.
Add this <script> inside the <head> tag of your page or project
This script is the universal script: you only need to include it once, even if you have multiple instances on the page.
<!-- This script is to add a searchable country picker to a Webflow form - Managed by Fractional Creative -->
<script data-fc="country-picker" data-fc-version="1.0.0" data-fc-consent="essential" src="https://cdn.fractionalcreative.io/kits@1/kits.js"></script>Add this required custom attribute
Without the Kit
With the Kit
Everything you’re probably wondering.
Need more than a Webflow Kit? Hire a Digital Agency.
Fractional Creative is a digital agency. We build Webflow websites, design brands, manage Meta and Google ad campaigns, and build custom automations, and more. Start saving with Fractional services.
