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 TextField 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 MessageMessage bodyに貼り付けて、お礼画面用に編集します。

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

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

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

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

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

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

Chronoforms Display Formを選びます。

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

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

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

コメントを投稿

0 コメント