ChronoFormsの使い方：Joomla!サイトに問い合わせフォームを作る

Joomla!サイトに問い合わせフォームを作る想定で、ChronoFormsの使い方を解説します。ここでは、Joomla!サイトにChronoFormsがインストールされている前提で使い方を紹介します。

ChronoFormsの無料版では、管理画面にNOT validatedと表示されますが、これは「有料版の購入記録がない」という意味です。無料版では問い合わせフォームにChronoForms開発者サイトへのリンクが表示されますが、それ以外の機能の違いはありません。

Joomla!の管理画面にアクセスして「コンポーネント」メニューの「ChronoForms」から「Easy Form Wizard」。

フォーム画面の構成要素を左側のメニューから右側のプレビュー画面にドラッグ＆ドロップします。複数選択のチェックボックスを作りたいときはCheck Boxes Groupを使います。

最後の2段には、Captcha Input（画像認証コード入力欄）とSubmit Button（送信ボタン）を入れて、いったん「保存」。

次にそれぞれの入力欄を設定します。入力欄の右上のConfigure（設定）ボタンをクリック。

Label TextとField Titleには項目名を日本語で、Field Nameにはフィールド名を半角英数字で、その他の項目を適宜設定して、Apply（適用）。

注釈を付ける必要があれば、Otherタブを開いてInstructions for Usersに入力してApply。

Validationタブを開いて、必須項目にはRequiredをチェック。メールアドレスにはEmail、電話番号にはPhoneにチェック。入力文字を限定したい項目にはAlpha（半角英字）、AlphaNum（半角英数字）、Number（半角数字）などをチェックしてApply（適用）。

Submit Button（送信ボタン）については、各項目を日本語に直して、Apply。

送信ボタンを中央に配置したいときは、Otherタブを開いてButton Align（ボタン配置）をCenter（中央）にしてApply。

最後に「保存」してフォームを作ったら、次にメールを設定しましょう。

自動送信メールの設定

Easy Form Widgetの画面でEmailタブを開きます。ここでは、Email 1をお客様への通知用に、Email 2を管理者への通知用に設定します。

Enabled（有効）をYesに、To（宛先）を「メールアドレスのField Name」に設定する。Subject（件名）、From Name（差出人名）、From Email（差出人メールアドレス）を入力する。Generate Auto Template（自動テンプレート生成）をクリックします。

メール本文に自動生成されたテンプレートは、2列の表になっていて、それぞれ「ラベル名」と「フィールド名のコード」が挿入されます。 まず、認証コード(Captcha)を含めた場合は、この行の内容を削除する。お客様のお名前には失礼のないよう直後に「様」を追加します。

表の前にお客様への挨拶文を、表の後に署名を追加します。

ChronoFormsの編集画面では表の前にカーソルを持っていくことができない。表の前に文字を入力するときは、一旦HTMLボタンでコード編集画面にして、とりあえず冒頭に<p></p>と入力してHTML編集画面を閉じます。これで表の前に1行挿入されます。

冒頭に相手のお名前を入れるときは、下図のように「お名前のField Name」の前後を半角中括弧で囲みます。

メール本文が表になっていることからお分かりの通り、ChronoFormsの本文はリッチテキスト(HTML)でプレーンテキストは選べません。

Dynamic To（宛先の変数）にメールアドレスのField Nameを入力して「保存」すれば、Email 1（お客様への通知メール）は完成です。

次は、Email 2タブを開いて、管理者への通知用のメールを設定します。

Enabled（有効）をYesに設定します。To（宛先）に管理者のメールアドレス、Subject（件名）、From Name（差出人名）に「お名前のField Name」、From Email（差出人メールアドレス）に「メールアドレスのField Name」を入力します。 メール本文は、Email 1と同様にGenerate Auto Template（自動テンプレート生成）をクリックして、テンプレートを挿入します。Email 1と同様に認証コードを削除、お名前のフィールド名の直後に「様」を追加し、表の前後に文章を加筆します。

編集の要領は同じなので、Email 1のメール本文をコピー＆ペーストして編集してもかまいません。 Dynamic Reply to Name（返信先のお名前）に「お名前のField Name」、Dynamic Reply to Email（返信先のメールアドレス）に「メールアドレスのField Name」を入力して「保存」します。

フォーム送信後のお礼画面などの動作設定とフォームの実装

ChronoFormsでメール設定が済んだら、メール送信後のお礼画面などの動作を設定して仕上げましょう。

メール設定のEmail1の文面をコピーしておき、Thanks MessageのMessage bodyに貼り付けて、お礼画面用に編集します。

フォームに画像認証を付けるなら、Captchaタブを開き、EnabledをYesに、Error Messageを下図のように日本語に訳します。お好みでUse True Type FontsをYesにします。

スタイルを加筆するときは、Othersタブを開き、CSS Codeに書き込みます。（フォームにしか使わないスタイルをテンプレートのCSSに書き込むとブラウズに無駄な負担がかかりますから、これは気の利いた設計ですね！）

下図の例では、複数選択のチェックボックスでは4つ目の選択肢で改行する設定、回答欄の横幅を指定する設定、回答欄のそばに出すエラーメッセージの書式設定を加筆しています。

最後にForm Settingsタブを開き、Form nameを半角英数字で入力し、PublishedをYesにして保存します。デフォルトのレイアウトがやや間延びしているため、お好みでTight LayoutをTightにしてもよいでしょう。

上記でChronoFormsそのものの設定は完了しますが、この状態ではまだフォームにアクセスすることができません。

管理画面の「メニュー」→「メニュー管理」→「メニューの追加」でフォームを実装しましょう。

Chronoforms Display Formを選びます。

「メニュータイトル」を入力し、「エイリアス」を半角英数字で入力します。「状態」を「公開」にし、「親アイテム」を選びます。

Form Nameには、前出のChronoFormsの設定のときにつけたフォーム名を正確に入力して、保存します。

これでフロント画面からChronoFormsにアクセスすることができます。