{"id":25222,"date":"2021-06-04T15:00:14","date_gmt":"2021-06-04T13:00:14","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=25222"},"modified":"2021-06-09T11:26:01","modified_gmt":"2021-06-09T09:26:01","slug":"innovative-contact-form-design","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/innovative-contact-form-design\/","title":{"rendered":"10 Examples of Innovative Contact Form Design"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]<strong>More so than any other element on a site, contact forms help incite and establish interaction between a user and a business.<\/strong> They are a medium that helps generate more leads, which is why they should not be treated as an afterthought.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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\u2019 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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#zorka-agency\">Zorka Agency<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#730dc\">730DC<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#noodz-nothing-to-hide\">Noodz \u2013 Nothing to hide<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#the-covid-art-museum\">The Covid Art Museum<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#cevitxef\">Cevitxef<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#antidote\">antidote<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#mysta-electric\">Mysta Electric<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#we3\">WE3<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#the-badass-project\">The Badass Project<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#alfa-charlie\">Alfa Charlie<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"zorka-agency\"><\/a>Zorka Agency<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Zorka-Agency.jpg\" class=\"attachment-full size-full\" alt=\"Zorka Agency\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Zorka-Agency.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Zorka-Agency-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Zorka-Agency-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Zorka-Agency-620x355.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/zorka.agency\/\" target=\"_blank\" rel=\"noopener\">Zorka Agency<\/a> is an international digital marketing agency focused on developing ROI-forecasted strategies. They\u2019ve worked with Activision Blizzard, Hennessy, Domino\u2019s Pizza, AliExpress, and many other notable companies. Their homepage is all about juxtapositions between the <a href=\"https:\/\/qodeinteractive.com\/magazine\/examples-of-black-websites\/\">black background<\/a> and white and yellow typography. Save for several geometric shapes and a smiley face, you won\u2019t see too many visuals on the agency\u2019s site. Instead, they manage to keep the visitor\u2019s attention by skillfully combining <a href=\"https:\/\/qodeinteractive.com\/magazine\/uppercase-sans-serif-typography-in-modern-web-design\/\">uppercase sans serif typography<\/a> 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 \u201cSay Hello\u201d and type your full name in a designated field. The encircled \u201cNext Step\u201d button informs you that this is just the beginning of an <strong>imaginative contact form<\/strong>. Instead of listing form labels and fields in one or two columns (which is a common practice on most sites), <strong>Zorka Agency structured their contact form as a 5-step feature asking clients for required information one question at a time.<\/strong> Users can see five short lines on the side, suggesting the number of questions the form contains. <strong>A contact form that doesn\u2019t immediately reveal its content seems less scary to viewers.<\/strong> If they were to see a lot of questions at once, they\u2019d be more likely to skip the form. By requesting information from users one step at a time, brands ensure their audience doesn\u2019t feel stressed out by the sheer length of the form. And that, in return, positively affects conversion rates.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"730dc\"><\/a>730DC<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/730DC.jpg\" class=\"attachment-full size-full\" alt=\"730DC\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/730DC.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/730DC-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/730DC-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/730DC-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"http:\/\/730dc.com\/\" target=\"_blank\" rel=\"noopener\">730DC<\/a> 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 <strong>extremely minimal<\/strong>. Its content is <strong>in grid and the screen is divided into several sections<\/strong>. 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\u2019s 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\u2019 end. <strong>Both forms are incredibly simple and geometric, yet it is precisely their minimalism, rawness, and slightly brutalist vibe that makes them interesting.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"noodz-nothing-to-hide\"><\/a>Noodz \u2013 Nothing to hide<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Noodz-\u2013-Nothing-to-hide-1.jpg\" class=\"attachment-full size-full\" alt=\"Noodz \u2013 Nothing to hide\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Noodz-\u2013-Nothing-to-hide-1.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Noodz-\u2013-Nothing-to-hide-1-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Noodz-\u2013-Nothing-to-hide-1-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Noodz-\u2013-Nothing-to-hide-1-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.wearenoodz.com\/\" target=\"_blank\" rel=\"noopener\">Noodz \u2013 Nothing to hide<\/a> 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 <strong>screaming lime green color<\/strong> 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\u2019s content. <strong>Its vibrancy disrupts the more peaceful pink and purple hue used on the form, creating a simple yet exciting and alluring visual unit.<\/strong> 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. <strong>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.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-creative-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"the-covid-art-museum\"><\/a>The Covid Art Museum<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/The-Covid-Art-Museum.jpg\" class=\"attachment-full size-full\" alt=\"The Covid Art Museum\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/The-Covid-Art-Museum.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/The-Covid-Art-Museum-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/The-Covid-Art-Museum-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/The-Covid-Art-Museum-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/covidartmuseum.com\/?submit=true\" target=\"_blank\" rel=\"noopener\">The Covid Art Museum<\/a> is the world\u2019s 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 \u201cKeep Social Distance\u201d text will appear. You can explore the website in dark and light modes. Depending on your choice, the color of typography changes. However, <strong>the artwork submission menu link stays red at all times, ensuring this section is noticeable regardless of the selected mode<\/strong>. On click, the form appears in the viewport. If you don\u2019t like its default location (on the right-hand side of the screen), you can move it wherever you like. The form\u2019s design is <strong>simple and clean<\/strong>, combining white and grey sections with black and red typography. The call-to-action button is in red, with \u201cSubmit\u201d placed on the far left part of the field and the forward-facing arrow on the right. On hover, the <strong>two elements come closer together in the middle while the background color of the button and that of the text invert.<\/strong> This subtle change breaks the inertia of the form, making the \u201cSubmit\u201d button all the more prominent.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"cevitxef\"><\/a>Cevitxef<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Cevitxef.jpg\" class=\"attachment-full size-full\" alt=\"Cevitxef\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Cevitxef.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Cevitxef-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Cevitxef-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Cevitxef-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.cevitxef.com\/\" target=\"_blank\" rel=\"noopener\">Cevitxef<\/a> is a restaurant in Bilbao and their website is a stunning synergy of immersive visuals, beautiful parallax effects, and excellent <a href=\"https:\/\/qodeinteractive.com\/magazine\/google-font-combinations\/\">typography combinations<\/a>. 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 (\u201cReserva Tu Mesa\u201d). The words \u201cReserva\u201d (reserve) and \u201cMesa\u201d (table) are in bold black while \u201cTu\u201d (your) is outlined. This text is placed inside of a rectangle that on hover turns neon pink. When you click on it, a <strong>brutalist-looking reservation form<\/strong> 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. <strong>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.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"antidote\"><\/a>antidote<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/antidote.jpg\" class=\"attachment-full size-full\" alt=\"antidote\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/antidote.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/antidote-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/antidote-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/antidote-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For their contact form, <a href=\"https:\/\/antidote.email\/let-s-talk\" target=\"_blank\" rel=\"noopener\">antidote<\/a> used only lowercase letters. This email and SMS marketing agency opted for a <strong>monospace font<\/strong> for both the labels and placeholder text. <strong>The font\u2019s typewriter character is a great fit for the form\u2019s slightly retro design, evoking 90s vibes.<\/strong> 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 \u201cantidote\u201d 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"mysta-electric\"><\/a>Mysta Electric<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Mysta-Electric.jpg\" class=\"attachment-full size-full\" alt=\"Mysta Electric\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Mysta-Electric.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Mysta-Electric-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Mysta-Electric-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Mysta-Electric-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.mystaelectric.com\/#contact\" target=\"_blank\" rel=\"noopener\">Mysta Electric<\/a>\u2019s contact form is placed at the bottom of his commanding one-page website. Everything is in black and white, with Mysta\u2019s head in the background following every movement of your cursor. The site is filled with huge typography. On hover, some words reveal<strong> gorgeous examples of this tattoo artist\u2019s outstanding work, immersing you into his world of \u201cdark melancholy\u201d.<\/strong> 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 \u201cSubmit\u201d 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\u2019s art remains the star of the site.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"we3\"><\/a>WE3<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/WE3.jpg\" class=\"attachment-full size-full\" alt=\"WE3\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/WE3.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/WE3-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/WE3-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/WE3-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/we3.jam3.com\/designer\/apply\" target=\"_blank\" rel=\"noopener\">WE3<\/a> is an internship program developed by Jam3, a design and experience agency that\u2019s collaborated with Adidas, Levi\u2019s, 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. <strong>The homogeneity of the white background is interrupted by large, light grey, question numbers.<\/strong> While the form labels are pretty standard, <strong>the placeholder text is quirky and humorous<\/strong>. For instance, in the field where you\u2019re supposed to enter your email address, the placeholder text says \u201cWe\u2019re not judging you if it\u2019s hotmail.\u201d. Another useful feature each field contains is a <strong>character counter<\/strong> as well as a <strong>character limit<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"the-badass-project\"><\/a>The Badass Project<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/The-Badass-Project.jpg\" class=\"attachment-full size-full\" alt=\"The Badass Project\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/The-Badass-Project.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/The-Badass-Project-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/The-Badass-Project-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/The-Badass-Project-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.badass35.com\/en\/contact\" target=\"_blank\" rel=\"noopener\">The Badass Project<\/a> is comprised of two wedding and documentary photographers and filmmakers. The ubiquitous <a href=\"https:\/\/qodeinteractive.com\/magazine\/large-typography-web-design\/\">large typography<\/a> 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\u2019 attention from the get-go. The contact form starts with an image of the two members of the team holding <strong>binoculars, signaling they are on the lookout for potential clients<\/strong>. Another unusual and rarely seen element on contact forms is the word \u201cBlah\u201d. 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. <strong>These constant style changes make the text more interesting to the viewer\u2019s eye.<\/strong> The call-to-action button includes a <strong>graffiti-like font<\/strong> that enhances <strong>the form\u2019s alternative vibe<\/strong>. The company\u2019s 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"alfa-charlie\"><\/a>Alfa Charlie<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Alfa-Charlie.jpg\" class=\"attachment-full size-full\" alt=\"Alfa Charlie\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Alfa-Charlie.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Alfa-Charlie-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Alfa-Charlie-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Alfa-Charlie-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/alfacharlie.co\/contact\/\" target=\"_blank\" rel=\"noopener\">Alfa Charlie<\/a> 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\u2019s contact form <strong>stretches across the entire screen<\/strong>. Its design aesthetically matches the rest of the site \u2013 it is elegant and simple, with questions written in a big, refined serif typeface. The form starts off with a playful greeting. <strong>A simple \u201cAhoy\u201d sets a relaxed and fun tone. It also breaks the linguistic monotony typical of most contact forms.<\/strong> You can\u2019t 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, <strong>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<\/strong>. This seemingly small detail<strong> ensures excellent UX because it gives users a hint of how long the form is, which can greatly increase user engagement and conversions.<\/strong> By knowing there aren\u2019t 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 \u2013 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, <strong>the forward-facing arrow turns into a \u201cSend\u201d button<\/strong>, signaling you\u2019ve successfully completed all the steps.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Closing Words<\/h2>\n<p>[\/vc_column_text][vc_column_text]Contact 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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The brands we\u2019ve mentioned in this article understand the significance of contact forms. They\u2019ve 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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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\u2019t 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\u2019t mean you can\u2019t 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\u2019t be able to resist filling out.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>As a medium that helps connect brands with their users, contact forms should be crafted with the utmost attention. We\u2019ve singled out some of the most innovative and engaging examples that demonstrate just how creative you can get with your contact forms<\/p>\n","protected":false},"author":4,"featured_media":25263,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,40,43,36],"class_list":["post-25222","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-creative","tag-inspiration","tag-showcase","tag-ux"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/25222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=25222"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/25222\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/25263"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=25222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=25222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=25222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}