タイプ | |
有料/無料 | 無料 |
ライセンス | GPL |
執筆時のバージョン | 0.6Beta2 |
ユーザ登録の要否 | 不要 |
- ここに掲載している記事は執筆時点のものです。内容が古くなっている事もありますのでご注意下さい。
- ここで紹介しているエクステンションの利用を推奨するものではありません。ご利用は自己責任でお願いします。
- ご自分が利用しているエクステンションの最新情報は常に確認しましょう。様々なエクステンションで日々脆弱性が見つかっており、あなたのサイトがクラックの被害に遭わないとも限りません。脆弱性情報はこちら。
- ドラッグアンドドロップでコントロール(テキストボックスやチェックボックスなど)を配置しメールフォームが作れるコンポーネント。
- コントロールのサイズ、配置もドラッグで変更できる。
- 送信されたデータをデータベースに保存し、管理画面から内容を確認することができる。エクスポートも可能。
- レイアウトにテーブルを使用していない。
- 送信されたデータを確認メールとしてユーザに送信できる。
- フォームを利用できるユーザを制限することができる。
インストール
開発元からダウンロードしたコンポーネントのファイルをJoomla!のバックエンドからインストールするだけです。
日本語化
当サイトで日本語ランゲージを公開しています。ダウンロードページに記載してある指示に従いインストールして下さい。
フォームの作成
今回試したJForm0.6Beta2の場合、IE8では正常に動作しない可能性があります(保存ボタンを押しても画面が遷移しなかったり、特定のコントロールを配置できなかったり。私の環境だけかもしれません)。Firefox等での利用をおすすめします。
Joomla!バックエンドの「コンポーネント」→「JForms」を選択すると、フォーム一覧画面が表示されます。フォームを作成するには画面右上の「新規」ボタンをクリックします。
画面左側には3つのタブがあります。「ツールバー」は各コントロールを配置するためのツールボックス、「フォーム」はフォーム(Form要素)を設定するパネル、「要素」は配置したコントロールを設定するパネルになっています。画面右側にあるグレーの部分がフォーム要素を配置する領域です。
ツールバータブの「基本」には、テキストボックスやラジオボタンなど、フォームの作成に必要なコントロールが一通りそろっています。
テキストボックスをフォームに配置するには、「Textbox」を右側の領域にドラッグします。
配置したコントロールの左上には移動ハンドルが表示され、ドラッグすることで配置を変更できます。またラベルや要素の右側にはサイズ変更ハンドルが表示され、ドラッグするとサイズ変更ができます。コントロールを削除したい場合には右側の赤い×アイコンをクリックします。
コントロールを選択すると自動で「要素タブ」に切り替わり、フォームのラベルや必須項目の設定ができます。ここではラベルを「お名前」に変更し、「必須」をオンにしました。必須をオンにすると、ラベル横に赤い*が表示されます。
フォームへ説明文などを表示したい場合は「HTML」を使用します。ツールバーから「HTML」をドラッグして配置し、右側のメモ帳のようなアイコンをクリックするとWYSIWYGエディタが表示され文章を自由に入力できます。
次にメールアドレス入力欄を追加してみます。テキストボックスをドラッグして配置し、要素の設定で「必須」をオンにします。もしこのフィールドに入力されたメールアドレスへ確認用メールを送る場合は「ユーザにメールを~」をオンにして下さい。また正しいメールアドレスが入力されたか検査するために、「入力値検査」から「メールアドレス」を選択します。
次にラジオボタンを配置してみます。これまでと同様にツールバーから「Radio」をドラッグして配置します。ラベルを入力し、オプション値は改行で区切って入力します。ちなみに「レイアウト」を「インライン」に設定し、移動ハンドルでサイズを大きくするとオプション値の横並びもできます。今回は次の様にしてみました。
スパムメールを防ぐ「キャプチャ」を設置します。ツールバータブの「スパム制御」から「SECURIMAGE」をドラッグして配置します。またreCAPTCHAも利用できます。
最後に送信ボタンを配置します。ツールバーから「Button」をドラッグしてフォームの最下部へ配置し、ラベルを「送信」に変更しました。
またこれ以外にも、日付を入力させる「Date」、登録ユーザの情報を記録する「User Info」、フォーム送信日時を記録する「Entry Time」、IPアドレスを記録する「IP Address」があります。これらはフォーム上に配置しても、実際のフォームには表示されません。
次にフォームタブで設定を行います。「フォーム名」には適当な名前を入力します(フォームページの見出しになります)。必要に応じて「お礼メッセージ」も入力します。また「許可するユーザの種類」を設定すると、このフォームを利用できるユーザを制限できます。
またデフォルト設定では、メールが送信されない設定になっていますので(データベースに記録されるだけ)、「有効なプラグイン」の「メール」にチェックを入れておきます。
次に送信されるメールの設定を行います。メールを送信する管理者のメールアドレスを入力し、メールの文面を入力します。管理者に送られるメール、ユーザに送られる確認メールで変数(画像内の{FORM_NAME})が利用できます。以下は一例ですので、詳しくは項目名にマウスオンすることで表示されるポップアップヘルプを参照して下さい。
できあがったらフォームを保存してください。
メニューアイテムの作成
メニューアイテム作成画面でJFormsのツリーから「標準フォームレイアウト」を選択し、次の画面でリンクするフォームを設定したら保存します。
標準フォームレイアウト以外のメニューアイテムは、今回利用したバージョンでは動作しませんでした。
フロントエンドに切り替え、作成したメニューアイテムをクリックすると次の様に表示されます。実際に送信してテストしてみましょう。
送信データの確認
フォームから送信されたデータはデータベースに記録され、JFormsの管理画面から参照できます。フォーム一覧画面で「レコード」を選択すると次の様に表示されます。
「搬出」(エクスポート)を使用すると、フォームデータをエクスポートすることが可能です。形式はHTML、CSV、XML、XLS(エクセル)が利用可能です。
HTMLのエクスポートで「ディスクに保存」を「いいえ」に設定すると、HTMLファイルがブラウザで開かれますが、日本語が含まれている場合文字化けします。これはブラウザのエンコード指定をUTF-8に変更することで回避できます。「ディスクに保存」を「はい」に設定し、一旦PC上に保存した場合は問題ありません。
CSV形式でエクスポートした場合、Excelで開くと文字化けします。UTF-8形式のテキストファイルを認識しないためです。回避するには、CSVファイルを一旦テキストエディタで開いてShift JISで保存し直し、その後Excelで開きます。
XLS形式は日本語が文字化けするので使えません…。