Tiny Logo
TinyMCE

The world's most trusted WYSIWYG HTML editor, for total control over your rich text editing.


MoxieManager

Media file management simplified in a PHP or .NET environment.

Drive

File and image management directly in the cloud.

Start trial
Documentation

In-depth documentation to help you develop with and customize Tiny products.


Support
Start trial
Use Cases

Out-of-the-box editor with infinite use cases and complete design flexibility.


Roles
Start trial
Blog

Read the world’s best blog on WYSIWYG HTML editors, rich text editing and insights on building SaaS application editors.


Explore:

White Papers and Reports

See how Tiny improves ROI, grows revenue and saves development costs.


Read:


Case Studies

Discover why industry leaders and scaling start-ups love, use and trust Tiny products.

Start trial
PricingContact Us
Log InStart For Free
Content Marketing & DesignDeveloper InsightsHow-to Use TinyMCEOpen SourceProduct-Led GrowthThe Tiny WayWorld of WYSIWYG

Fancy form elements: Aaron Iker showcase

August 30th, 2020

5 min read

Twitter logo with tag @aaroniker_me in the center.

Written by

Ben Long

Category

Content Marketing & Design

Tagged

FormsDesign

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
byBen Long

Computer scientist, storyteller, teacher, and an advocate of TinyMCE. 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

  • Content Marketing & DesignMay 1st, 2024

    Build branding into your product design with a WYSIWYG HTML editor

  • Content Marketing & DesignJul 13th, 2023

    Guide to image rotation: HTML, CSS, and JavaScript techniques

  • Content Marketing & DesignAug 17th, 2023

    How to use AI for writing marketing emails

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager

Developers

DocumentationGet StartedIntegrationsAPI ReferenceRoadmapSupportBlogEditor ComparisonsGet TinyMCE Free

Company

Who is Tiny?Who's using TinyMCE?CareersPartnersNewsContact UsLegalSecurity

Pricing

TinyMCEDriveMoxieManager

Products

TinyMCEDriveMoxieManager

Pricing

TinyMCEDriveMoxieManager

Developers

DocumentationGet StartedIntegrationsAPI ReferenceRoadmapSupportBlogEditor ComparisonsGet TinyMCE Free

Company

Who is Tiny?Who's using TinyMCE?CareersPartnersNewsContact UsLegalSecurity

Products

TinyMCEDriveMoxieManager

Pricing

TinyMCEDriveMoxieManager

Company

Who is Tiny?Who's using TinyMCE?CareersPartnersNewsContact UsLegalSecurity

Developers

DocumentationGet StartedIntegrationsAPI ReferenceRoadmapSupportBlogEditor ComparisonsGet TinyMCE Free
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.