Trends

Inspiring Examples of Subtly Animated Forms

Forms don’t have to be flat and uninteresting – check out these examples of animated, engaged forms to hook your users or customers.

When you think about it, the most common method for website interaction is either via a contact form to get in touch with you, a login form to access your site, or, and perhaps most importantly, especially for many services and ecommerce stores, the simple signup form.

Because it’s highly likely that your users will end up using some sort of form at some point or the other on your site, in this post I demonstrate that with just some small and subtle UI ideas and tweaks, you can greatly improve the usability of your form and ultimately take the first steps to improving sign-up conversions. Plus, GIFs!!!

You can jump to any of the sections of this post by using the links below:

Innovative Form Ideas Email Subscription Form Design
Login Forms Ideas Credit Card Forms Ideas

Innovative Form Ideas


Single-Field Form Interface

Instead of showing the entire six fields that this form idea requires, this minimal form interface only shows one text input at a time, thus minimizing any distractions. One drawback with using this idea is that there is no way to go back to the previous entry.

Single-Field Form Interface
Single-Field Form Interface Example

Natural Language Form Interface

The innovative idea of this form is to turn a typical form into one that makes use of natural language to gently request the required information from the user.

Natural Language Form
Natural Language Form Interface Example

Fullscreen Form Interface

This experimental full-screen form gives visitors a distraction-free form filling experience.

fullscreen form
Fullscreen Form Interface Example

Email Subscription Form Ideas

Here are some sweet examples of email subscription forms that use nifty animations. Your users will love these. You might also like to check out José Pérez’s post on using subtle animations to improve user experience.


Studio Kit

Studio Kit SignUp Form
Studio Kit’s Sign Up Form

Bart Nederveen’s Design

Bart Nederveen Sign Up Form
Bart Nederveen’s Sign Up Form

Daniil Vnoutchkov’s Design

Daniil Vnoutchkov Sign Up Form
Daniil Vnoutchkov’s Sign Up Form

Envelope Email Form Animation

Envelope Email Form Animation
Envelope Email Form Animation on Codepen

Patrick Rogan’s Email Sign Up Design

Patrick Rogan Email Sign Up Design
Patrick Rogan’s Email Sign Up Design on Dribbble

Julia Khusainova’s Email Sign Up Design

Julia Khusainova Sign Up Form
Julia Khusainova’s Sign Up Form on Dribbble

Morphing Button to Subscribe Form Idea

Subscribe Button Form Animation
Morphing Button to Subscribe Form on Codrops

Login & Signup Forms Ideas


Snapwire Signup Form Design

Snapwire Signup Form Design
Snapwire’s Signup Form Design

Farruh Tillaev’s Login Form Design

Farruh Tillaev Login Form Design
Farruh Tillaev’s Login Form Design

Morphing Button to Login/Signup Form

Login SignUp Morphing Buttons
Login/Signup Morphing Buttons

Glenn Hitchcock’s Login Form Design

Glenn Hitchcock Login Form Design
Glenn Hitchcock’s Login Form Design

Colin Garven’s Login Form Design

Colin Garven Login Form Design
Colin Garven’s Login Form Design

Logoswish’s Login Form Design

Logoswish Login Form Design
Logoswish’s Login Form Design

Credit Card Sign Up Form Design


Alexey Golovanov’s Credit Card Form Design

This credit card form uses a visual representation of the card to obtain the users input from the 16 digit code, expiry date and CVV code.

Alexey Golovanov Credit Card Form Design
Alexey Golovanov’s Credit Card Form Design

Single-Field Credit Card Form Design

this is a simple form that will allow your visitor to add the credit card number and other important card related data all from the single field.

Single-Field Credit Card Form Design
Single-Field Credit Card Form Design

Payment Form Design

Payment Form Design
Payment Form Design

Payment Form Design

Skeuocard CC Form Design
Skeuocard CC Form Design

Card by Jesse Pollak

Card by Jesse Pollak
Card by Jesse Pollak

Concluding

I hope you guys like these examples. If you have come across other cool ideas in which we can design innovative forms please do let me know about it in the comments below.

Also, if you’re looking for some innovative form solutions, you might like to check out some of the awesome CSS Forms currently available on CodeCanyon.

If you loved these animated GIFs, you’ll love the animated examples of Material Design we have recently published as well.


About the Author Saijo George

Saijo George works as an SEO Strategy Director for Melbourne based award winning marketing agency Supple. You can find him on Twitter and LinkedIn.