{"id":1002,"date":"2017-09-15T16:00:35","date_gmt":"2017-09-15T16:00:35","guid":{"rendered":"https:\/\/www.siteuptime.com\/blog\/?p=1002"},"modified":"2017-09-21T18:32:58","modified_gmt":"2017-09-21T18:32:58","slug":"the-role-of-ux-in-contact-form-design","status":"publish","type":"post","link":"https:\/\/www.siteuptime.com\/blog\/2017\/09\/15\/the-role-of-ux-in-contact-form-design\/","title":{"rendered":"The Role of UX in Contact Form Design"},"content":{"rendered":"<p>There are <a href=\"http:\/\/www.internetlivestats.com\/total-number-of-websites\/\">more than 1 billion websites<\/a>\u00a0on the web right now, and that number continues to climb.<\/p>\n<p>So, what are the odds that someone lands on yours? When they do, what are you doing to keep them there and encourage them to come back for more?<\/p>\n<p>Your contact form is the perfect place to turn a casual browser into a long-time customer. By providing a spot for visitors to reach out, ask questions, and learn more about what you do, you&#8217;re encouraging them to invest in your brand.<\/p>\n<p>Yet, many companies fail to take advantage of this valuable opportunity, creating a contact form design that&#8217;s bland, incomplete, or difficult to use.<\/p>\n<p>Today, we&#8217;re talking about the importance of incorporating user experience design (UX) into your contact page.<\/p>\n<p>Ready to learn more? Let&#8217;s dive in!<\/p>\n<h2>Incorporating UX into Your Contact Form Design<\/h2>\n<p>Put simply, UX design is user-centered. It means approaching every aspect of your web design from the user&#8217;s point-of-view.<\/p>\n<p>As a webmaster, pages that you think are intuitive and easy to navigate might not be quite as simple for someone with limited design experience.<\/p>\n<p>And the first thing\u00a0web\u00a0visitors do with they encounter\u00a0a confusing website? They\u00a0<a href=\"https:\/\/blog.hubspot.com\/marketing\/why-people-leave-your-website\">leave it<\/a>.<\/p>\n<p>To make sure your visitors find and use your contact form, it&#8217;s important to make it as accessible and user-friendly as possible. Doing so will <a href=\"https:\/\/www.siteuptime.com\/blog\/2017\/07\/04\/why-you-need-to-use-performance-for-better-ux-design\/\">boost your page&#8217;s performance<\/a> and build brand credibility.<\/p>\n<p>Let&#8217;s talk about some considerations to keep in mind.<\/p>\n<h2>Optimize Your\u00a0Input Fields<\/h2>\n<p>Your input fields are the places in your form where visitors can type in their information, along with any questions they might have.<\/p>\n<p>These fields offer the client the option for you to contact them, rather than the other way around.<\/p>\n<p>For example, <a href=\"http:\/\/www.americanvoicemail.com\">American Voicemail<\/a> allows visitors to enter their name, email, phone number, and company name, with a promise that the company will call to chat.<\/p>\n<p>When designing the layout of your fields, try the following tactics:<\/p>\n<ol>\n<li>Place all titles and labels above their input fields rather than below<\/li>\n<li>Simplify questions to one per row<\/li>\n<li>Provide an input field that&#8217;s the appropriate length for the answer you expect (i.e. don&#8217;t leave a one-inch space for an email field).<\/li>\n<li>Limit your form to 3-5 fields.<\/li>\n<\/ol>\n<h2>Highlight Important Data and Minimize the Rest<\/h2>\n<p>When someone quickly scans your form, is all the important information front-and-center? Or, will visitors have to dig around to find your phone number, address, and input fields?<\/p>\n<p>One way that these key elements can get lost is\u00a0by adding too much information to your contact form or muddying it up with too many anti-spam measures.<\/p>\n<h3>A Busybody Design<\/h3>\n<p>To improve conversion rates, keep your contact data and information short and sweet. Your headquarters address, phone number, and email address, along with operating hours and your input fields are often all that&#8217;s needed.<\/p>\n<p>A contact form design that&#8217;s filled with maps, images, and individual contact information for your executives can be confusing to follow. Stick with the basics and delegate the rest of the info to your &#8220;Team&#8221; page or a similar section.<\/p>\n<h3>A Note on Captchas<\/h3>\n<p>It&#8217;s important to ensure the security of your website, as well as safeguard user information. One way to do this is to add a captcha form to your contact page.<\/p>\n<p>From clicking &#8220;I am not a robot&#8221; to repeating a series of jumbled letters and numbers, there are a few ways companies accomplish this.<\/p>\n<p>Yet, <a href=\"https:\/\/moz.com\/blog\/captchas-affect-on-conversion-rates\">studies show<\/a> that time-consuming captcha forms can reduce a company&#8217;s conversion rate by 3.2%.<\/p>\n<p>By brushing up on your HTML and JavaScript skills, you can easily <a href=\"http:\/\/www.nfriedly.com\/techblog\/2009\/11\/how-to-build-a-spam-free-contact-forms-without-captchas\/\">create a form<\/a> that&#8217;s both spam-free and user-friendly without this user verification step.<\/p>\n<h2>Up and Running: A Contact Form That Delivers<\/h2>\n<p>Focusing on user experience during the contact form design process ensures your visitors know you understand them and want them to reach out.<\/p>\n<p>Another way to prove your dedication? Ensure your website is always live and running, whenever prospects and customers want to talk to you.<\/p>\n<p>Our <a href=\"https:\/\/siteuptime.com\/services.php\">remote monitoring services<\/a> help maximize your uptime so you never miss an opportunity to connect.<\/p>\n<p><a href=\"https:\/\/siteuptime.com\/contact.php\">Contact us<\/a>\u00a0for more information!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are more than 1 billion websites\u00a0on the web right now, and that number continues to climb. So, what are the odds that someone lands on yours? When they do, what are you doing to keep them there and encourage them to come back for more? Your contact form is the perfect place to turn [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":1003,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[106],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The Role of UX in Contact Form Design<\/title>\n<meta name=\"description\" content=\"Contact form design is all about usability. Let&#039;s delve into the role of UX and what you can do to improve your contact page experience.\" \/>\n<meta name=\"robots\" content=\"index, nofollow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.siteuptime.com\/blog\/2017\/09\/15\/the-role-of-ux-in-contact-form-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Role of UX in Contact Form Design\" \/>\n<meta property=\"og:description\" content=\"Contact form design is all about usability. Let&#039;s delve into the role of UX and what you can do to improve your contact page experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.siteuptime.com\/blog\/2017\/09\/15\/the-role-of-ux-in-contact-form-design\/\" \/>\n<meta property=\"og:site_name\" content=\"SiteUptime Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-15T16:00:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-09-21T18:32:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.siteuptime.com\/blog\/wp-content\/uploads\/2017\/09\/contact-form-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1688\" \/>\n\t<meta property=\"og:image:height\" content=\"1125\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\">\n\t<meta name=\"twitter:data1\" content=\"Site Uptime Tips, Tricks, and Hacks\">\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data2\" content=\"3 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#organization\",\"name\":\"Site Uptime\",\"url\":\"https:\/\/www.siteuptime.com\/blog\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.siteuptime.com\/blog\/wp-content\/uploads\/2016\/11\/logo.png\",\"width\":268,\"height\":67,\"caption\":\"Site Uptime\"},\"image\":{\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#website\",\"url\":\"https:\/\/www.siteuptime.com\/blog\/\",\"name\":\"SiteUptime Blog\",\"description\":\"Website Monitoring\",\"publisher\":{\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.siteuptime.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.siteuptime.com\/blog\/2017\/09\/15\/the-role-of-ux-in-contact-form-design\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.siteuptime.com\/blog\/wp-content\/uploads\/2017\/09\/contact-form-design.jpg\",\"width\":1688,\"height\":1125,\"caption\":\"1016851\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.siteuptime.com\/blog\/2017\/09\/15\/the-role-of-ux-in-contact-form-design\/#webpage\",\"url\":\"https:\/\/www.siteuptime.com\/blog\/2017\/09\/15\/the-role-of-ux-in-contact-form-design\/\",\"name\":\"The Role of UX in Contact Form Design\",\"isPartOf\":{\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.siteuptime.com\/blog\/2017\/09\/15\/the-role-of-ux-in-contact-form-design\/#primaryimage\"},\"datePublished\":\"2017-09-15T16:00:35+00:00\",\"dateModified\":\"2017-09-21T18:32:58+00:00\",\"description\":\"Contact form design is all about usability. Let's delve into the role of UX and what you can do to improve your contact page experience.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.siteuptime.com\/blog\/2017\/09\/15\/the-role-of-ux-in-contact-form-design\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.siteuptime.com\/blog\/2017\/09\/15\/the-role-of-ux-in-contact-form-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.siteuptime.com\/blog\/2017\/09\/15\/the-role-of-ux-in-contact-form-design\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#\/schema\/person\/0c5da25d1e73b52a001cde949f064a84\"},\"headline\":\"The Role of UX in Contact Form Design\",\"datePublished\":\"2017-09-15T16:00:35+00:00\",\"dateModified\":\"2017-09-21T18:32:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.siteuptime.com\/blog\/2017\/09\/15\/the-role-of-ux-in-contact-form-design\/#webpage\"},\"publisher\":{\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.siteuptime.com\/blog\/2017\/09\/15\/the-role-of-ux-in-contact-form-design\/#primaryimage\"},\"articleSection\":\"Website Tips and Tricks\",\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#\/schema\/person\/0c5da25d1e73b52a001cde949f064a84\",\"name\":\"Site Uptime Tips, Tricks, and Hacks\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a9225861cfb200610ac9071a40b5dc27?s=96&d=mm&r=g\",\"caption\":\"Site Uptime Tips, Tricks, and Hacks\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/posts\/1002"}],"collection":[{"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/comments?post=1002"}],"version-history":[{"count":1,"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/posts\/1002\/revisions"}],"predecessor-version":[{"id":1004,"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/posts\/1002\/revisions\/1004"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/media\/1003"}],"wp:attachment":[{"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/media?parent=1002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/categories?post=1002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/tags?post=1002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}