Discover the best select websites created by professional designers. Get inspired and start planning your perfect select web design today!

Memberstack

Goal: Create the highest quality UI Kit for Webflow forms. 

I'll be regularly updating this project for the next 90 days or so. Please submit your feature requests and feedback to duncan@memberstack.com. 

There are sooooo many excellent projects on the showcase today, but nothing that collections the best Webflow Form elements in one place. It'll take a few weeks to finish, so I decided to share it early to collect feedback and ideas. I'll post a mini-cloneable project each time I finish a section or exciting component. 

Please like/clone this project to help others find it too! 

Planned input types:
→ Button
→ Checkbox
→ Color picker
→ Date selector
→ Date and time selector
→ Email input
→ File uploader
→ Hidden input
→ Image button
→ Month and year selector
→ Numeric input
→ Password input
→ Radio button
→ Slider
→ Reset button
→ Search input
→ Submit button
→ Telephone input
→ Text input
→ Time selector
→ URL input
→ Week and year selector

The Ultimate Webflow Forms UI Kit

Noah Raskin

Update 02-12-2020:
-Added color variable for list option (in dropdown) text color on hover
-Added color variable for selected option text color that displays in the field after it's selected

A cloneable project using the Nice-Select JQuery plugin to style and customize a <select> field in your Webflow project.

I made the customization process really easy. In the Navigator you will see a custom code element called "style-settings". Open that up and you will see the different options for Color and Spacing. Comments are used as well so you know which does what. Simply copy and paste in your own color and spacing values. 

Last, we need to initiate the the plugin by copying the simple script code that is located in the Page Settings > Custom Code > </body>. You can also add that code and the <style> code to your Sites Settings Custom Code (global) so it translates across your entire site for all forms that have a <select> input field.

Hope you dig it and of course I hope it helps!

Custom Select Fields

A cloneable project using the Nice-Select JQuery plugin to style and customize a <select> field in your Webflow project.

I made the customization process really easy. In the Navigator you will see a custom code element called "style-settings". Open that up and you will see the different options for Color and Spacing. Comments are used as well so you know which does what. Simply copy and paste in your own color and spacing values. 

Last, we need to initiate the the plugin by copying the simple script code that is located in the Page Settings > Custom Code > </body>. You can also add that code and the <style> code to your Sites Settings Custom Code (global) so it translates across your entire site for all forms that have a <select> input field.

Hope you dig it and of course I hope it helps!

Custom Select Field

 ✅ Goal 1: Create the highest quality UI Kit for Webflow forms. (clone it here https://webflow.com/made-in-webflow/website/form-ui-kits)
 ✅ Goal 2: Make it dark mode.

There are sooooo many excellent projects on the showcase today, but nothing that collections the best Webflow Form elements in one place. It'll take a few weeks to finish, so I decided to share it early to collect feedback and ideas. I'll post a mini-cloneable project each time I finish a section or exciting component.

Please like/clone this project to help others find it too!

Planned input types:
→ Button
→ Checkbox
→ Color picker
→ Date selector
→ Date and time selector
→ Email input
→ File uploader
→ Hidden input
→ Image button
→ Month and year selector
→ Numeric input
→ Password input
→ Radio button
→ Slider
→ Reset button
→ Search input
→ Submit button
→ Telephone input
→ Text input
→ Time selector
→ URL input
→ Week and year selector

Dark Mode Inputs | Webflow Form UI Kit

The Good Web Host

A clonable project created to help you save time when developing forms on Webflow!

With this project, you can copy-paste a custom code element with a <select>
tag with all the countries in the world!

You have three options: 
1. With Emoji Flags
2. Without Emoji Flags
3. Without the Nice Select

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

country-dropdown-by-good-web-host

Bradley Stallcup

This works great for menus, especially when you need to add a little emphasis without adding more mess. If you have a restaurant with multiple locations this could come in handy. Or do something entirely different! Hope it helps you in your next project.

Hero Changing Tabs

Digidop | Free Ressources & Templates

No-code solution to create a comparison table using the Webflow CMS thanks to a combination of 3 Finsweet attributes (Combo Box + CMS Select + CMS Filter)

Webflow CMS Comparator

Here are some enhanced Webflow Select fields using select2. Simply copy the code in the page settings & apply the attribute to your select fields and they will work!

Select & Multi Select Fields With Search!

Lots and lots of custom Webflow checkboxes. I tried to limit the amount of custom CSS I was using, but couldn't help it for some. If you have any questions please email duncan@memberstack.com and I will get back ASAP. 

Memberstack Checkboxes

Use this to make anything including a counter with plus and minus buttons like I did, or just a multiple option select field with previous and next buttons!

Simply paste in the script, apply some attributes, and you are good to go - enjoy!

Change Select Value On Click

Jon Reese

Created this to test the current possibilities and limitations of Finsweet's Attributes system (which, 💜, incidentally). For my use case, I really needed to combine multiple collections and filter by field data from multiple multi-reference fields in each collection. I also used Select to add filter options to select fields. It works, natively! No custom JS needed. (My main takeaway for me was to TRIPLE check all my attributes for misspellings, I have a bad habit of fat-fingering, and 1 misspelling could break it all.) Thanks a million, Finsweet! 🙏  

UPDATE: this no longer works 💔

Finsweet Attributes: using Combine, Filter, Nest, and Select together (UPDATE: this no longer works 💔)

Happy Wednesday! I noticed a BUNCH of forum threads around select fields with lots of options. 

The top two solutions are custom code and manually entering each value one at a time. But custom code is often hard to update and manually entering values is a total pain. 

Thanks to WF copy and paste + Chat GPT, I found a way to add options to Webflow's native select field automatically 🎉  

You can use this handy little tool to:
1) Enter a comma-separated list of "options" to appear in your select input. (ChatGPT is really good at this and you can often find these lists around the internet).
2) Click the copy button to grab your new input. 
3) Paste it into Webflow.

