<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Inspect Element &#187; form</title>
	<atom:link href="http://inspectelement.com/tag/form/feed/" rel="self" type="application/rss+xml" />
	<link>http://inspectelement.com</link>
	<description>Web Design &#38; Development Blog</description>
	<lastBuildDate>Wed, 25 Jan 2012 09:55:34 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Superb Examples of Form Design</title>
		<link>http://inspectelement.com/articles/superb-examples-of-form-design/</link>
		<comments>http://inspectelement.com/articles/superb-examples-of-form-design/#comments</comments>
		<pubDate>Mon, 22 Jun 2009 08:00:09 +0000</pubDate>
		<dc:creator>Tom Kenny</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[form]]></category>
		<category><![CDATA[inspiration]]></category>
		<category><![CDATA[research]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://inspectelement.com/?p=702</guid>
		<description><![CDATA[Following on from our look at <a href="http://inspectelement.com/articles/showcase-of-fantastic-login-pages/">fantastic login pages</a> comes a look at more comprehensive form design such as contact forms, order forms, sign up forms and comment forms.]]></description>
			<content:encoded><![CDATA[<p>Following on from our look at <a href="http://inspectelement.com/articles/showcase-of-fantastic-login-pages/">fantastic login pages</a> comes a look at more comprehensive form design such as contact forms, order forms, sign up forms and comment forms. Below are just some of the best examples on the web.</p>
<p><a href="http://wpcoder.com/order/"><img class="alignnone size-full wp-image-703" title="wpCoder" src="http://inspectelement.com/wp-content/uploads/2009/06/wpCoder.jpg" alt="wpCoder" width="560" height="218" />WPCoder</a> uses a high quality image of a clipboard for their order form.</p>
<p><span id="more-702"></span><a href="http://www.alexcohaniuc.com/"><img style="border: 0px initial initial;" title="alexcohaniuc" src="http://inspectelement.com/wp-content/uploads/2009/06/alexcohaniuc.jpg" alt="alexcohaniuc" width="560" height="218" />Alex Cohaniuc</a> uses a piece of paper for his contact form.</p>
<p><a href="http://paramoreredd.com/connect/"><img style="border: 0px initial initial;" title="paramoreredd" src="http://inspectelement.com/wp-content/uploads/2009/06/paramoreredd.jpg" alt="paramoreredd" width="560" height="218" />Paramore Redd</a> have a nicely styled, clean contact form.</p>
<p><a href="http://graphik.fi/contact/"><img class="alignnone size-full wp-image-719" title="graphik" src="http://inspectelement.com/wp-content/uploads/2009/06/graphik.jpg" alt="graphik" width="560" height="218" />Graphik</a> uses a big friendly header on their contact form.</p>
<p><a href="http://kontain.com/#signup"><img class="alignnone size-full wp-image-710" title="kontain" src="http://inspectelement.com/wp-content/uploads/2009/06/kontain.jpg" alt="kontain" width="560" height="218" />Kontain</a> clearly defines form fields by using bounding boxes and colour.</p>
<p><a href="http://www.tumblr.com/register"><img class="alignnone size-full wp-image-720" title="tumblr" src="http://inspectelement.com/wp-content/uploads/2009/06/tumblr.jpg" alt="tumblr" width="560" height="218" />Tumblr</a> uses big form fields and a nice clean appearance.</p>
<p><a href="http://www.newspond.com/register/"><img class="alignnone size-full wp-image-725" title="newspond" src="http://inspectelement.com/wp-content/uploads/2009/06/newspond.jpg" alt="newspond" width="560" height="218" />News Pond</a> gets users to focus on their sign-up form with the use of a background glow.</p>
<p><a href="http://duoh.com/contact"><img class="alignnone size-full wp-image-761" title="duoh" src="http://inspectelement.com/wp-content/uploads/2009/06/duoh.jpg" alt="duoh" width="560" height="218" />Duoh</a> uses a big bold header and a paragraph to introduce their contact form.</p>
<p><a href="http://www.neutroncreations.com/"><img style="border: 0px initial initial;" title="neutroncreations" src="http://inspectelement.com/wp-content/uploads/2009/06/neutroncreations.jpg" alt="neutroncreations" width="560" height="218" />Neutron Creations</a> fills in fake details on their contact form, showing clearly, at a glance, what details should be entered.</p>
<p><a href="https://www.getballpark.com/public/signup?plan=5"><img class="alignnone size-full wp-image-712" title="Ballpark" src="http://inspectelement.com/wp-content/uploads/2009/06/Ballpark.jpg" alt="Ballpark" width="560" height="218" />Ballpark</a> has a nice clean design with clearly defined sections.</p>
<p><a href="http://dragoninteractive.com/contact"><img class="alignnone size-full wp-image-751" title="dragoninteractive" src="http://inspectelement.com/wp-content/uploads/2009/06/dragoninteractive.jpg" alt="dragoninteractive" width="560" height="218" />Dragon Interactive</a> uses a tab interface to distinguish the type of message on their contact form.</p>
<p><a href="http://www.substrakt.co.uk/contact/"><img class="alignnone size-full wp-image-714" title="substrakt" src="http://inspectelement.com/wp-content/uploads/2009/06/substrakt.jpg" alt="substrakt" width="560" height="218" />Substrakt</a> uses the familiarity of a postcard for their contact form.</p>
<p><a href="https://eu.battle.net/account/creation/email.xml"><img style="border: 0px initial initial;" title="battlenet" src="http://inspectelement.com/wp-content/uploads/2009/06/battlenet.jpg" alt="battlenet" width="560" height="218" />Battle.net</a> implements a progress tracker for each step of signing up to their service.</p>
<p><a href="http://www.tuitivegroup.com/contact/"><img class="alignnone size-full wp-image-753" title="tuitive" src="http://inspectelement.com/wp-content/uploads/2009/06/tuitive.jpg" alt="tuitive" width="560" height="218" />Tuitive</a> uses <a href="http://www.mikeindustries.com/blog/sifr/">sIFR</a> for non-web safe fonts on the label tags of their contact form.</p>
<p><a href="http://www.davidhellmann.com/contact/"><img style="border: 0px initial initial;" title="davidhellmann" src="http://inspectelement.com/wp-content/uploads/2009/06/davidhellmann.jpg" alt="davidhellmann" width="560" height="218" />David Hellmann</a> uses plastic tape for the label tags of his contact form.</p>
<p><a href="http://elliotjaystocks.com/blog/"><img class="alignnone size-full wp-image-813" title="elliotjaystocks" src="http://inspectelement.com/wp-content/uploads/2009/06/elliotjaystocks.jpg" alt="elliotjaystocks" width="560" height="218" />Elliot Jay Stocks</a> uses nice big and clear elements on the comments form of his blog.</p>
<h3>Be Inspired</h3>
<p>As you can see, forms don&#8217;t have to be boring, there are a number of different ways that you can make forms more interesting and more usable, increasing the chance that users will sign up to a service or send feedback.</p>
<p>Feel free to share your own form designs and any others that you have seen out there in the comments.</p>
]]></content:encoded>
			<wfw:commentRss>http://inspectelement.com/articles/superb-examples-of-form-design/feed/</wfw:commentRss>
		<slash:comments>20</slash:comments>
		</item>
	</channel>
</rss>

