Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Twitter logo with tag @aaroniker_me in the center.

Fancy form elements: Aaron Iker showcase

Ben Long

August 30th, 2020

Written by

Ben Long
Ben Long

Category

Design & UX

Looking for some creative inspiration to make your forms stand out?

Forms are an essential part of just about any interactive website or app, whether you have an inquiry form, content uploader, e-commerce checkout, or comment section. But with audiences exposed to more apps, brands, and marketing each day, many forms have lost their magic and become a tedious chore. 

Here we go, time to enter my name, email, and payment info again… *yawn*

Savvy designers and developers realize that it doesn’t have to be that way. You can reclaim some of the fun and magic for users with a fancy, creative form design that helps make the experience more useful, engaging, and enjoyable. Plus a range of other benefits, too...

Why make your forms fancy

When you upgrade your forms to something a bit more fancy and creative, you’re more likely to:

  • Stay on brand - When you customize your form styling, you can use colors, shapes, and styles that fit your branding (and the rest of your site).
  • Modernize your look - Banish the old school drab gray colors and straight lines and give your forms a modern makeover.
  • Get attention - When your audience is overwhelmed with content, brands, and ads coming at them from all directions, doing something different with your forms will mean more people pay attention and talk about you.
  • Boost conversions - When your forms are more fun and enjoyable to complete, more people are going to finish them.
  • Surprise and delight - Adding little details (like hiding an Easter egg) can bring an element of surprise and delight to the brand experience and make your customer or user smile.

Get the basics right first

Before you get fancy, you should always make sure you follow form design best practices, like:

  • Accessibility
  • Mobile responsiveness
  • UX best practices

But if you’ve got a simple form that ticks all the boxes and works well, but you want to improve conversions, make it more on-brand, or attract attention, it’s time to try adding in fancy elements.

Fancy form elements with Aaron Iker

Aaron is a UI designer and front-end developer based in Germany who likes to create clean and user-friendly interfaces. He often uses the GreenSock library to create JavaScript animations and custom styled forms with modern CSS.

Aaron’s previously shared that it’s now easier than ever to build custom form elements like checkboxes, buttons, and toggle switches:

The reason is that we can finally style the ::before and ::after pseudo-elements on the <input> tag itself. This means we can keep and style an <input> and won’t need any extra elements. Before, we had to rely on the likes of an extra <div> or <span>, to pull off a custom design.

Form element inspiration

The best place to start when fancifying your forms is to get some inspiration. You might already have a swipe file of UI design inspiration somewhere. But if not, start with Aaron Iker’s styled buttons and other fancy form elements.

Here are some of our favorite animated form elements from Aaron:

Submit/confirm buttons

 

Checkboxes

 

Toggles

 

Dropdown selections

 

Date selectors

 

Ratings

 

Sliders

 

Password validation

 

Email validation

 

Text fields

 

Uploaders

 

Loaders

 

Looking for more inspiration? Check out more of Aaron’s work on Dribble or CodePen.

Enhance your forms with WYSIWYG editing

WYSIWYG HTML editing with TinyMCE in the Bootstrap framework.

Add the TinyMCE WYSIWYG editor to your text fields and enable advanced text formatting so your users can style their form responses before submitting. This is ideal for detailed responses like describing an issue, submitting a forum post or guest blog post, embedding images, and other instances where advanced text formatting can be helpful.

Check out these articles for more information about how to integrate TinyMCE with your favorite frameworks:

What are your favorite tips and tricks for making your forms fancy? Tag us on Twitter at @joinTiny and send us the link to a form design that you love!

FormsDesign
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • Text "Fonts" displayed five times, each in a different font.
    Design & UX

    Add a custom font family in TinyMCE

    by Ben Long in Design & UX
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor