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

Memberstack

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

 ✅ 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 Webflow Form UI Kit

Dark Mode Inputs | Webflow Form UI Kit

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

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 Box Search

Select & Multi Select Fields With Search!

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

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 | Webflow Form UI Kit

Copy Input & Tutorial

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

Switch Input | Webflow Form UI Kit

Webflow Switch Input

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.

Address Autocomplete

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

Animated Inset Label (Like Google Material Design)

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 Inputs | Webflow Form UI Kit

Radio Button Input

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 | Webflow Form UI Kit

Draggable Inputs | Drag and Drop | Webflow Form UI Kit

Happy Thursday!

Today I have a simple Profile Input project for you. Going for a minimalist UI without any input borders. I'm a big fan of these since they maximize read-ability and remove some visual clutter. 

This will start working as soon as you drop it into a project with Memberstack installed. Including the profile image! 

As always, you have total design control and I'm happy to help if you have any questions.

Profile or Onboarding Inputs

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 Input

Price Range Slider Input

Give your users a slightly better experience with this easy email validation - all you need to do is:

1. Copy one line of code from the page 
2. Add a blank attribute called "nw-email" to the input
3. Create combo classes for your input called "success" and "error"

And you're done!

Instant Validation Login Form

Email Validation Login Form

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 | Webflow Form UI Kit

Inputs with Shared Borders

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

Perfect Phone Number Input (Profile Form)

International Phone Input (Works With Prefill)

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!

Click To Increase Select Fields

Change Select Value On Click

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

Discover inputs websites built by the Webflow community

Discover inputs websites built by the Webflow community