Niceforms.jsを使ってフォームのデザインを強化。

デフォルトだとブラウザごとにデザインが違い雑になりがちのフォームですが、コンバージョンにも繋がる大事な部分。
そんなわけでNiceforms v.2.0を使ってフォームを仕上げるメモ。

ダウンロードするとjs,cssとpsdファイルが同封されているので背景画像やボタンを自由につくることができます。

Niceforms

javascriptとcssを読み込みformタグにクラス”niceform”を付ければ適応されます。画像のセットも忘れずに・・・。

<script language="javascript" type="text/javascript" src="niceforms.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="niceforms-default.css" />
<form action="vars.php" method="post" class="niceform">
<fieldset>
<legend>Personal Info</legend>
<dl>
<dt><label for="email">Email Address:</label></dt>
<dd><input type="text" name="email" id="email" size="32" maxlength="128" /></dd>
</dl>
<dl>
<dt><label for="test">Sample Button:</label></dt>
<dd><button type="button" name="test" id="test">I Do Nothing</button></dd>
</dl>
</fieldset>
<fieldset class="action">
<input type="submit" name="submit" id="submit" value="Submit" />
</fieldset>
</form>
 
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

three × four =