Form design examples

TEST PILOT COLLECTIVE form

TEST PILOT COLLECTIVE form pixel pilot collective anti aliased test green

FORM&PRESS

FORM&PRESS is a sportswear brand from Seattle, WA.

Just Form

Just Form — is a website that helps people in the selection, delivery and installation of Italian furniture from manufacturers. Just Form specializes in the supply of furniture, accessories and light from the leading Italian and European brands. We represent the largest catalog, which includes more than 50 000 items.

A Curitiba Apartment That Focuses on Form and Function

An apartment in Curitoba, Brazil that was renovated into a modernist home focusing on form and function.

Interlocking Cable Ties Form Undulating Water and Biomorphic Sculptures by Sui Park

Artist Sui Park (previously) zips together simple nylon cable ties to create sprawling biomorphic sculptures and site-specific installations that resemble heaving nighttime seas, prickly moss, and vibrant amorphous creatures. Park, who was born in Seoul and currently lives in New York, started hand-dying the uniform fasteners a few years ago to deepen the contrast between the mass-produced material and her spiky organic masses. “Each has a subtle difference in shape and angle, and when grouped and connected together to develop into a larger form, the subtlety creates a dynamic and a characteristic of my work,” she says. More

Ravenous Frogs and Surprised Bears Form an Adorably Expressive Ensemble of Ceramic Creatures

Helen Burgess, who works under the moniker nosey mungo, crafts a playful troupe of characters with endlessly diverse expressions: there’s a flock of startled chickens, a bulging rain frog sporting a dramatic frown, and a whale duo grinning with contentment. Imbued with a bit of whimsy, Burgess’s clay creatures are derived from their real-life counterparts. The ceramicist skims encyclopedias to find lesser-known animals to sculpt, sometimes focusing on endangered species in order to raise awareness. More

Form Design Patterns

Clean, left-aligned Landing Page promoting Adam Silver’s new book, Form Design Patterns. I know many won’t agree with this design, but there is something about the simplicity of this layout (most likely a mobile-first build) I can appreciate. I’d love to know your thoughts – hit me up on email or Twitter. Full Review | […]

Twisted and Layered Balloons Form Eye-Popping Animal Sculptures by Masayoshi Matsumoto

Master balloon artist Masayoshi Matsumoto (previously) continues to amaze with his incredibly intricate animal creations. Using only balloons—the artist abstains from using any additional materials like markers or adhesives—Matsumoto shapes his raw materials to mimic the unique limbs, spikes, and wattles of a wide range of animals. The graceful silhouettes of birds and insects with their textural exoskeletons frequently appear in the artist’s body of work, but he also tackles flora including pitcher plants and cacti, and other creatures from mammals to maggots. More

Thick Brushstrokes Form Plump Songbirds in Oil Paintings by Angela Moulton

Chickadees, barn swallows, and goldcrest kinglets emerge from impasto oil paintings by Angela Moulton. The artist works in the aesthetic space between realistic and stylized, using natural tones that are slightly keyed up, and following the body and beak shapes of each bird while giving them just a bit of extra plumpness. Thick brush strokes form the birds’ bodies in just a couple of deft swipes. The artist, who splits her time between Illinois and Idaho, sells her work as Pratt Creek Art, and offers both originals and prints of her small-scale paintings. More

Cloud-Like Clusters Form THEVERYMANY’s Pillars of Dreams

A new cloud-like collection of bulbous towers stands on a building campus in North Carolina. The sculptural creation, titled Pillars of Dreams, is by Marc Fornes and his New York-based studio THEVERYMANY (previously). Located outside county buildings in Charlotte, the public art piece stands 26.5 feet tall and 43 feet wide, and required 54,000 rivets to hold together over 3,500 individual metal sheets. Pillars of Dreams is composed of eight columns that merge at the top in spherical formations, and hues of pink and blue on the interior peek through in perforations that add to the airy quality of the structure. More

Colorful Quilts by Bisa Butler use African Fabrics to Form Nuanced Portraits

Artist Bisa Butler draws from an array of vibrant patterned fabrics to create portraits of everyday people. She eschews representational colors, favoring layered jewel-toned hues to form the skin of her Black subjects, and often groups figures together into strong silhouettes. “I have always been drawn to portraits,” Butler explains in a statement on her gallery’s website. “I was the little girl who would sit next to my grandmother and ask her to go through her old family photo albums. More