I hope this is helpful for you!

Generate Webflow Select Inputs - Fast!

Happy Thursday!

This project is Image form input using some custom radio buttons in Webflow. Each radio button has it's own background image. 

Here's a link to clone the complete UI kit - https://webflow.com/made-in-webflow/website/form-ui-kits

Image Form Inputs | No Custom Code

Happy Thursday!

I came across a popular forum thread in need of an update, so figured I'd release a cloneable to go with the solution. 

TLDR: Webflow select inputs come with a "placeholder" option. If you want to prevent the user from selecting that option then you need to add a bit of custom code to hide it. 

Clone the project and grab the closing <body> tag code or checkout MemberScript #49 to copy and paste. www.memberstack.com/scripts/49-disable-first-option-in-a-select-input

Each input (with the placeholder disabled) has an attribute of ms-code="hide-first-option"

Disable First Option in Form Select Input

Happy Tuesday!

In this project and tutorial, I show you how to create a group of radio buttons laid out in a table. This sort of UI is great for restaurants, service providers, and other projects where users are selecting from a pre-defined list of options. 

Most of the styling is done in Webflow with a bit of help from custom CSS to style the selected value. 

If you have any questions or need help, please comment on the loom video embedded in the project. Thanks all, and happy building!

Radio Button Table | Webflow Form UI Kit

Igor Voroshilov

Here is a small project showcasing how you can use Custom Element to build a select field with options rendered from CMS collection list. See the example and learn how to do it from the tutorial.

Select with CMS options

Glenn Eastland

A dynamic Select in Webflow populated by CMS items to make a selectable option menu for Webflow forms. This simple tried and tested Webflow hack uses no external scripts. Full instructions https://slickmedia.io/blog/webflow-dynamic-cms-select.

Webflow Dynamic CMS Select

Happy Monday! Our latest cloneable project is a color select field using radio buttons in Webflow. This user-friendly feature allows visitors to easily select from pre-defined list of colors to be submitted via a form.  It's fully customizable, responsive, and requires no coding knowledge to implement. 

Here's a link to clone the complete UI kit - https://webflow.com/made-in-webflow/website/form-ui-kits

Color Select using Radio Buttons

102022939

1026885926

102976941

1038319252

gpt-5-nano

1070795817

1098530826

gpt-4.1-mini

112746687

Get direct access to benefits like unlimited staging sites and more control over roles & permissions

Unlock more for your business with the

1131232030

Custom code and scripts won’t be supported.

Custom code

You won’t be able to export HTML and CSS files.

Code export

You won’t be able to manage site-level access and publishing.

Site-level roles & permissions

{{count}} {{sites}} {{exceed}} client seat limit. Excess seats will be removed.

Client seats

Free guest access to client Workspaces won’t be available.

Guest access

Staging sites will be unhosted with limited CMS, and no passwords or redirects.

Staging sites

1138017326

claude-sonnet-4-5

1181518147

1186914386

claude-opus-4-6

1207293145

1274323923

1338389614

140432223

1444732314

1462086697

1506258256

1514009179

1559290700

1567550242

1592612642

1609688815

1621889036

1631162196

1692956854

1696523225

17004821

1726628865

173927913

1768015773

gpt-5.5

1771795565

1863160016

1870758752

1905118106

1919353748

193274770

1960278590

1975670756

1977767562

2025032126

2030598753

Outliant

Hireclix

Refokus

Kinetic

Heco

2144870841

2147413158

2167006968

2216482092

2243824526

2250401860

225169335

2256326107

2320791503

2351366352

2355632600

https://s3.amazonaws.com/webflow-dev-assets/66fd83b6cc0c8c6ed0e398e6%2Fcontent.json

2401116685

2401437500

2486364096

gpt-4o

gpt-5-mini

gpt-4o-mini

2493307210

2546957535

2556595834

2624148589

2639613659

265457401

2717840929

2749253609

2789269995

2842505721

284989039

285302288

2903381045

User Accounts will no longer be available on January 29, 2026.

Visit Webflow’s Help Center for migration guidance and more info.

2940878268

2972123611

3022611874

3023147062

3026881092

3040272982

3056387847

3057360577

3070246498

307653616

3099012871

3106924665

3108168977

3112069432

3120801339

3125710258

3151661775

3162101956

301 Redirects

Custom Code

Code Export

Site Transfer

Join client workspaces for free and add up to 5 users from your workspace

Guest Access

Limited seats available, n sites will have client seats removed

Client Seats

Staging sites will be unhosted with limited CMS and no passwords or redirects.

Staging Sites

3201643127

3220870747

3238278814

3258716925

3266482432

3289310561

3313039722

3315729993

3387258362

3410497685

3417108561

3452464914

3458155273

gemini-3.6-flash

3497785011

3590523401

3591394191

3594629977

3661799733

3669004489

3673080560

3680518347

3736611573

3737116140

3840796123

3844506029

3876837227

3879263312

Learn best practices for collaborating with clients in Webflow.

Best Select Websites | Free Examples & Designs

Discover Select websites
built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Select websites built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Select websites
built by the Webflow community