How to install the Countries Dropdown

Requirements:

You will need the custom code from these links (you may use the links but hosting them under your own domain is advised):

For the Emoji Country Version:
https://web.goodweb.host/goodwebhost-emoji-country.js
https://web.goodweb.host/nice-select.css
https://web.goodweb.host/jquery.nice-select.js


For the Nice Select Only Version:
https://web.goodweb.host/goodwebhost-country.js
https://web.goodweb.host/nice-select.css
https://web.goodweb.host/jquery.nice-select.js


For the Dropdown Only Version:
https://web.goodweb.host/goodwebhost-country.js

Installation:

Click on the version you would like (Emoji Flags, Nice Select Only, Dropdown only) and navigate to the "HTML Embed".
body>wrapper>Form Block>Form>form-group>HTML Embed. This is what you want to copy and paste into your Webflow site.

Click on the version you would like (Emoji Flags, Nice Select Only, Dropdown only) and navigate to the page settings -> Custom code area.

Copy the content in "Inside <head> tag" to the corresponding custom page section on your webflow website. If you have the dropdown on more than one page, you may want to put it in custom code on the dashboard settings.

Copy the content in "Before </body> tag" to the corresponding custom page section on your webflow website. If you have the dropdown on more than one page, you may want to put it in custom code on the dashboard settings.

In our custom code we have included some extra custom css to style the dropdown for our website under the classes ".list" and .nice-select .option". This is completely optional.

Disclaimer:

The countries are loaded in with JS - so you wouldn't be able to see them on Webflow however when you publish - Voilà!

Credits:

To make this possible we used nice-select a jQuery plugin by Hernan Satario, Check out -> http://hernansartorio.com/

Need some help making this work?

Drop us an email on contact@goodwebhost.co.uk . We'd be more than happy to help!

Made in Webflow