Country Dropdown Form Input w/ Search
A searchable dropdown that lets users type to filter through 195 countries, with matching characters bolded in real time.
It works with Webflow's native form submission, so no changes needed to your existing setup.
How it works:
A JavaScript snippet runs on page load, injecting a sticky search input into the dropdown and generating the full country list dynamically. As the user types, non-matching countries hide and matching characters are wrapped in a <mark> tag and bolded. On selection, a hidden form field is updated with the chosen country.
How to set it up:
- Clone the project and copy the 'COPY ME' element into your own project.
- Add the CSS from the cloned project's page settings into your <head> page custom code.
- Add the JavaScript into your before </body> page custom code.
- Publish and test.
The country list is hardcoded in the script. To add or remove countries, edit the COUNTRIES array at the top of the JavaScript.
