{"id":45247,"date":"2018-08-28T12:09:22","date_gmt":"2018-08-28T19:09:22","guid":{"rendered":"http:\/\/webdesignledger.com\/?p=45247"},"modified":"2018-08-28T12:09:22","modified_gmt":"2018-08-28T19:09:22","slug":"lets-make-filling-forms-formal","status":"publish","type":"post","link":"https:\/\/webdesignledger.com\/lets-make-filling-forms-formal\/","title":{"rendered":"What Should a Mobile Form Look Like"},"content":{"rendered":"<p style=\"text-align: center;\"><em><strong>As an avid internet user, both mobile and computer, I think it\u2019s safe to safe that filling out forms is one of the worst things ever. As boring and time consuming as they can be, they are undisputedly necessary. Today, we are looking at what should a mobile form look like and how to give it a formal touch.<\/strong><\/em><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s think for a second about how many times we use forms for an online interaction. You use them basically anytime you purchase goods, hotel rooms, or movie tickets. Not to mention, companies often use them to bring better service to the customer. So, the question remains: what can we do to make this process better? I\u2019m glad you asked.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Say no to too much info<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">In terms of a transaction form, one thing that needs to become the norm is putting all the necessary information on one page. Notice that I said \u201cnecessary.\u201d Too often, I\u2019ll go online to order something and I\u2019m bombarded with additional advertisements and options that make my eyes water if I stare too long. Listen, I already purchased something from your website. You don\u2019t have to convince me anymore.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-45249 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/5d0024ed-2-best-practices-for-mobile-form-design-970x381.png\" alt=\"mobile form\" width=\"970\" height=\"381\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 970px; --smush-placeholder-aspect-ratio: 970\/381;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-45249\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/5d0024ed-2-best-practices-for-mobile-form-design-970x381.png\" alt=\"mobile form\" width=\"970\" height=\"381\" \/><\/noscript><\/p>\n<h2><span style=\"font-weight: 400;\">First impressions mean the most<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">I think most people will admit that if the form looks too complex, they won\u2019t finish it. It\u2019s not really anything new. People are going online for their convenience. If you make something too complex, or even just look complex, people will avoid it. I\u2019m certainly guilty of thinking this way. Make forms effective and efficient.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">The perfect <a href=\"https:\/\/webdesignledger.com\/ui\/forms-ui\/\">mobile FORM<\/a> (ula)<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">What exactly does a good form comprise of? Believe it or not, there is a basic recipe for a good form. One that doesn\u2019t overwhelm users, and one that gets the job done. Here\u2019s what we\u2019ve got:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-45250 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/c4515e8b-6-best-practices-for-mobile-form-design-970x271.png\" alt=\"mobile form\" width=\"970\" height=\"271\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 970px; --smush-placeholder-aspect-ratio: 970\/271;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-45250\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/c4515e8b-6-best-practices-for-mobile-form-design-970x271.png\" alt=\"mobile form\" width=\"970\" height=\"271\" \/><\/noscript><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Input fields<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Here, you\u2019ll have room for all the required information. Things such as passwords, discount codes, sliders, checkboxes, etc. will all be input in these boxes.<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Field labels<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Field labels tell the user what to put into the input fields.<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Structure<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">You have to have some sort of framework for your fields. Make the order make sense and it\u2019ll be easier to follow along.<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Action button(s)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The page will have to have at least one button that submits all the input info.<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Feedback<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">After the action button is triggered, the submitter should get a notification that everything went smoothly.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-45251 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2e0899cd-23-best-practices-for-mobile-form-design.gif\" alt=\"mobile form\" width=\"800\" height=\"600\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/600;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-45251\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/2e0899cd-23-best-practices-for-mobile-form-design.gif\" alt=\"mobile form\" width=\"800\" height=\"600\" \/><\/noscript><\/p>\n<p><span style=\"font-weight: 400;\">There are many successful <a href=\"https:\/\/www.formstack.com\/templates\/mobile-form\">form templates<\/a> out there. Depending on what the form is used for, it will probably look a little different than the last. The key is to make it simple, understandable, and convenient for the user. Remember, people do things online to make it easier for them. A complex form will only scare away potential customers.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-45252 lazyload\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/65fc55b5-29-best-practices-for-mobile-form-design.gif\" alt=\"mobile form\" width=\"800\" height=\"600\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/600;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-45252\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/65fc55b5-29-best-practices-for-mobile-form-design.gif\" alt=\"mobile form\" width=\"800\" height=\"600\" \/><\/noscript><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As an avid internet user, both mobile and computer, I think it\u2019s safe to safe that filling out forms is one of the worst things ever. As boring and time consuming as they can be, they are undisputedly necessary. Today, we are looking at what should a mobile form look like and how to give [&hellip;]<\/p>\n","protected":false},"author":1932,"featured_media":45248,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[476,523,519],"tags":[17342,17341],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts\/45247"}],"collection":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/users\/1932"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/comments?post=45247"}],"version-history":[{"count":0,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts\/45247\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/media\/45248"}],"wp:attachment":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/media?parent=45247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/categories?post=45247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/tags?post=45247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}