Joomla Extension ChronoFormsを使ってフォームを作成

Joomla

infoScoop OpenSourceのホームページで、infoScoop OpenSource Club Japan(IOCJ)という団体のページも兼ねています。
その団体申込のため、フォームを作成しました。
フォームの情報はメールで登録者および指定したメールアドレスに送られるように設定します。
JoomlaのExtension、ChronoFormsというフォーム作成支援ツールを使うことになったので、その使い方をメモ。

Chronoforms使ってみよう

ダウンロードはここからできます。
インストール方法は省略。
インストールすると、コンポーネントのメニューに表示されます。

フォーム作成

まず大枠となるフォームを作成します。

ドキュメントの"2 Create a simple form in ChronoForms.pdf"が参考になります。
ChronoFomrsのメニューでFormWitherdを選択。
Drag & Dropで必要なパーツを選び、そのパーツをクリックすれば、右下にそのプロパティ編集パネルが表示されます。
こんな感じ。

バリデーションの可否や必須項目か否かの選択もここでできます。
あとから直接HTMLを編集して変更することもできます。
適当に必要なパーツを選んで設定し、保存ボタンを押し、名前を付けてフォームを保存します。
ここではフォームの名前をiocj_for_corporationとし、以下設定をしていきます。

初期設定

ChronoFormsのドキュメントを参考に、フォームの初期設定をします。
4 Building a Joomla Registration Form using ChronoForms.pdfが参考になります。
[コンポーネント]>[Chrono Forms]>[Forms Management]>作成したフォームを選択
ポイントを絞って設定する点を以下にあげておきます。

  • Email機能を有効にする：[General]タブの"Email the results ?"という項目を"Yes"にします
  • 画像認証を有効にする：[Anti Spam]タブの"Use Image Verification;"という項目を"Yes"にし、"What type of image to show ?"を"With Fonts"にする。
  • フォームのフィールドのバリデーション機能を有効にする：[Validation]タブの"Enable Validation ?"を"Yes"に、"Validation Library"を"mootools"にする。
  • Joomla Registrationを有効にする：[Plugins]タブで"Joomla Registration"の項目にチェックが入っていることを確認する
HTMLとCSSを編集

[Form Code]タグで、作成したフォームやフォーム送信後に表示される画面のコードを編集することができます。
以下のようなフォームを作りました。

■ フォームを作成
[Form Code]>[Main onLoad/View Code]>"Form HTML"の右にある[+/-]をクリックすると、HTMLを編集できます。
さらに"CSS Styles"で同様にCSSのコードを追加できます。
フォームはまだ公開していないので、公開後にコードの見本としてここにリンクを張りたいと思います。

■ フォーム送信後の画面のコード
[Form Code]>[onSubmit Events Code]>"On Submit code - after sending email:"の右にある[+/-]をクリックし、以下のようなコードを書きます。
PHPのコードは、もしも指定のフィールドに入力がなければ表示しないためのものです。

<p>IOCJへの入会申し込みを受け付けました。</p>
<p>氏名：{kanji_name1}{kanji_name2}</p>
<p>メールアドレス：{mail}</p>
<br />

<?php if($_POST['mail_sub'] != ("" || null) ){?>
<p>氏名：{kanji_name1_sub}{kanji_name2_sub}</p>
<p>メールアドレス：{mail_sub}</p>
<br />
<?php } ?>
<?php if($_POST['mail_sub2'] != "" ){?>
<p>氏名：{kanji_name1_sub2}{kanji_name2_sub2}</p>
<p>メールアドレス：{mail_sub2}</p>
<br />
<?php } ?>
Validationの設定

validationの設定方法は多少複雑です。
バリデーションはそれら専用のクラスがhtmlのコードのタグにつくことにより動きます。
二つ方法があります。

  1. フォームを編集してバリデーション用のクラスを直接書き込む
  2. [Validation]タブで一括してバリデーションを設定する。

初めにフォームを作成した際に必須項目ありとしてテキストボックスを作成すると、コードに直接'required'というクラスが追加されています。つまり1の場合です。
しかしコードの中に書いてあると管理がしにくいので、2の一括して管理できる方法がきれいだと思います。
結局動作としては変わりはありませんが…。
ここでは2[Validation]タブで一括設定をします。以下の図のようになります。

バリデーションを動作させたいフィールドのname属性の値をカンマ区切りで入力します。
"validate-confirmation"はEmailアドレスなどが同じであるかを確認するときに使います。同じ値かどうかを確かめたい二つのフィールドのname属性を"="でつなぎます。

  • 1 - required (not blank): company_name,company_name_kana,zipcode,addr2,kanji_name1,kanji_name2,kana_name1,kana_name2,division,role,number,mail,mail_confirm
  • 2- validate-number (a valid number): number,number_sub,number_sub2
  • 7- validate-email (a valid email address): mail,mail_sub,mail_sub2
  • 11- validate-selection: addr1
  • 12- validate-one-required: check
  • 13- validate-confirmation: mail=mail_confirm,mail_sub=mail_confirm_sub,mail_sub2=mail_confirm_sub2
