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を「
カスタムメッセージの表示」に設定すると、フォームの送信後に表示されるお礼画面の入力欄が表示されます。
カスタムメッセージ欄に、フォームの送信後に表示されるお礼メッセージを入力して、「
保存」します。
最後にフォームをメニューに登録して、フォームをサイトに設置します。
参考
0 コメント
匿名希望の方は、このブログ末尾のプライバシーポリシーをお読みください。