Process Form

Fonts: Grand Slang, Neue Montreal

Paint Smudges and Smears Form Abstract Portraits by Kai Samuels-Davis

California-based artist Kai Samuels-Davis layers linear paint strokes and large washes of color to form shapes that are recognizable as faces, but without all of the visual information seen in traditional portraiture. The artist relies on the process to find the image, often starting with a sketch or a simple circle to build upon for the face. Working in a space between the representational and expressive, the artist is able to focus on emotion through abstraction so that the viewer can form their own narrative through each gesture and colorful brush stroke. More

10 Examples of Innovative Contact Form Design

More so than any other element on a site, contact forms help incite and establish interaction between a user and a business. They are a medium that helps generate more leads, which is why they should not be treated as an afterthought.If a contact form is too long and time-consuming, users may outright ignore it. If it looks bland, they may not even notice it at all. Brands should carefully craft their contact forms in a way that inspires users to get in touch. To do that, they need to be mindful of their users’ interests, ask them the right questions through a form, and wrap it all up in appealing packaging. The end result should be an authentic and a well-thought-out, imaginative contact form that clients will enjoy filling out.There are a lot of brands that have found terrific ways of creating irresistible, fun, and beautiful contact forms. We will introduce you to some of the most innovative examples from the web that demonstrate what you can do to create engaging and effective contact forms. The websites we will discuss include:Zorka Agency730DCNoodz — Nothing to hideThe Covid Art MuseumCevitxefantidoteMysta ElectricWE3The Badass ProjectAlfa CharlieZorka AgencyZorka Agency is an international digital marketing agency focused on developing ROI-forecasted strategies. They’ve worked with Activision Blizzard, Hennessy, Domino’s Pizza, AliExpress, and many other notable companies. Their homepage is all about juxtapositions between the black background and white and yellow typography. Save for several geometric shapes and a smiley face, you won’t see too many visuals on the agency’s site. Instead, they manage to keep the visitor’s attention by skillfully combining uppercase sans serif typography with subtle, yet engaging hover effects that sometimes change the color as well as the position of the displayed text. The biggest surprise on the site is nestled at the bottom of the homepage. As you reach the end of the layout, the color of the typography and the background invert, with gigantic black fonts inviting you to “Say Hello” and type your full name in a designated field. The encircled “Next Step” button informs you that this is just the beginning of an imaginative contact form. Instead of listing form labels and fields in one or two columns (which is a common practice on most sites), Zorka Agency structured their contact form as a 5-step feature asking clients for required information one question at a time. Users can see five short lines on the side, suggesting the number of questions the form contains. A contact form that doesn’t immediately reveal its content seems less scary to viewers. If they were to see a lot of questions at once, they’d be more likely to skip the form. By requesting information from users one step at a time, brands ensure their audience doesn’t feel stressed out by the sheer length of the form. And that, in return, positively affects conversion rates.730DC730DC is a daily newsletter that contains all the latest news from Washington DC. It is delivered to subscribers every day at 7.30 AM, hence its name. The design of this site is extremely minimal. Its content is in grid and the screen is divided into several sections. The main navigation is at the top, with each menu link placed in a separate field. The rest of the screen is divided in half. On all of the site’s pages, the left side is intact, while the right is further divided into smaller sections with straight horizontal lines. The color palette predominantly consists of white and red hues, save for the shop page that contains colorful items. The contact form is featured on the homepage and it has only two questions. The moment you click on any field, the color of its lines goes from red to blue. And when you start typing your name or email address, the questions disappear from the view, leaving you an empty field to fill in with your details. On hover, the background color of the call-to-action button and that of the button text transpose, so that the button becomes red and the text white. Aside from signing up for the newsletter, you can also submit a story to 730DC. The design of that form matches the subscription form, except that it requires more information from the users’ end. Both forms are incredibly simple and geometric, yet it is precisely their minimalism, rawness, and slightly brutalist vibe that makes them interesting.Noodz — Nothing to hideNoodz — Nothing to hide is a brand that makes vegan oral-care products. The design of their website relies on eye-catching combinations of contrasting colors, such as yellow and dark purple, pink and dark purple, lime green and dark green, to name a few. The vivacious color palette is applied to the overlay contact form as well. The screaming lime green color is the most prominent hue of them all. It is applied to the checkbox field as well as the call-to-action and close buttons, setting them apart from the rest of the form’s content. Its vibrancy disrupts the more peaceful pink and purple hue used on the form, creating a simple yet exciting and alluring visual unit. The contact form fields are all placed inside of a rectangle that is visible at all times, so users immediately know what kind of information they are expected to provide. Beautiful font choices and the playful character of the typography further enliven the form, while a cute smiley face helps add more of a fun character to it.The Covid Art MuseumThe Covid Art Museum is the world’s first online museum for artworks created during the Covid19 pandemic. The design of the site is rather simple, with selected artworks dispersed throughout the homepage. All pieces are marked with a number. Some fields seem empty, but if you click on them, the “Keep Social Distance” text will appear. You can explore the website in dark and light modes. Depending on your choice, the color of typography changes. However, the artwork submission menu link stays red at all times, ensuring this section is noticeable regardless of the selected mode. On click, the form appears in the viewport. If you don’t like its default location (on the right-hand side of the screen), you can move it wherever you like. The form’s design is simple and clean, combining white and grey sections with black and red typography. The call-to-action button is in red, with “Submit” placed on the far left part of the field and the forward-facing arrow on the right. On hover, the two elements come closer together in the middle while the background color of the button and that of the text invert. This subtle change breaks the inertia of the form, making the “Submit” button all the more prominent.CevitxefCevitxef is a restaurant in Bilbao and their website is a stunning synergy of immersive visuals, beautiful parallax effects, and excellent typography combinations. The link to the reservation form is placed in the sticky menu, along with other navigation links. Typography in the menu is mainly black and outlined, but some words are in full color, including parts of the reservation form link (“Reserva Tu Mesa”). The words “Reserva” (reserve) and “Mesa” (table) are in bold black while “Tu” (your) is outlined. This text is placed inside of a rectangle that on hover turns neon pink. When you click on it, a brutalist-looking reservation form appears on the screen. It is entirely in black and white, with lots of grid lines. When you click on a field, a red circle appears on the text line. This attention-grabbing element injects some color into the form and signals that you should enter the required details. The call-to-action button contains scrolling text, which, in combination with the outlined and bold black typography, infuses the form with life and excitement.antidoteFor their contact form, antidote used only lowercase letters. This email and SMS marketing agency opted for a monospace font for both the labels and placeholder text. The font’s typewriter character is a great fit for the form’s slightly retro design, evoking 90s vibes. To start collaborating with this agency, you need to go through a series of questions first. The questions appear one at a time and are positioned at the center of the page where your eyes are most likely to land first. This contact form contains 7 questions that allow “antidote” to learn more about you and your business, helping them choose potential clients. The backdrop, the button background, and the placeholder text are in various shades of blue, and the calmness of these hues accentuates the whiteness of the label and button texts.Mysta ElectricMysta Electric’s contact form is placed at the bottom of his commanding one-page website. Everything is in black and white, with Mysta’s head in the background following every movement of your cursor. The site is filled with huge typography. On hover, some words reveal gorgeous examples of this tattoo artist’s outstanding work, immersing you into his world of “dark melancholy”. The contact page is simple, containing just three fields that allow you to get in touch with Mysta. When you place the mouse on any field, the cursor enlarges. Some text also appears, inviting you to fill in your details. The “Submit” button is transparent, but it becomes eye-catchingly white as soon as you hover over it. The minimalist style of the contact form perfectly blends in with the rest of the content and its simplicity ensures that Mysta’s art remains the star of the site.WE3WE3 is an internship program developed by Jam3, a design and experience agency that’s collaborated with Adidas, Levi’s, eBay, Postmates, and many other huge brands. The application form for the WE3 internship consists of 14 steps. Thanks to the practical bar displayed on the left side of the screen, you can take a look at all of the questions without entering any of your details first. The form is uncluttered, with labels and form fields taking up the majority of the screen. The homogeneity of the white background is interrupted by large, light grey, question numbers. While the form labels are pretty standard, the placeholder text is quirky and humorous. For instance, in the field where you’re supposed to enter your email address, the placeholder text says “We’re not judging you if it’s hotmail.”. Another useful feature each field contains is a character counter as well as a character limit. Even though this form may seem too long, the questions make perfect sense and are there to help find the best applicants for the program.The Badass ProjectThe Badass Project is comprised of two wedding and documentary photographers and filmmakers. The ubiquitous large typography and the interplay of black and yellow hues are among the most prominent features on their website. The design of the contact form is not any different. The backdrop is mostly black while the content is yellow, and the stark contrast between the two colors captures the viewers’ attention from the get-go. The contact form starts with an image of the two members of the team holding binoculars, signaling they are on the lookout for potential clients. Another unusual and rarely seen element on contact forms is the word “Blah”. By writing it repeatedly on the page, the Badass team added a bit of nonsensical playfulness to their form. The typography is mostly in all caps and it goes from outlined and serif to bold and sanserif. These constant style changes make the text more interesting to the viewer’s eye. The call-to-action button includes a graffiti-like font that enhances the form’s alternative vibe. The company’s email address and the phone numbers of the two members are displayed in three lines that on scroll start to move in opposite directions from one another.Alfa CharlieAlfa Charlie is a branding studio based in San Francisco. Their website looks clean, fresh, and modern, providing a beautiful insight into their impressive portfolio. The studio’s contact form stretches across the entire screen. Its design aesthetically matches the rest of the site — it is elegant and simple, with questions written in a big, refined serif typeface. The form starts off with a playful greeting. A simple “Ahoy” sets a relaxed and fun tone. It also breaks the linguistic monotony typical of most contact forms. You can’t immediately grasp the length of the form because the questions are presented to you one by one. However, if you look closely at your cursor, you will notice a circle around it. As soon as you go to the second question, one quarter of the circle becomes dark grey while the rest of it remains in a lighter shade of the same color, suggesting you have three more quarters of the form to go. This seemingly small detail ensures excellent UX because it gives users a hint of how long the form is, which can greatly increase user engagement and conversions. By knowing there aren’t too many questions to go through, users are more likely to stick around and fill in the necessary details. Below the line where you are supposed to type in your replies, you can see two arrows — one lets you go back and the other allows you to proceed with the form as soon as you are done with a question. But when you reach the end of the form, the forward-facing arrow turns into a “Send” button, signaling you’ve successfully completed all the steps.Closing WordsContact forms help bridge the gap between brands and users, which can often make them one of the most important elements on a website. This is especially true if your business hinges on generating leads. In these cases, a contact form can and should be viewed with the same significance as, say, a hero slider.The brands we’ve mentioned in this article understand the significance of contact forms. They’ve created them with just as much attention as any other element on their website, which is why their forms are so well-structured, immersive, and beautifully designed.We hope these innovative examples will be of help when you start creating your next contact form. You can organize yours in several steps if you like, as well as add imagery, illustrations, and other cool visuals to it. Even if you decide to forgo imbuing graphics, you can still inject a fun factor into your form by experimenting with entertaining copy, typography choices, letter sizes and weights, colors, and hover effects. Don’t limit yourself thinking contact, reservation, and submission forms need to be clean and prosaic. Sure, you do need to request certain information from your users, but that doesn’t mean you can’t be creative while doing so. You should incite the audience to contact you, so try your best to create visually stimulating and engaging forms that users won’t be able to resist filling out.Originally published at https://qodeinteractive.com.10 Examples of Innovative Contact Form Design was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

The ONDE Collection Blurs Form + Function

The ONDE Collection, designed by Luca Nichetto for GANDIABLASCO, blurs the line of indoor and outdoor furniture.

Credit Card Payment Form

See the Code - See it Full Page - See Details Wanted to work with some masking so made a payment form so, using vanilla JS and the imask.js library, made a fairly simply payment form that uses regex patterns to detect the credit card type as the user is inputting values and properly applies the relevant spacing associated with that brand. Also wanted to do a smidge of style flair so made a simple SVG card that changes as the user fills out the form. This Pen uses: HTML, CSS, JavaScript, and

Sign Up Form | #CreateWithAdobeXD

Adobe XD Playoff: Design. Rebound. #CreateWithAdobeXD Hope you Like it!