Where can I find a country list option to add to my Contact Form in Webflow? How do I install it?
TL;DR
- Use a country list generator to copy
<option>tags. - In Webflow, add a select field to your form, delete default options, and paste the copied country options directly into the dropdown.
To add a country selector to a Contact Form in Webflow, there isn't a native dropdown list with all countries by default, but you can easily create one using manual or external methods.
1. Use a Country List Generator
- Visit a site like https://www.html-code-generator.com/tools/dropdown/countries.
- Choose your language and format preferences.
- Copy the list of country
<option>elements (without the full<select>tag if you already have a dropdown element in Webflow).
2. Add a Dropdown Element in Your Webflow Form
- Open Webflow Designer.
- Add a Form Block (or open an existing form).
- Drag a Dropdown or Select element into your form.
- Click Settings Panel (D) with the select element selected.
- Rename the Label to something like “Country”.
- Click into the Select element and delete the default choices.
3. Paste Country Options Into the Dropdown
- In the dropdown’s Settings Panel, create one manual option.
- With that created, click the dropdown in the Navigator or canvas.
- Double-click into the canvas dropdown, then manually paste the country
<option>tags copied earlier (be sure you're only pasting the<option>elements and not the full<select>wrapper). - Webflow will interpret the pasted options and populate the dropdown with the countries.
4. Publish and Test Your Form
- Publish your site to staging or your connected domain.
- Go to the live site and verify that the country dropdown is loading correctly and submitting with the rest of the form.
Summary
To add a country list to your Webflow contact form, use a country list generator to get <option> tags, then paste them into a Webflow dropdown (select) field inside your form block. Webflow will render the options as expected when published.