16 façons de créer une page de connexion Webflow

Vous repartirez avec 16 idées gratuites et clonables que vous pourrez utiliser immédiatement. De plus, nous examinerons les avantages et les inconvénients de 9 autres services d'authentification qui fonctionnent de manière transparente avec Webflow afin de vous aider à prendre votre décision.

Ajoutez des adhésions à votre projet Webflow en quelques minutes.

Commencer

Plus de 200 composants Webflow clonables gratuits. Aucune inscription n'est nécessaire.

Voir la bibliothèque

Ajoutez des adhésions à votre projet React en quelques minutes.

Commencer

16 façons de créer une page de connexion Webflow

Standard login form

Duncan Hamra, the cofounder of Memberstack made this beautiful subscription login UI featuring a textured background, rounded button, show/hide password, and styled form inputs. It’s a free Webflow template you can use with Memberstack’s pre-built UI.  

https://showcased.webflow.io/projects/Subscription-Login

Webflow template with a signup and login UI, a textured background, rounded buttons, show/hide password, and styled form inputs

For an alternate design, Duncan also made this ‘Splitscreen Signup’ that you can clone and use on your site. This form allows you to login with Google, Facebook, or with your email.

 https://showcased.webflow.io/projects/Membership-Splitscreen-Signup 

Membership Splitscreen Signup
with social login

Client portal

If you need a client portal - this cloneable created by James Baduor is a great option. James has made it super easy for your clients to login with either their email address or phone number and password. 

https://showcased.webflow.io/projects/webloggh 

Client portal login

Are you an agency or freelancer that needs a client dashboard? Check out this client portal from the Memberstack team that lets you build specific pages that are accessible to only one client.

https://showcased.webflow.io/projects/8-client-dashboard-template-zero-code 

User-specific pages on your website that are only accessible to one client - Login screen
user-specific pages on your website that are only accessible to one client - Dashboard

Show/hide password

Looking for a Login that enables you to show and hide the characters in the password input field? See Duncan’s ‘Show Password’ project. 

https://showcased.webflow.io/projects/Show-Password 

Showing and hide the contents of a password field

Antonio Esposito created a ‘Minimal Authentication’ login which also features a multi-media slider, auto-focused input, as well as the ability to hide or show the password characters. Pretty cool stuff!

https://showcased.webflow.io/projects/Minimal-Authentication

Minimal authentication login form. Including; show/hide password text, input field autofocus, multimedia side slider, responsive design

Logins with large images or video

Would you like a login that sits atop a large image or video? Well, we have two for you to consider. The first is by Uiflow, featuring a centered login atop a full width image. 

https://webflow.com/website/Portal-login-page 

Portal login/signup page featuring a centered login atop a full width image

The second is by Duncan Hamra. This cloneable signup features an asymmetrically split layout with a background video. It also allows login with your social media.

https://showcased.webflow.io/projects/Membership-Signup-with-Video

Membership signup with asymmetrical split layout and background video

Label animations

Do you love animation? Here are a couple options that will delight your users. Duncan revised a Uiflow open source project and made it awesome! This simple and flawless login form has animated labels and a background video. 

https://showcased.webflow.io/projects/Membership-Login-Label-Animation

Simple login form with a background video, custom code to animate the labels, and custom CSS to style valid inputs

This label animation by Aviv Shwartz from Avivtech features floating labels interaction. 

https://showcased.webflow.io/projects/Floating-Labels-Interaction

Floating labels animation

Form validation

Need form validation? This animated contact form by Timothy Ricks offers that validation with a 3D glass-blower background video. 

https://showcased.webflow.io/projects/Easy-Form-Validation 

Animated contact form validation with a 3D glass-blower background video

Duncan saw that people were looking for an easy way to confirm password fields in Webflow and came up with this stylish form that gives feedback as the user types. It comes with a video tutorial to make it easy for you to add to your site. 

https://showcased.webflow.io/projects/Confirm-Password

Require users to confirm password during signup cloneable

Need to know which company your users work at? We found a solution!

Aviv Shwartz of Avivtech created this form validation that adds custom code to exclude 100 of the most popular free email domains from using it. You can add to the list, or take away any domains you don’t need. When someone enters their free email domain address, an error message tells them to enter a business email address.  

https://showcased.webflow.io/projects/non-free-email-validation 

Email validation form excluding free email domains

Modal overlay

Kevin Haag designed this clean and minimal login panel that slides up when you click Sign in. 

https://showcased.webflow.io/projects/MM020-Login-Panel 

Clean and minimal login overlay panel interaction

For a beautiful simple login/signup modal, check out this project from the Memberstack team

https://showcased.webflow.io/projects/10-login-and-signup-modals  

Super simple login/signup modal

Just for fun!

Sometimes you just need to have a little fun! Duncan recreated this awesome Yeti login from a Codepen project by Darin S. featuring hover interactions and a rotating head. 

https://showcased.webflow.io/projects/Yeti-Login 

Fun yeti login with hover interactions

Now that we’ve gone through 16 awesome login ideas ✅ let’s take a look at the options we have for exporting code to the backend.

Webflow Login Functionality

