8 Modern Unusual Sign Up/In Forms

#signup #form #animation #css #html #javascript

My website:
My second business:


🎵Music from:

CodePens mentioned:
0. Chris Coyier blog:
1. Ian Hazelton’s Color Changing Field Sliders:
2. Tommaso Poletti’s Shuffling Cards:
3. Florin Pop’s Double Slider Sign Up:
4. Mohan Khadka’s Flippy Form:
5. Josh Sorosky Slide’n’Zoom:
6. Jamie Coulter’s Flop Down Authenticator:
7. Anna Batura’s Slider:
8. Riccardo Pasianotto’s Push-Through Fields:

Next one is called Shuffling Cards by Tommaso Poletti and I’m not particularly a fan of the typography or inputs but I really like that I can see that something is behind my main card so that makes me want to see what it is, again it’s based on grabbing the users attention. This approach can be used in so many instances, like hiding some kind of coupon code or something promotional that tries to catch the users attention, it could be used in a subscription form, the possibilities here are endless

Number three, is one of my favourites is from a fellow Romanian developer called Florin Pop and is looking super modern, probably that’s why I like it so much. This one looks like an is innocent, probably nothing is going on here, but the devil is in the details so the magic happens when you want to switch methods to signing up for example. See? That’s super nice and I really appreciate people or companies who take their time making this cool and unusual stuff that just grinds my gears. I personally have much more respect for these people and it’s much more likely buy their services or products.

Next up we have a flipping effect created by Mohan Khadka and what’s good about is that it doesn’t require any javascript whatsoever, not that this is a problem but you know less is more. I would probably change the text sizes here and there but other than that it looks great!

Number five we have a similar feel of experience, but this one it slides the functionality. It is created by Josh Sorosky and it’s called Slide’n’Zoom.
There’s also some really great details here, like the growing and shrinking transition, the checkbox is really cool and makes me immediately check it and also the sign in animation is on point. It is super light, it can be used in your project right away.

Number 6 and this is one of the most complex and probably has the most powerful impact for users, like dropping their jaw on the floor, is made by a very popular developer Jamie Coulter and watch what happens when you click the login button. That’s so entertaining to watch man, it makes me want to sign out and sign in again again and again haha. I could see this in a cool gaming platform or top notch hardware business or similar niches. thank you jamie for sharing this with us.

Number 7 comes from Anna Batura and it’s a slider again with some key differences. The animations are simple and subtle, colors are really nice as well but what I really like about this one is the sign in animation. It uses javascript just to add and remove classes so it’s super customisable. I wonder how it would look like on mobile.

And last one is called Interactive Sign Up Form and it’s created by Riccardo. The caveat of this one is that it uses so little real estate in the website and it’s changing when you push enter. Might be frustration for some users to press enter or click each time there’s a new input but because you can throw this anywhere in your website makes it worth the frustration.



privacy policy.

Your email will never be shared with a third party. We'll only use it to notify you of our launch and of special events taking place in your city. You'll have the opportunity to unsubscribe at any time, immediately, once you receive your first email.