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

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 Fields Color

Custom Select Field

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à!

🎁 Freebie Country Dropdown

country-dropdown-by-good-web-host

No. 4 of the series - Footer cloneable component with contact form, text animations, page links, and social media buttons.

The footer component was designed by Vinicius Pineschi and you will see a very cool website developed by our team using this type of footer very soon.

Font Used: Aeonik 

For the settings: Make sure you have selected class Body (all-pages), go to the typography panel and apply 1vw for it. Enjoy!

Feel free to use this footer section in any of your projects.

Much more will come!

I hope you like it! :)

-> Facebook - https://www.facebook.com/sivadvertising
-> Website - https://www.sivmedia.com

Footer Collection #4

Footer #4

A clonable project created to help you save time when developing forms on Webflow, now with Form Validation!

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à!

🎁 Freebie Country Dropdown Update: Form Validation included

country-dropdown-by-good-webhost-update

Multiple selection functionality without using CRTL key with customized design for options in select2!

Codepen: https://codepen.io/wripcode/pen/ZEvMOEL

I don't know why Webflow converts select tag to dropdown list in mobile version so dropdown list but with customized tags.
Fully responsive!

Select2 custom multiple selection form

Multiple selection option using customized select2 for Forms

A lightweight 'Select text and share / tweet'

"Highlight & Share" with Sharect.js (like in Medium)

"Highlight & Share" with Sharect.js (Like in Medium)

customer-form

Friend is doing a Super Bowl squares bet for charity. He was sending people PDF's and having them fill out what squares they wanted and send it back. Because it was for charity, I volunteered to create a simple website for him. 

Innitially, I had form cells instead of peoples names. People chose the squares they wanted and I woud delete the form in the cell and replace it with their name. 

Once all the squares were selected, I added a quick find element, where you can quickly find the squares you chose by clicking on your name. 

Not the greatest design, but it's functional.

Charity Super Bowl Squares

super-bowl-squares-231bed350f91801242a8

selecting-candidates

This customer wanted a website that was easy to use - cms - and didn't want to sell products online. However they wanted to boost online request. We made sure to include forms on almost every page and an easy to use HP that directs the customer to a product category, quickly.

brennangolf

Brennan Golf Sales

Wisconsin Thunder Team Combat Travel Select Baseball

Wisconsin Thunder Baseball

Wisconsin Thunder Travel Baseball

Great Solar Panel Installer website. Use of CMS and custom slide out forms. But our favorite part... The easy to use service navigation on desktop mode.

Discover form select websites built by the Webflow community

Discover form select websites built by the Webflow community