Joomla!でフォームを作成するJSN UniFormの使い方

Joomla! 3.xでフォームを作成ならJSN UniForm(ユニフォーム)というエクステンションが便利です。JSN UniForm Free Edition(無料版)は、1サイトにつきフォームを3パターンまで作成できます。問い合わせフォームだけならば、これで十分です。

ここでは、JSN UniForm Free Editionで問い合わせフォームを作成する手順をまとめます。

JSN UniForm Free Editionをインストールしたら、「コンポーネント」→「JSN UniForm」を開いて、フォームを作成しましょう。

「＋新規」をクリックして、作成開始です。「題目」にはフォーム名、「説明」はフォームの内容を入力します。Googleの画像認証を使用する場合は、Captcha IntegrationをReCaptchaに設定します。

上記の設定ができたら「保存」して、「デザイン」タブを開きます。
ここでは、「お名前」「メールアドレス」「お問い合わせ内容」の3つの入力欄のフォームを作ります。
「+Add Container」をクリックして

「+フィールドを追加」をクリックします。

「お名前」欄を作るには、Single Line Textを選びます。

Title(項目名)に「お名前」と入力して、Required(必須)をチェックして、欄外の余白をクリックして確定します。

次にメールアドレス欄を作ります。「+フィールドの追加」をクリックして、Emailを選びます。

Titleに「メールアドレス」と入力して、Required(必須)にチェックして、欄外の余白をクリックして確定します。

なお、メールアドレスのコピペを禁止する場合は、No Duplicatesもチェックしましょう。

お問い合わせ内容欄を作るには、「+フィールドの追加」をクリックして、Paragraph Text(段落テキスト)を選びます。

Titleに「お問い合わせ内容」と入力して、Required(必須)をチェックして、Rows(行数)を選びます。

欄外の余白をクリックして確定します。

次にSUBMITボタンを日本語で「送信」に変えましょう。SUBMITボタン右側をマウスオーバーするとEditボタンが現れます。そのボタンをクリックします。

Submit Button Textに「送信」と入力して、欄外の余白をクリックして確定します。

いったん「保存」してから「アクション」タブを開きます。

サイト管理者にフォーム入力内容を通知するメールの設定

ここからはフォームの入力内容を管理者に送るメールの設定です。
「アクション」タブの「メール送信」欄の「メールの追加」をクリックします。

小窓がポップアップしたら、メールアドレスを直接打ち込むか「...」ボタンをクリックしてメール送信先の管理者を選んで、チェックをクリックします。

「送信者」の右側のボタンをクリックして、メールのFromに入るフィールドを選びます。

「送信者」欄に以下のようなコードが入ったことを確認します。同様に「返信先」の右側のボタンをクリックして、メールのReply-toに入るフィールドを選びます。

「件名」は下図のように直接打ち込むことができます。予め件名に相当するフィールドを作っていれば、右側のボタンをクリックしてフィールドを選ぶこともできます。

メッセージ欄の右側のボタンをクリックしてフィールドのコードを入れ込みながら、下図のように文面を打ち込みます。

 最後に「ソースコード」ボタンをクリックして、余計なタグが紛れ込んでいないか確認しましょう。

次に、フォーム投稿者に自動送信するメールの設定です。

フォーム投稿者に自動送信するメールの設定

「投稿者に送信」欄に「フォーム投稿者のメールアドレス」のフィールドが入っていることを確認してチェックします。「送信者」欄にはメールのFromに入る送信者名、「返信先」にはメールのReply-toに入るメールアドレス、「件名」にはメールのタイトルを入力します。

メッセージ欄は、管理者宛のメールと同様の方法で作成します。

次は、Post Submission Actionを設定します。

フォーム送信後のお礼画面の設定

Post Submission Actionとは、フォーム送信後に表示されるお礼画面のことです。
Save Submissionsは、送信データをデータベースに蓄積する場合にはYesにします。この機能は、アンケート、イベントの申し込みなど集計を必要とするフォームに使います。

Do Actionを「カスタムメッセージの表示」に設定すると、フォームの送信後に表示されるお礼画面の入力欄が表示されます。

カスタムメッセージ欄に、フォームの送信後に表示されるお礼メッセージを入力して、「保存」します。

最後にフォームをメニューに登録して、フォームをサイトに設置します。

参考

• Googleフォームのアドインで自動返信つき問い合わせフォームを作る