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:
- 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’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:
Enhance your forms with WYSIWYG editing
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:
- Enhance Bootstrap forms with WYSIWYG editing
- Enhance React forms with a rich text editor
- Create an Angular reactive form with a rich text editor
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!