One of the main issues designers and developers have with Webflow is the inability to add login/signup functionality to their sites without integrating with another platform. During the No-Code Conference, Webflow announced the adding of Users in Webflow, which will allow you to sell paid memberships and access to gated content.  Webflow memberships is now in beta, with no release date as of yet, however, an announcement about memberships will be made on June 30, 2022 from 10am - 11am PST on this special livestream.

Today, custom login/signup functionality is not natively supported on Webflow, and requires an engineer to code, or to use custom integrations, like Memberstack. 

We’ll take a look at the different types of login/signup functionality you can use with Webflow, and how to achieve your desired outcome.

Exporting code to create custom backend

For those times when Webflow hasn’t quite filled all your needs, you can still get your desired effects with custom code, integrations, or plugins. If you have a paid account plan with Webflow, you can export your project’s code from inside the designer, to be hosted anywhere. See this quick tutorial on how to export your code

Pile à billets

Expert SaaS product offering authentication, payments, flawless UI components, user management CSV, a host of integrations to connect with, dev tools, and ‘best-in-class’ security. 

Pros Cons
Memberstack offers you the ability to secure user accounts and payments, add user authorization, and sell subscriptions
They offer 20+ clonable logins with different functionality, making it easy for you to set up and change memberships
Ability to protect and hide specific pages; excellent for gated content on your Webflow site
Ease of use
Flexible
Agile
Easy login functionality
Excellent customer support

Webflow Memberships

Coming soon, currently in beta testing, and projected to be released this year.

Pros Cons
Will have the ability to sell subscriptions and manage them from the Webflow designer We don’t know enough about the product, yet
Access groups - full control over different levels of access
Easily customize your content - ability to define what content users have access to
Login/signup, reset password

Auth0

An identity, access management, and risk mitigating service that helps organizations provide secure access to any application.

Template 1 lets you add a login to your Webflow site that pulls user data from the internet, adding it to the site, so they don’t have to. 

Pros Cons
Login/Signup
Displays users data on form (Name, email, profile pic, etc)
Ability to protect specific pages
Ability to log users out
Sign in with social media

Template 2 gives you three options that show how to add login access for your clients, along with tutorial articles taking you step-by-step through each process.

Pros Cons
Allows access to client-side gated content in three different ways (Unlocked content, Partially locked, and Locked content)

Memberspace

On a mission to build sustainable membership businesses with no code

Templates. They make it easy for you to sell memberships and digital content on your website.

Pros Cons
Ability to sell memberships and digital content on your site without code
Sell memberships, courses, content libraries, paid communities, eBooks, paid newsletters, private podcasts, etc.
Good analytics
Ease of use

Firebase

Google’s platform for creating mobile, web applications, and games. They bring a fully managed back-end infrastructure, performance monitoring, and analytics to help you through the challenges of building a site the way you want it.

Pros Cons
Build without managing backend servers
Scale to support millions of users
Solve common app development problems
Easy integration with tools
Process third party payments without server
Free basic plan
Good analytics and authentication
Concise documentation
Wide range of services

Check out this tutorial from Jason Dark showing you how to setup User Authentication using Firebase and for a customizable set of forms for signing users in, out, and up, Garrett Mack made these elements that you can use from his Firebase UI kit.

Firebase signup/signin page

Wized

Webflow extension that enables you to build a login system and create custom rules, ensuring that only authorized people can view restricted pages.

Pros Cons
Only need two lines of code to integrate Wized in your Webflow project
Build web app functionality on your Webflow project
Build a custom login design with the ability to use your own elements
Data is stored in your Airtable database
Login / Authentication
Sell subscriptions
Low price
Ability to launch micro SaaS products

Take a look at these Wized templates featuring projects for ecommerce login, client dashboard, and a task management app

Udesly

Allows you to take the Webflow site you’ve built and convert it into a professional theme for Shopify, WordPress, Jamstack, or Ghost.

Pros Cons
Create professional themes for Shopify, Wordpress, Jamstack, and Ghost using Udesly for Webflow
Limitless design freedom

Password protected pages in Webflow

Gives you the ability to protect your site by controlling access to specified content.

Pros Cons
Allow clients access to specific content
Set password protection for individual pages, pages in a folder, a collection, or the entire site
Style the password protection page to your liking

Cédric Moore created this fancy clonable password protection page that you can use right away.

Password protection page with backdrop filter

Being able to add login/signup functionality to your site is a game changer. We love giving people inspiration to do great things, and continually strive to fill gaps that tools like Webflow haven't yet reached. Designing and building web products is difficult, and we’re here to help simplify the process with loads of great options, like the ability to login to a website while protecting your data.

Login pages are your users first interaction with your site, and should be thoughtfully crafted. We’ve supplied you with 16 free clonable login/signup ideas, and 9 authentication services to help activate your muse, and give you inspiration for your next project.  

TABLE DES MATIÈRES
Gina Raduski
Qu'est-ce que Memberstack ?

Auth & paiements pour les sites Webflow

Ajoutez des logins, des abonnements, du contenu à accès limité, et plus encore à votre site Webflow - facile et entièrement personnalisable.

En savoir plus
Cliquez ici pour tester Memberstack en direct
Commencer à construire

Essayez Memberstack et découvrez ce que vous pouvez construire !

Memberstack est 100% gratuit jusqu'à ce que vous soyez prêt à vous lancer - alors, qu'attendez-vous ? Créez votre première application et commencez à construire dès aujourd'hui.