目標
お問い合わせなどのフォームが入力された時、お問い合わせした人や管理者へ送信する確認メールをカスタマイズしましょう。
目次
- フォームの仕組み
- テンプレートの形式でメールを受け取る
- オリジナルの件名・本文を入力してメールを受け取る
フォームの仕組み
初期設定のサイトマップでは、フォームの機能を体験するためのお問い合わせページ（ http://example.com/contact/ ）を用意しています。まずはこのページでフォームの仕組みについて学んでいきましょう。
お問い合わせページでは、入力する項目を下図のように設定しています。
通常このフォームから送信された内容は、サイト管理者のメールアドレスに届くようにしなければなりません。また、入力されたアドレス宛へ確認メールが必要な場合もあります。まずはフォーム管理画面から、それらのアドレスを設定しましょう。
- 管理ボックスから [管理ページ] ボタンをクリックする
- サイドメニュー内 [フォーム] をクリックする
- リスト内「お問い合わせフォーム」右側の [変更] ボタンをクリックする
フォームの管理画面では、「基本設定」「入力チェック・変換」「一般メール設定」「管理者宛メール設定」を編集することができます。
基本設定
基本設定では、最初にフォームIDとフォーム名を定めています。
- フォームID
- 制作するサイトによっては、お問い合わせフォームや募集フォームなど複数のフォームを設置することがあります。それらを区別する任意の英数字がフォームIDです。モジュールIDと同じくフォームIDはテンプレートと管理画面で合わせて設定されており、これによってフォームの設定や投稿データを管理できます。
テーマ「beginner2020」では、お問い合わせフォームのフォームIDはテンプレート側で contactForm と指定されているため、基本設定画面からも同じIDを使用しています。
入力チェック・変換
フォームの任意の項目に対して、「入力必須」や「最大文字数」などの条件を指定することができます。テンプレートを編集する必要があります。
しかし今回のチュートリアルでは管理画面のみでできることを学習するため、この機能について作業することはありません。
一般メール設定
一般メール設定では、フォームに入力した方へ送信するメールを管理することができます。
基本的には、メールの件名、本文について管理画面から直接入力し、通常のメールフォームと同様に「To」で送信先のメールアドレスを、「From」で送信元のメールアドレスを指定します。その他にも、通常のメールの設定と同じようにCc・Bcc・Reply-To の設定ができます。
「一般メール設定」の「From」は概ねサイト管理者になるので、自分のメールアドレスを入力しておくと良いでしょう。
また件名、本文を入力していない場合は、a-blog cms 側で用意しているテンプレートの形式が採用されます。上図の件名ファイル、本文ファイルの項目に記入されている「/contact/form/subject.txt」「/contact/from/body.html」などは、そのテンプレートが置いてある場所へのパスになっています。
管理者宛メール設定
管理者宛メール設定では、フォームの管理者宛へ送信されるメールを管理することができます。
構成は一般メール設定と同じです。メールの件名、本文について管理画面から直接入力し、通常のメールフォームと同様に「AdminTo」で送信先のメールアドレスを、「AdminFrom」で送信元のメールアドレスを指定できるようになっています。
こちらでは送信先をサイト管理者にする必要があるので、「AdminTo」へ自分のメールアドレスを入力しておきましょう。
一般メール設定のFrom・管理者宛メール設定のAdminToに自分のメールアドレスを入れたら、フォームの設定を保存してください。
テンプレートの形式でメールを受け取る
まずは a-blog cms が用意しているテンプレートの形式でメールを受け取ってみましょう。
お問い合わせページを開き、各項目に入力してください。入力する内容は自由ですが、内容確認メールも同時に受け取るために「お客様情報」のメールアドレス欄には自分のメールアドレスを設定してください。
フォーム送信後、設定/入力した自分のメールアドレス宛に確認メールが届きます。メール内容を見てみしましょう。
管理者宛メール内容
一般メール内容
フォーム設定で指定されているメールのテンプレートファイルに沿って、フォームから入力された情報が表示されました。
以上がフォームを送信した時の流れになります。これらを踏まえて、次はフォーム設定から件名と本文を変更してみましょう。
オリジナルの件名・本文を入力してメールを受け取る
一般メール設定
まずは一般メール設定について、以下のように件名・本文を入力しましょう。
件名（優先）
本文（優先）
この度はお問い合わせいただき、ありがとうございました。
以下の内容で送信しました。
+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-+:-+:-+:-+:-+
受付日時：%{Y}年%{n}月%{j}日 %{H}:%{i}:%{s}
通番 : {serialNumber}
■お問い合わせ情報
ご用件 ： {description}[raw]
お問い合わせ内容：
{inquiry}[raw]
■お客様情報
会社名 ： {organization}[raw]
お名前 ： {family-name}[raw] {given-name}[raw]
メールアドレス： {email}
お電話番号 ： {tel}
ご住所 ： 〒{postal-code} {address-level1} {address1} {address2}
+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-+:-+:-+:-+:-+
今後とも株式会社▲▲をよろしくお願いいたします。
この本文について、{変数} で示されている部分には実際にメールで入力された内容が表示されます。この変数の値についてはテンプレート側で指定しているものになるので、ブラウザ上での変更はできません。したがって、フォームから入力された内容を本文中に表示したい場合は、該当の値を上記のソースから直接コピー＆ペーストしてお使いください。
少し踏み込んで学習をすると、こちらでは %{変数} の形で「グローバル変数」が、{変数}[オプション] の形で「校正オプション」が利用されています。それぞれの機能の詳細については、以下のリンクの解説をご覧ください。
管理者宛メール設定
管理者宛メール設定については、以下のように入力します。
件名（優先）
本文（優先）
弊社公式HPよりお問い合わせを受信しました。
担当者は迅速な対応をお願いします。
+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-+:-+:-+:-+:-+
受付日時：%{Y}年%{n}月%{j}日 %{H}:%{i}:%{s}
通番 : {serialNumber}
■お問い合わせ情報
ご用件 ： {description}[raw]
お問い合わせ内容：
{inquiry}[raw]
■お客様情報
会社名 ： {organization}[raw]
お名前 ： {family-name}[raw] {given-name}[raw]
メールアドレス： {email}
お電話番号 ： {tel}
ご住所 ： 〒{postal-code} {address-level1} {address1} {address2}
+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-+:-+:-+:-+:-+
入力内容を保存したら再度お問い合わせを送信し、自分のメールフォームより受信したメールの内容を確認しましょう。
管理者宛メール内容
送信者宛メール内容
入力した件名や本文が表示され、また変数で記入した部分にフォームの入力内容が反映されていればチュートリアルの目標は達成です。
![[モジュール]ボタン](https://developer.a-blogcms.jp/archives/006/202011/large-b5e79625a9a24b927f31dfed302d2656b7cef21917a134ff2886cbeda90c963f.png)
