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

Memberstack

 ✅ 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

Happy Thursday! 

We recently applied to get Memberstack up on Webflow's libraries page. This page makes it easy to see what's included. Feel free to clone this and use it for you own projects and library submissions as well. 

This site includes sections for:
- Webflow signup forms
- Webflow logins forms
- Webflow forgot password flows
- Webflow onboarding forms
- Webflow Contact forms
- Webflow text inputs
- Webflow buttons & social auth buttons

We have plans to add more, but this is what we've got for now. If you appreciate projects like this please take a few seconds to like 💙 clone 👋 and follow ➕

Memberstack Library

Auto-formatting international phone number input with a selector, autolocation, preferred countries, and more!

Implementation only requires you to paste in one script and add one attribute. Enjoy!

Perfect Phone Number Input

Jonas Arleth

This Webflow Cloneable is about the animation of labels in input fields, as known from Material Design and Android forms. It shows how to position labels within the input field and how to animate them when the field is active. It also explains how to use form blocks and form elements in Webflow. The solution is a pure CSS solution that does not require JavaScript.

Tutorial: https://youtu.be/n_ee_sQ5EO0

Input Field Floating Label Animation (CSS only)

Happy Wednesday!

I'm back again with a simple group of custom radio buttons.

Most of the styling is done in Webflow with a bit of help from custom CSS to style the label when the radio button is selected. 

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

Radio Button Input

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!

Here's a beautiful dark mode sign up form with custom inputs, a glowing button, and a custom international phone number input field!

Dark Mode Sign Up Form

Building a platform to sell property, cars, applications, or... literally anything?

Chances are, price ranges are a part of your product.

So, why not ditch those boring standard text inputs and replace them with a much better experience?

With this new MemberScript input, you can do exactly that.

Enjoy!

Price Range Slider Input

Here's a nice rounded modal-style sign up form with all Memberstack attributes pre-applied!

Rounded Sign Up Form

Happy Thursday!

Want to add some interactivity to your Webflow form? Check out this tutorial on creating a draggable input that you can style in Webflow! 

Users can drag and drop items to change the order, and the values are saved in a form-friendly input. 

Just copy and paste the code and you're good to go. There's a tutorial video once you open the live site and I'm happy to answer questions if you leave me a comment. 

This draggable input adds a new level of interactivity to your Webflow forms. Try it out and enhance the user experience on your website!

Draggable Inputs | Drag and Drop | Webflow Form UI Kit

If your users have to enter a lot of addresses, or if all of your users have to enter addresses - this script powered by the Google Places API will make their lives a whole lot easier!

Make sure to get your own API key and replace the one used in this demo as it will not work on your site.

Autocomplete Address Inputs

Like the effect of material design inputs? So do I! That's why I made this example of how you can animate the labels based on combo classes and a simple script. Enjoy!

Animated Inset Label (Like Google Material Design)

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

Happy Tuesday! 

This Webflow input switch is built using the native Webflow checkbox element and features a label positioned on top, allowing users to click anywhere to toggle it. Two divs are customized with CSS to update the styling of the switch, giving it a modern and sophisticated look.

The video tutorial walks you through the creation of the Switch in simple and easy-to-follow steps. You will learn how to use custom CSS to move the switch select to 50% to the left when the checkbox is checked, and how to change the background color of the switch to match your brand colors. The tutorial also covers adding additional classes to the switch to avoid styling conflicts, and how to integrate the switch with Memberstack using a data-ms-member attribute.

In summary, the Webflow Switch is a powerful and flexible element that can add some extra style to your website. I hope you find it helpful! 😁

Webflow Switch Input

Happy Monday!

I'm back again with two different Webflow Range Sliders. My goal was to make them as easy to work with as possible. Range slider inputs are relatively hard to come by in Webflow, so I figured folks might appreciate having one more. 

Most of the styling is done in Webflow with a bit of help from custom CSS to style the blue dot. I couldn't find an easy way to style it directly in Webflow, so I cleaned up the CSS to make that easier to work with. 

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

Range Slider Input

Happy Tuesday!

In this project and tutorial, I show you how to create an input where users can easily copy the value. If you're using Memberstack you can have this value saved or auto-filled. 

As you can see from the demo, the code makes it super easy for you to add the copy button to as many inputs as you want. 

Most of the styling is done in Webflow with a bit of help from JavaScript to swap out the classes. 

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

Copy Input & Tutorial

Here's the new version of MemberScript #41 which works perfectly with profile forms/prefilled inputs and is far more reliable.

International Phone Input (Works With Prefill)

Happy Wednesday!

I've created a simple project featuring a group of input fields with shared borders. It's built entirely in Webflow without any custom code, making it easy for you to integrate into your projects.

These shared border inputs are part of a larger Webflow Form UI Kit, designed to offer Webflow developers a range of practical and user-friendly design elements.

The shared border design aims to provide a clean and consistent look for your forms, enhancing the overall user experience.

Feel free to explore this project and incorporate the shared border inputs into your Webflow forms. Don't forget to like and follow for updates and more UI design ideas!

Happy building! 😁

Inputs with Shared Borders

102976941

1070795817

1274323923

1316201488

1316201489

1462086697

1567550242

1592612642

1631162196

1726628865

173927913

1771795565

1863160016

1905118106

2032141491

2037807691

2144870841

2213518682

2216482092

2339906037

2351366352

2355632600

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

2401116685

2486364096

gpt-4o

gpt-4.1

gpt-4o-mini

2546957535

2789269995

285302288

2857348505

2903381045

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

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

3022611874

3023147062

3026881092

3106924665

3112069432

3120801339

3151661775

3201643127

3202722884

3243842104

3258716925

3266482432

3289310561

3313039722

3315729993

3387258362

3410497685

3590523401

3591394191

3672367630

3737116140

3801251705

3844506029

3913199261

3934148661

3941255684

3956476210

4092855684

4103643638

4144203485

4206156914

451433404

489463363

504462606

536101258

622649767

622649768

657188092

660615456

665836192

737109165

772001133

817414265

846847440

882147072

911514507

938734410

1003029853

1045828939

1049811722

1087856901

1099435904

1108325183

1120744071

1131151533

1157563538

1178238107

1178621510

1197475705

1209008581

1216878544

1227154495

1229056119

1234765101

1236803103

1250328847

1259889605

1292405251

1297066426

130043074

1306352991

1312703771

1322655470

1336067073

1337084289

1350250754

1362856608

1365408040

1380896143

1406455659

1418395020

1433303746

143629253

1440816657

1449062533

1453956912

1455163268

1455742168

1458975701

146940023

147086462

1471203893

1475952185

1483622682

1490715908

1499868407

1501922903

1521326523

1530015515

1534768148

1545754914

1568482678

1662541974

1665126082

1675015083

1680201874

1680586027

1701648875

1710623805

1733571395

1734645173

1752293186

1753134293

175490803

1762715110

1764382991

1803820771

1813965765

1823392055

1826978162

1831431323

183596474

1839668475

1856326096

1857805694

1861549476

187681422

Best Inputs Websites | Free Examples & Designs

Discover Inputs websites
built by the Webflow community

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

Discover Inputs websites built by the Webflow community

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

Discover Inputs websites
built by the Webflow community