{"id":27830,"date":"2016-08-29T21:01:12","date_gmt":"2016-08-29T13:01:12","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=27830"},"modified":"2022-03-21T21:22:30","modified_gmt":"2022-03-21T13:22:30","slug":"form-ux-design-tips","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/form-ux-design-tips\/","title":{"rendered":"4 Form Design UX Tips You Should Know (With Examples)"},"content":{"rendered":"<p>We tend to think about forms as simply a means to collect user data, but they are also one way, sometimes <em>the only way<\/em>, for our users to <strong>connect with us<\/strong>. It\u2019s probably delusional to think we can make users <em>love<\/em> filling in forms, however it\u2019s certainly possible <strong>to find solutions that don\u2019t annoy them too much<\/strong>, and help them along the process.<\/p>\n<p>While browsing the net we can find <a href=\"https:\/\/twitter.com\/stelian\/status\/720913927639560194\" target=\"_blank\" rel=\"noopener\">sometimes surprising solutions<\/a> that are programmatically correct, but are designed in a way that most likely <strong>makes many users abandon the site because of the poor user experience<\/strong>.<\/p>\n<p>If our forms are designed well, we will be able to not only please our users but also the backend team who can deal with <strong>much less user input errors<\/strong>. Thus, in this article, we\u2019re going to have a look at how we can <strong>minimize user input errors<\/strong> and still <strong>keep our users happy<\/strong>.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/login-registration-form\/\">Login \/ Registration Form: Ideas and Beautiful Examples<\/a>\n\t\t\t\t<\/p>\n<h2>Anticipate User Needs<\/h2>\n<p>Websites and applications have <strong>different user bases & goals<\/strong>, and even the same location can host many forms that collect different kinds of data, just to name the most frequent ones:<\/p>\n<ul>\n<li>Login forms<\/li>\n<li>Registration forms<\/li>\n<li>User profile forms<\/li>\n<li>Newsletter signup forms<\/li>\n<li>Checkout forms<\/li>\n<li>User surveys<\/li>\n<li>Contact forms<\/li>\n<li>Comment forms<\/li>\n<li>Search forms<\/li>\n<\/ul>\n<p>All these form types <strong>require different things<\/strong>. When designing a checkout form it\u2019s crucial to credibly assure users about security, while in the case of comment forms it\u2019s a good idea to <strong>add emojis or other methods that enable users to express their actual mood<\/strong>.<\/p>\n<p>However even similar form types may need to be designed differently, as all sites have their <strong>unique user base<\/strong>. Before embarking on the design process, it\u2019s always a good idea to <strong>anticipate what our users need<\/strong>, and design accordingly.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/anticipatory-design\/\">Anticipatory Design: When Choice is Removed From Decision Making<\/a>\n\t\t\t\t<\/p>\n<h3>Example: Social Logins Targeting User Needs<\/h3>\n<p><a href=\"https:\/\/codepen.io\/\" target=\"_blank\" rel=\"noopener nofollow\">Codepen<\/a>\u2018s login form contains three social logins with Github at the top. This choice would be unreasonable for most sites.<\/p>\n<p>But <strong>it\u2019s perfect for Codepen<\/strong>, as their user base consists of developers, many of whom will want to login with their Github accounts, or connect their development accounts with each other at once.<\/p>\n<figure><a href=\"https:\/\/codepen.io\/login\" target=\"_blank\" rel=\"noopener nofollow\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/form-ux-design-tips\/codepen-login-form.jpg\" width=\"700\" height=\"388\" alt=\"Codepen Login Form\"><\/a><\/figure>\n<h2>Think Mobile-First<\/h2>\n<p>Mobile and desktop users have different needs, but as <strong>completing forms is a much bigger challenge on a mobile screen,<\/strong> using hand gestures than on a physical keyboard, a <strong>mobile-first approach<\/strong> can take us further when we want to design usable forms.<\/p>\n<p>Moreover, many form UI patterns that work well on mobile will work well on desktop as well.<\/p>\n<h3>Example: Tappable Controls<\/h3>\n<p>High quality mobile forms cannot be imagined without <strong>visible controls<\/strong> on which <strong>mobile users can easily tap<\/strong> with their fingers.<\/p>\n<p>The newsletter signup form of the web design conference <a href=\"https:\/\/aneventapart.com\/\" target=\"_blank\" rel=\"noopener\">An Event Apart<\/a> adapts to the way mobile users access the screen \u2013 it contains <strong>two easy-to-tap input fields<\/strong> and a <strong>fingertip-sized button<\/strong>.<\/p>\n<p>The text input fields are higher as usual so that mobile users can easily tap on them, and the big, orange button with a tick icon further encourages users to submit the form.<\/p>\n<figure><a href=\"https:\/\/aneventapart.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/form-ux-design-tips\/aneventapart-mobile.jpg\" width=\"377\" height=\"648\" alt=\"An Event Apart Newsletter Form on Mobile\"><\/a><\/figure>\n<p>The desktop version of the site <strong>uses the same form design<\/strong>, as it also looks good and works well on larger screens.<\/p>\n<figure><a href=\"https:\/\/aneventapart.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/form-ux-design-tips\/aneventapart-desktop.jpg\" width=\"700\" height=\"350\" alt=\"An Event Apart Newsletter Form on Desktop\"><\/a><\/figure>\n<h3>Example: Expendable Input<\/h3>\n<p>When designing forms for mobile, it\u2019s always important to consider how we can <strong>minimize the space we use<\/strong>. The <strong>expendable input<\/strong> UI design pattern has become quite popular lately, and it works especially well on mobile.<\/p>\n<p><a href=\"https:\/\/www.booking.com\/\" target=\"_blank\" rel=\"noopener\">Booking.com<\/a> leverages this pattern in the search form on its mobile site. When the user taps into the search field it expands in order to <strong>leave more space for gestures<\/strong>, and a select list with recommendations also appears below it.<\/p>\n<p>When the user taps out of the field, it shrinks, and the extra information disappears.<\/p>\n<figure><a href=\"https:\/\/www.booking.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/form-ux-design-tips\/booking-expanding-input.gif\" width=\"414\" height=\"684\" alt=\"Booking.com Expanding Input\"><\/a><\/figure>\n<h3>Example: Morphing Button<\/h3>\n<p><strong>Morphing buttons<\/strong> take the expendable input pattern one step even further, as users first see a button, which then <strong>morphs into a form<\/strong> when they tap on it.<\/p>\n<p>The screenshot below is from The Startup\u2019s <a href=\"https:\/\/medium.com\/swlh\/creative-form-input-field-design-examples-bfe5dd50808a#.abjetew2q\" target=\"_blank\" rel=\"noopener nofollow\">brilliant article<\/a> on innovative form design, which presents many other creative solutions as well.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/form-ux-design-tips\/morphing-button.gif\" width=\"635\" height=\"563\" alt=\"Morphing Button to Form\"><figcaption><a href=\"https:\/\/medium.com\/swlh\/creative-form-input-field-design-examples-bfe5dd50808a#.qg2mcvybi\" target=\"_blank\" rel=\"noopener nofollow\">IMAGE: The Startup<\/a><\/figcaption><\/figure>\n<h2>Facilitate Input Take-In<\/h2>\n<p>Lengthy forms tend to deter users. The best we can do is to <strong>only ask for the input we really need<\/strong>. This is not only important from a user experience perspective, but users can also hesitate to give out too much personal information because of <strong>privacy concerns<\/strong>.<\/p>\n<p>Sometimes, however, we <em>still<\/em> have to go along with longer forms. In this case it\u2019s a good idea to <strong>slice them up into smaller chunks<\/strong>, and <strong>serve the chunks as successive screens.<\/strong><\/p>\n<p>Many e-Commerce sites (e.g. Amazon) use this solution in order to reduce cart abandonment rates.<\/p>\n<p class=\"note\"> <strong>Recommended Reading:<\/strong>\n  <a href=\"https:\/\/www.hongkiat.com\/blog\/reduce-cart-abandonment-checkout-ux\/\">How to Reduce Cart Abandonment Rates on your e-Commerce Site<\/a><\/p>\n<p>If we want to ease completing form fields, the rule of thumb is to <strong>reduce both distractions and user actions<\/strong> as much as possible.<\/p>\n<h3>Example: Personalized Input Picker<\/h3>\n<p>Different content pickers, such as date pickers or color pickers, don\u2019t only make it easier to take in the right input, but they also make the form <strong>more attractive<\/strong>, and significantly <strong>reduce user errors<\/strong>.<\/p>\n<p>The <a href=\"https:\/\/en.todoist.com\/\" target=\"_blank\" rel=\"noopener\">Todoist<\/a> list-taking app <strong>gives personalized hints<\/strong> inside its date picker when the user hovers over the days.<\/p>\n<p>For instance on the screenshot below, the user can see that for Aug 31 she already has 2 due tasks, and can take this information into account when deciding the right date for tasks. It\u2019s an excellent idea for an app where productivity is the user\u2019s main concern.<\/p>\n<figure><a href=\"https:\/\/en.todoist.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/form-ux-design-tips\/todoist-date-picker.jpg\" width=\"700\" height=\"392\" alt=\"Todoist Date Picker\"><\/a><\/figure>\n<h3>Example: Drag-and-Drop Input<\/h3>\n<p><strong>Drag-and-drop designs<\/strong> usually work well with file upload fields, especially where users are supposed to upload images.<\/p>\n<p>They probably don\u2019t reduce user actions that much compared to the ordinary <span class=\"key\">Upload a file<\/span> button, but they make it much easier to <strong>choose which file the user wants to upload<\/strong>, therefore reducing the chance of submitting a wrong file.<\/p>\n<p><a href=\"https:\/\/wordpress.com\/\" target=\"_blank\" rel=\"noopener\">WordPress.com<\/a> provides an elegant and intuitive drag-and-drop user input interface in its post editor form. The <strong>little thumbnails <\/strong>and the<strong> visual representation of the already uploaded files<\/strong> further help users quickly execute the upload.<\/p>\n<figure><a href=\"https:\/\/wordpress.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/form-ux-design-tips\/wp-drag-and-drop.jpg\" width=\"700\" height=\"338\" alt=\"WordPress.com Drag-and-Drop Input\"><\/a><\/figure>\n<h3>Example: Overlay to Remove Distractions<\/h3>\n<p>If users are distracted while completing our form, they are more prone to errors, and also get annoyed more easily<\/p>\n<p><strong>Content overlays<\/strong> are a great alternative to minimalist form design. They are used <strong>by more complex sites<\/strong> that want to display different kinds of information on the same screen.<\/p>\n<p>On the screenshot below, you can see the desktop version of <a href=\"https:\/\/www.booking.com\" target=\"_blank\" rel=\"noopener\">Booking.com<\/a>. When users hover on the search form the rest of the content gets <strong>covered by a greyish overlay<\/strong> to help them <strong>keep focused on the form filling process<\/strong>.<\/p>\n<figure><a href=\"https:\/\/www.booking.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/form-ux-design-tips\/booking-extra-overlay.gif\" width=\"700\" height=\"398\" alt=\"Booking.com Extra Overlay\"><\/a><\/figure>\n<h2>Give Feedback to Users<\/h2>\n<p>Giving the <strong>right feedback at the right time<\/strong> can significantly improve user experience.<\/p>\n<p>In form design, there are <strong>two kinds of user feedbacks<\/strong>:<\/p>\n<ol>\n<li><strong>Feedback given <em>before<\/em> form submission<\/strong> \u2013 in order to <strong>reduce errors <\/strong>and<strong> form abandonment rates<\/strong>, such as progress trackers, instant input validation that immediately rewards users for the correct input, or helper tooltips<\/li>\n<li><strong>Feedback given <em>after<\/em> form submission<\/strong> \u2013 in order to let users know <strong>they committed an error<\/strong>, such as error messages<\/li>\n<\/ol>\n<p>The kind of user feedback our users need highly depends on the characteristics of our target audience, and the goal of our site.<\/p>\n<h3>Example: Progress Tracker<\/h3>\n<p>Forms longer than one page, such as surveys and most e-Commerce checkout forms can take leverage of the <strong>progress tracker<\/strong> design pattern. Progress trackers give an <strong>instant visual feedback<\/strong> to users about their status, and encourage them to move on with the process.<\/p>\n<p>The <a href=\"https:\/\/www.snapsurveys.com\/\" target=\"_blank\" rel=\"noopener\">SnapSurveys<\/a> survey creator web app shows a little progress tracker right above the submit buttons so that users can <strong>naturally catch sight of it<\/strong>.<\/p>\n<p>he progress tracker doesn\u2019t use any labels, but the way it\u2019s designed <strong>makes its goal clear<\/strong> \u2013 the number of circles indicates the number of steps, the already executed steps becomes blue, and users can easily see how many steps are still ahead of them.<\/p>\n<figure><a href=\"https:\/\/www.snapsurveys.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/form-ux-design-tips\/snapsurveys-progress-tracker.jpg\" width=\"700\" height=\"380\" alt=\"Snapsurveys Progress Tracker\"><\/a><\/figure>\n<h3>Example: Real-Time Validation<\/h3>\n<p><a href=\"https:\/\/www.thebodyshop.com\/en-gb\/\" target=\"_blank\" rel=\"noopener\">The Body Shop<\/a> cosmetics retailer uses <strong>real-time validation<\/strong> on its User Profile form to eliminate errors and improve the UX of the form completion process.<\/p>\n<p>Inputs are checked while users complete the form, and the right and wrong answers are immediately indicated by <strong>easily distinguishable icons<\/strong> a little bit further on the right but still in the visible area.<\/p>\n<figure><a href=\"https:\/\/www.thebodyshop.com\/en-gb\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/form-ux-design-tips\/bodyshop-user-profile.jpg\" width=\"700\" height=\"753\" alt=\"The Body Shop User Input Validation\"><\/a><\/figure>\n<h3>Example: Expressive Tooltips<\/h3>\n<p><strong>Understandable microcopy<\/strong> is also an essential part of successful user feedback in form design. By definition, the microcopy of a website consists of <strong>small chunks of text<\/strong> used in different elements \u2013 labels, buttons, error messages, tooltips, etc.<\/p>\n<p class=\"note\"> <strong>Recommended Reading:<\/strong>\n  <a href=\"https:\/\/www.hongkiat.com\/blog\/webcopy-microcopy-tips-designers\/\">Tips to Master Microcopy for Web Designers<\/a><\/p>\n<p>In its login form, the <a href=\"https:\/\/www.barclays.co.uk\/\" target=\"_blank\" rel=\"noopener\">Barclay\u2019s<\/a> banking group replies to the questions users potentially may ask with the help of <strong>well-designed tooltips<\/strong> that include <strong>easy-to-understand microcopy<\/strong>.<\/p>\n<p>The tooltips are hidden behind little <span class=\"key\">?<\/span> icons <strong>not to distract users<\/strong> who know how to complete the login form, but <strong>to be always present<\/strong> for users who are unsure.<\/p>\n<p>Some of the tooltips even contain <strong>a little visual of an annotated debit card<\/strong> so that users can easily find the data they have to enter into the login form.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/form-ux-design-tips\/barclays-tooltip.jpg\" width=\"700\" height=\"473\" alt=\"Barclay's Tooltip \"><\/figure>","protected":false},"excerpt":{"rendered":"<p>We tend to think about forms as simply a means to collect user data, but they are also one way, sometimes the only way, for our users to connect with us. It\u2019s probably delusional to think we can make users love filling in forms, however it\u2019s certainly possible to find solutions that don\u2019t annoy them&hellip;<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[1312],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>4 Form Design UX Tips You Should Know (With Examples) - Hongkiat<\/title>\n<meta name=\"description\" content=\"We tend to think about forms as simply a means to collect user data, but they are also one way, sometimes the only way, for our users to connect with us.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/form-ux-design-tips\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"4 Form Design UX Tips You Should Know (With Examples)\" \/>\n<meta property=\"og:description\" content=\"We tend to think about forms as simply a means to collect user data, but they are also one way, sometimes the only way, for our users to connect with us.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/form-ux-design-tips\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-29T13:01:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-21T13:22:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/form-ux-design-tips\/codepen-login-form.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/form-ux-design-tips\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/form-ux-design-tips\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"4 Form Design UX Tips You Should Know (With Examples)\",\"datePublished\":\"2016-08-29T13:01:12+00:00\",\"dateModified\":\"2022-03-21T13:22:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/form-ux-design-tips\\\/\"},\"wordCount\":1546,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/form-ux-design-tips\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/form-ux-design-tips\\\/codepen-login-form.jpg\",\"keywords\":[\"Forms\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/form-ux-design-tips\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/form-ux-design-tips\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/form-ux-design-tips\\\/\",\"name\":\"4 Form Design UX Tips You Should Know (With Examples) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/form-ux-design-tips\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/form-ux-design-tips\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/form-ux-design-tips\\\/codepen-login-form.jpg\",\"datePublished\":\"2016-08-29T13:01:12+00:00\",\"dateModified\":\"2022-03-21T13:22:30+00:00\",\"description\":\"We tend to think about forms as simply a means to collect user data, but they are also one way, sometimes the only way, for our users to connect with us.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/form-ux-design-tips\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/form-ux-design-tips\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/form-ux-design-tips\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/form-ux-design-tips\\\/codepen-login-form.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/form-ux-design-tips\\\/codepen-login-form.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/form-ux-design-tips\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"4 Form Design UX Tips You Should Know (With Examples)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"4 Form Design UX Tips You Should Know (With Examples) - Hongkiat","description":"We tend to think about forms as simply a means to collect user data, but they are also one way, sometimes the only way, for our users to connect with us.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/form-ux-design-tips\/","og_locale":"en_US","og_type":"article","og_title":"4 Form Design UX Tips You Should Know (With Examples)","og_description":"We tend to think about forms as simply a means to collect user data, but they are also one way, sometimes the only way, for our users to connect with us.","og_url":"https:\/\/www.hongkiat.com\/blog\/form-ux-design-tips\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-08-29T13:01:12+00:00","article_modified_time":"2022-03-21T13:22:30+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/form-ux-design-tips\/codepen-login-form.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/form-ux-design-tips\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/form-ux-design-tips\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"4 Form Design UX Tips You Should Know (With Examples)","datePublished":"2016-08-29T13:01:12+00:00","dateModified":"2022-03-21T13:22:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/form-ux-design-tips\/"},"wordCount":1546,"commentCount":9,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/form-ux-design-tips\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/form-ux-design-tips\/codepen-login-form.jpg","keywords":["Forms"],"articleSection":["UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/form-ux-design-tips\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/form-ux-design-tips\/","url":"https:\/\/www.hongkiat.com\/blog\/form-ux-design-tips\/","name":"4 Form Design UX Tips You Should Know (With Examples) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/form-ux-design-tips\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/form-ux-design-tips\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/form-ux-design-tips\/codepen-login-form.jpg","datePublished":"2016-08-29T13:01:12+00:00","dateModified":"2022-03-21T13:22:30+00:00","description":"We tend to think about forms as simply a means to collect user data, but they are also one way, sometimes the only way, for our users to connect with us.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/form-ux-design-tips\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/form-ux-design-tips\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/form-ux-design-tips\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/form-ux-design-tips\/codepen-login-form.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/form-ux-design-tips\/codepen-login-form.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/form-ux-design-tips\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"4 Form Design UX Tips You Should Know (With Examples)"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7eS","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=27830"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27830\/revisions"}],"predecessor-version":[{"id":59307,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27830\/revisions\/59307"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=27830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=27830"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=27830"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=27830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}