While we design our website, graphics, and fonts with immense creativity, there’s always one thing we tend to overlook: forms and input fields. Now, you may be thinking whoever needs a unique contact form or input field—they’re just supposed to be user-friendly?!
After seeing some of the forms we’ve gathered below, you might change your mind about how a creative form or input field can impact a user’s first experience. Hopefully, we have enough to inspire you and make you think through this often-overlooked visual element on websites. Have a look and be inspired!
My Pizza Oven
This tasty-looking website is a perfect example of how cute and creative a form can be. Since this website is for a Holland-based pizza delivery service, the form is used for reservations. With a cute little calendar on the side and adorable graphics and font, no one wouldn’t want to book a table here – well, if they were in Holland!
Pixel Wrapped
Pixel Wrapped, formerly known as Arbel designs, is a small design studio in Israel. We have to give this duo (Idan and Maya) credit for their killer design skills after seeing the form they have on their website!
Natural Language Form Interface
Here’s an inspirational form-field that we’re sure you’ve never seen before. The idea behind it is to provide users with a sentence and let them choose certain words using drop down menus. The resulting sentence could be exactly what they’re searching for (i.e. a restaurant, a reservation, etc).
Mooze Design
This is a design agency owned by a duo from Netherlands and India. If a user wants hire them, they can simply fill in this creative contact form. This design was listed on Awaaards as one of the most creative web form design.
Lions Way
Who would have thought of turning a contact form into a post card? Lions Way did! And their cute little contact form looks perfect in the background. Although it loses points for being legible, we’ll give it an A+ for graphics!
Tony Johnson
Tony is a Seattle-based web designer who specializes in creating websites that are clean, engaging and user friendly. We can definitely see his ability to create “engaging” stuff—even contact forms! The form looks just like notebook paper inside a briefcase. Stay tuned for his “new website”.
OrcaBay Seafoods
If you’re looking for simplicity and responsiveness, a fancy form may not be your top choice. However, Orcabay Seafoods proves that responsiveness doesn’t always mean boring! With a fantastic background image and color coded fields, this is the perfect example of how you can get (slightly) creative with form fields.
Brent Ayers
Brent Ayers is a design and development fanatic. It’s not hard to see that after viewing his creative typography and black-and-white-themed personal website. The form follows the same theme, with the fields having a chalk-ish appearance, rather than being standard boxes.
Full screen Form Interface
Here’s another genius idea by Tympanus for form fields. The idea is to allow only one field to be viewed in full screen at a time. Once the field has been filled the user can hit “continue” after which a new field will be rolled in. The effect is pretty cool and distraction-free, since users will be able to focus on one field before they move on to the next.
Ashes and Milk
This is a very unique service that offers products made of ceramics, stone, textile, glass, paper, and other materials. Their products are very elegant ones designed by professional artists. Their contact form is just as unique as their web design and their products. The form appears inside a three-dimensional appearing wooden box.
Email Form Animation
If you’re looking for a unique way to add in the “email me” form and field to your website, check out this adorable animation created by Hans Engebretsen on Codepen. With the help of HTML, CSS, and JavaScript, you can design a cute envelop that pops out a form requesting an email address and a “Thank You” at the bottom.
Cava Design
Cava Design shows us how to mess with colors and themes to create an amazing contact form. We can’t see how this will fail to inspires users to “Get a Quote!”
Pearman
This is a seriously adorable website with tons of animation and effects. Their “contact us” page simply doesn’t “appear” in a click. Instead it takes your through an amazing (but short) tour first, before it lands at the very bottom. The best part is that their contact form fields are very simple, requiring only a subject line and message in a text box.
Learn More: Business Card Design Inspirations