Email送信設定

フォームの情報をメールで送信する際の設定をします。
[コンポーネント]>[Chrono Forms]>[Setup Emails]タブを開きます。

左上の[New Email]アイコンをクリックすると、赤い枠が表示されます。
■ 送信者・受信者設定
右側にある項目をDrag&Dropして枠に入れます。
必要項目は以下の4つ。必要項目が全てそろえば、枠は緑色になります。

  • To: 送信先のメールアドレス
  • Subject: 題名
  • From Name: 送信者名
  • From Email: 送信者のメールアドレス

他にもCCやBCCをオプションで指定できます。
また、Subject以外の各項目は"Dynamic To"などフォームのフィールドのname属性を指定することで直接値を取得できる項目でも代用できます。
■ メールのプロパティを設定
メール全体の設定は、画面右下のEmail Propertiesで設定します。ここでは以下のように設定。

  • Email Format:HTML
  • Record IP:No（有効にするとメールの最後に"by <送信者のIPアドレス>"が表示される）
  • Enabled: Yes
  • Use Template Editor: Yes
  • Enable Attachments: Yes

注意したいのは、これらの項目の下の[Apply]ボタンをちゃんと押すこと。

Validationメッセージの日本語化

この話は結構複雑です。
が、バリデーションメッセージは英語のままでいいよという方は読み飛ばしてください。
この項目は特に私のメモ書きです。


少し以下にポイントをまとめました。

  1. ChronoFomrsのValidationにはクライアント側/Javascriptでやる方法とサーバサイド/PHPでやる方法がある。
  2. 上記で説明したValidationの設定はJavascriptを使っている。
  3. ChronoFormsはコードが国際化されておらず、メッセージがPHPやJavascriptのコードの中に直接書いてある。

2の理由から、メッセージがJavascriptにも書いてあるので、JoomlaのPHPのコードを使用しての体系的な国際化はちょっと難しいです。

一応、可能な国際化の方法は以下の通りです。

  1. バリデーションメッセージを表示させたいフィールドのtitle属性の値にメッセージを指定する
  2. [Validation]タブの[ServerSide Validation]でphpのバリデーションコードを書き、その際に日本語メッセージを指定する
  3. 画像認証のエラーメッセージは[Anti Spam]>[Capcha Settings]>Error Messageで変更できる。
  4. コードの中のメッセージを直接編集する

1は弱点があります。一つのフィールドに対して複数のバリデーションメッセージがある場合に対応できないことです。
2は面倒です。せっかくバリデーションを設定する機能があるのに、すべて自分でバリデーション用コードを書くことになります。さらにPHPなのでフォーム送信の際にページが切り替わってしまいます。Javascriptが望ましい。
なので1の方法を織り交ぜつつ3と4を使うのが現状ベターな方法です。使用するところだけ国際化します。


メッセージが書かれている主なファイルは以下。

-<joomla_root_directory>/components/com_chronocontact/js/livevalidation_standalone.js
-<joomla_root_directory>/components/com_chronocontact/js/jsvalidation2.js
-<joomla_root_directory>/components/com_chronocontact/js/mooValidation.js
-<joomla_root_directory>/components/com_chronocontact/libraries/includes/JSvalidation2.php

国際化すべきメッセージは以下の通り

  • jsvalidation2.js
    • 60行目："This field is required"⇒"入力必須項目です"
    • 61行目："Please enter a valid number in this field."⇒"数字を入力してください"
    • 66行目："Please enter a valid email address. For example fred@domain.com"⇒"適切なメールアドレスを入力してください。例）yamada@domain.com"
  • livevalidation_standalone.js
    • 586行目："Can't be empty!"⇒値を入力してください
  • JSvalidation2.php
    • 10行目："Please make sure that the 2 fields are matching"⇒"同じメールアドレスが入力されていることを確認してください"

それにしてもこの散らばり方はひどい…。メッセージ編集するなんて想定してない感じなのでしょうか。


Checkboxのエラーメッセージはtitle属性で指定しました。
画像認証のエラーメッセージは3のやり方で変更しました。

Emailテンプレート設定

[Email Templates]タブで、フォームの内容を送信する際のEmailのテンプレートを設定します。
中括弧でname属性の値を囲むと、そこにフォームの値が入ります。
例は以下の通り。

会社名
{company_name}（{company_name_kana}）
住所({addr0})
〒{zipcode}
{addr1}{addr2}
氏名
{kanji_name1}　{kanji_name2}（{kana_name1}　{kana_name2}）
所属
部署：　{division}
役職：　{role}
電話番号
{number}
メールアドレス
{mail}

以上。