pForm の基本的な使い方と修正したほうが良い箇所

pForm というのは Appnitro 社が有料で提供している MachForm の簡易版です。
pForm を利用すると大変美しいフォームを簡単に生成できます。

Appnitro 社 pForm

有名なツールなのでご存知の方も多いと思いますが、ここではその「ツールの使い方」と「修正したほうが良い箇所」 (2010年7月21日現在)を含めて説明します。

pForm の基本的な使い方

基本的に画面の指示に従うだけです。

pForm のサイトへ行きます。

pForm の使い方

好みの色合いを選び、下方の Next ボタンをクリックします。

pForm の使い方

必要なフォーム要素をクリックして追加する(クリックすると自動的に入ります)。

pForm の使い方

コツとしては、最初は全てのフォームを追加しておいたほうが良いです。

特に、カレンダーは先に選択しておかないとアイコンや専用の JavaScript (calendar.js) が付属しないので、 後から付け足すことができなくなります。(他のライブラリなどで補えないのであれば、先に選択しておくと良いでしょう)

最後に、Save Form ボタンをクリックします。

pForm の使い方

すると、上で選択したフォームを出力するファイルのダウンロードリンクが現れます。 リンクをクリックして、フォームを取得します。

pForm の使い方

zip ファイルに、JavaScript や CSS や画像など必要なファイルが含まれます。

いくつか修正したほうが良いと思うこと

画像切れ

2010 年 7 月 21 日現在、ダウンロードできる CSS に不具合がありますので、修正して使いましょう。

CSS ファイル内の shadow.gif ファイルへの相対パスが "../../../images/shadow.gif" となっています。 この箇所は意味の無いパスになりますから、ご自身の環境に合わせて修正しましょう。

この修正によって、影画像が表示されます。

修正前はこのようになっていて・・・

pForm の使い方

修正後はこうなります。

pForm の使い方

「たいした違いないじゃん、どっちでもいい」 という方は、CSS の shadow.gif のラインごと消してしまったほうが良いでしょう。

任意で... text-indent の削除

CSS の h1 に対するスタイル指定は次のように記載されています。

デザインとして何らかの意図があったのかもしれませんが、 SEO 的はこのような text-indent の値は望ましい指定ではありません。 画面の外に文字を飛ばすようなことをすると、検索エンジンからの評価が落とされる可能性があるからです。

問題が無いと確信を持っていえる人以外は、この行は削除したほうが良いです。

#ちなみに、私は上のコード例を示すだけでも嫌なので画像にしてます ;-)

以上、pForm の紹介と、少し直したほうが良いと思われる点を説明しました。

ここまでお読みいただき、誠にありがとうございます。SNS 等でこの記事をシェアしていただけますと、大変励みになります。どうぞよろしくお願いします。

© 2024 Web/DB プログラミング徹底解説