How to use

How to install the Countries Dropdown with Form Validation

Requirements:

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.

In order for the form validation to work you must change your Form ID to read 'country-form'. You can change this by navigating to 'Form' on the left side of the Webflow UI and changing the 'ID' under Form Settings on the right side of the Webflow UI

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/

For the form validation we used this reliable jQuery plugin, Check out -> https://jqueryvalidation.org/

Previous Versions:

Would you like the dropdown without form validation? Check out -> https://webflow.com/website/country-dropdown-by-good-web-host

Need some help making this work?

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