1. ホーム > 
  2. Webサイト制作 > 
  3. KompoZerの使い方 > 
  4. KompoZerでフォームを作成する方法

KompoZerでフォームを作成する方法

お問い合わせのページなどで使うフォームや、チェックボックス、ドロップダウンメニューなどの部品を、KompoZerを使ったHTMLページで作成する方法を解説。

  • 2016/8/2
  • 2011/11/6

お問い合わせ等のフォームをページに追加する方法をご説明します。
まずテキストエリアやセレクトメニューなど様々なフォームの部品を設置して、部品全体をフォームで囲むようなイメージで設置していきます。

フォームの部品を設置する方法

まずはフォームの各部品をページに配置していきます。ツールバーのフォームアイコンの右側にある三角のマークをクリックすると、各部品の設置メニューが表示されますので、設置したい部品を選択します。
通常は「フィールド」の項目に入っている部品だけで問題はありません。

「フィールド」のプロパティ

「フィールド」のプロパティ内には、一般的なホームページで使うフォームの基本的な部品が設置できるようになっています。

1行文字列
文字の入力フィールドを設置します。
パスワード
文字の入力フィールドと同じ部品ですが、パスワードを入力するエリアの為、入力した文字は「*」になります。
チェックボックス
複数選択可能なチェックボックスを設置します。
ラジオボタン
どれか1つを選択するラジオボタンを設置します。
送信ボタン
フォームの内容を送信する時に押すボタンを設置します。
初期化ボタン
フォームの内容を初期化するボタンを設置します。
ファイルボタン
ファイルを選択する為のボタンと部品を設置します。
隠しパラメータ
ページ上には見えませんが、フォームの内容を処理するプログラムに一緒に送りたい内容をセットしておきます。これはプログラム側で条件によって処理を分岐する時に使います。
画像
画像をボタンにしたい時に選択する項目のはずですが、KompoZer0.8b3ではきちんと動作しないようです。
ボタン
ボタンを設置します。先ほどの送信ボタンや初期化ボタンと違い、動作は定義されていませんので、JavaScriptを使って、押した時の処理を記述する必要があります。

部品全体をフォームタグで囲む方法

フォームは部品を配置しただけでは動作しません。どのプログラムに対してフォームの内容を送信するのか、メソッドは何を使うのかが書かれた「フォームタグ」で全体を囲む必要があります。
配置した部品をすべて選択した状態で、ツールバーのフォームアイコンをクリックします。そこで表示されたメニューで必要事項を入力します。

名前
フォームそのものの名前です。
送信先URL
フォームの内容を処理するプログラムのURLを指定します。
メソッド
GETかPOSTを選びます。GETはフォームの内容をURLに含めて送信しますので、シンプルな情報を送信する時にはGETでも良いでしょう。ただしお問い合わせといった複雑な内容を送信する時にはPOSTを使います。一般的にはPOSTを使うという事を覚えておけば良いでしょう。

フォームはHTMLに記述しただけでは動作しませんので、必ずフォームの内容を処理するプログラムが必要になります。
ネット上にはフリーで利用できるプログラムも存在していますが、セキュリティ上の問題や、プログラムが正常に動くように設置するためのハードルの高さという点からも、ビギナーの方が使うのはお薦めできません。

お問い合わせや、ショッピングカートなど、ホームページ上でフォームを使うシーンには、ASPサービス等でシステムが提供されているパッケージも多くありますので、そういったものを利用して、ホームページにフォームを設置する方が良いかと思います。

オリジナルフォームサービス【無料】
FC2メールフォーム
ショッピングカートサービス【有料】
カラーミーショップ

「役にたった」と思ったらシェアお願いします