<p class="thumb"><img src="http://web-marketing.zako.org/images/2010/03/Faary.jpg" alt="" title="スタイリッシュなフォームを作れる「Faary」" width="514" height="204" class="alignleft size-full wp-image-13860" /></p>
<p>サイトを作る際に、できれば見た目もスタイリッシュであってほしいのがお問い合わせフォーム。しかし、そのデザインを０から作るのは、なんだかんだ時間がかかってしまいますよね。</p>
<p>そこで今回は、カンタンにスタイリッシュなフォームを作れるサービスをご紹介します。</p>
<!--more-->
<h3 class='header-label'>スタイリッシュなフォームを作れる「Faary」</h3>
<p>「<a class='web-site-link' href="http://faary.com/" onclick="window.open('http://faary.com/'); return false;">FAARY</a>」は、<strong>オンライン上でCSSによってデザインされたフォームを簡単に作れる</strong>サービス。</p>
<p>フォームの項目を入力すると、フォームデザインのプレビューが表示され、HTMLやCSSファイル一式をダウンロードして使うことができます。</p>
<h4 class='tips'>質問の項目を入力してボタンを押すだけ</h4>
<p class="picture"><img src="http://web-marketing.zako.org/images/2010/03/Faary1.png" alt="" title="Faary1" width="400" height="418" class="alignleft size-full wp-image-13861" /> ↑<a class='web-site-link' href="http://faary.com/" onclick="window.open('http://faary.com/'); return false;">FAARY</a>のページを開き、質問項目を入力するだけでフォームを作れます。</p>
<p>入力欄の下にある、header, text, email などのリンクをクリックすると、入力欄にその項目が追加されます。</p>
<p class="picture"><img src="http://web-marketing.zako.org/images/2010/03/Faary2.png" alt="" title="Faary2" width="400" height="523" class="alignleft size-full wp-image-13863" /> ↑項目を入力後、ボタンを押すと、このようなフォームのプレビューが表示されます。</p>
<p>プレビューを確認後、「Download it FREE」のリンクをクリックすると、ファイル一式をダウンロードすることができます。</p>
<h4 class='tips'>サンプルフォーム</h4>
<iframe src="http://web-marketing.zako.org/test/faary/contact-form-faary.html" scrolling="no" frameborder="0" width="522" height="600"></iframe>
<p>↑ダウンロードしたファイル一式を使って表示させたフォームです。急いでいる時にも充分満足できるデザインですよね。</p>
<h4 class='tips'>質問項目のサンプル</h4>
<p>上記サンプルフォームを作った際の項目は以下のとおりです。</p>
<blockquote>header,		お問い合わせフォーム<br />
text,		*お名前,from<br />
text,		*メールアドレス,email<br />
textarea,	*お問い合わせ内容<br />
header,		アンケートにご協力ください<br />
radio,		情報を得る媒体,テレビ,新聞,ラジオ,雑誌,インターネット<br />
select,		年齢,30+,11-29,1-10<br />
header<br />
submit,		送信</blockquote>
<p>項目名の前に * を付ければ入力必須項目にすることができます。</p>
<p>興味のある方は<a class='web-site-link' href="http://faary.com/" onclick="window.open('http://faary.com/'); return false;">FAARY</a>へどうぞ。</p>
<p>なるべく時間を掛けたくない作業を、このようなツールでサクっと済ませてしまうことで、大きな差が出てきますよね。要所要所できちんと有効活用したいものです。</p>
<p>Via：<a class='web-site-link' href="http://delicious.com/url/62ae639dadadbd881defaaca2aa2159b" onclick="window.open('http://delicious.com/url/62ae639dadadbd881defaaca2aa2159b'); return false;">delicious</a></p>