pForm の基本的な使い方と修正したほうが良い箇所
pForm というのは Appnitro 社が有料で提供している MachForm の簡易版です。
pForm を利用すると大変美しいフォームを簡単に生成できます。
有名なツールなのでご存知の方も多いと思いますが、ここではその「ツールの使い方」と「修正したほうが良い箇所」 (2010年7月21日現在)を含めて説明します。
pForm の基本的な使い方
基本的に画面の指示に従うだけです。
pForm のサイトへ行きます。
好みの色合いを選び、下方の Next ボタンをクリックします。
必要なフォーム要素をクリックして追加する(クリックすると自動的に入ります)。
コツとしては、最初は全てのフォームを追加しておいたほうが良いです。
特に、カレンダーは先に選択しておかないとアイコンや専用の JavaScript (calendar.js) が付属しないので、 後から付け足すことができなくなります。(他のライブラリなどで補えないのであれば、先に選択しておくと良いでしょう)
最後に、Save Form ボタンをクリックします。
すると、上で選択したフォームを出力するファイルのダウンロードリンクが現れます。 リンクをクリックして、フォームを取得します。
zip ファイルに、JavaScript や CSS や画像など必要なファイルが含まれます。
いくつか修正したほうが良いと思うこと
画像切れ
2010 年 7 月 21 日現在、ダウンロードできる CSS に不具合がありますので、修正して使いましょう。
CSS ファイル内の shadow.gif ファイルへの相対パスが "../../../images/shadow.gif" となっています。 この箇所は意味の無いパスになりますから、ご自身の環境に合わせて修正しましょう。
この修正によって、影画像が表示されます。
修正前はこのようになっていて・・・
修正後はこうなります。
「たいした違いないじゃん、どっちでもいい」 という方は、CSS の shadow.gif のラインごと消してしまったほうが良いでしょう。
任意で... text-indent の削除
CSS の h1 に対するスタイル指定は次のように記載されています。
デザインとして何らかの意図があったのかもしれませんが、 SEO 的はこのような text-indent の値は望ましい指定ではありません。 画面の外に文字を飛ばすようなことをすると、検索エンジンからの評価が落とされる可能性があるからです。
問題が無いと確信を持っていえる人以外は、この行は削除したほうが良いです。
#ちなみに、私は上のコード例を示すだけでも嫌なので画像にしてます ;-)
以上、pForm の紹介と、少し直したほうが良いと思われる点を説明しました。