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メールフォーム
ショッピングカートサービス【有料】
カラーミーショップ

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

Webスク(6か月のガッチリ型)

半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。

無料体験レッスンでは、キャリア形成の相談もできます。

WebCamp(1か月の集中型)

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp(2〜6か月のカスタマイズ型)

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

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