レベル5お問い合わせフォームの設定を最適化する

フォーム

フォームID

目標


お問い合わせなどのフォームが入力された時、お問い合わせした人や管理者へ送信する確認メールをカスタマイズしましょう。


解説使用テーマbeginner2018

Before

After

目次

  1. フォームの仕組み
  2. テンプレートの形式でメールを受け取る
  3. オリジナルの件名・本文を入力してメールを受け取る

フォームの仕組み


初期設定のサイトマップでは、フォームの機能を体験するためのお問い合わせページ( http://example.com/contact/ )を用意しています。まずはこのページでフォームの仕組みについて学んでいきましょう。


お問い合わせページでは、入力する項目を下図のように設定しています。


お問い合わせフォーム

通常このフォームから送信された内容は、サイト管理者のメールアドレスに届くようにしなければなりません。また、入力されたアドレス宛へ確認メールが必要な場合もあります。まずはフォーム管理画面から、それらのアドレスを設定しましょう。


  1. 管理ボックスから [管理ページ] ボタンをクリックする
  2. サイドメニュー内 [フォーム] をクリックする
  3. リスト内「お問い合わせフォーム」右側の [変更] ボタンをクリックする

フォーム管理画面

フォームの管理画面では、「基本設定」「入力チェック・変換」「一般メール設定」「管理者宛メール設定」を編集することができます。


基本設定



基本設定では、最初にフォームIDとフォーム名を定めています。


フォームID
制作するサイトによっては、お問い合わせフォームや募集フォームなど複数のフォームを設置することがあります。それらを区別する任意の英数字がフォームIDです。モジュールIDと同じくフォームIDはテンプレートと管理画面で合わせて設定されており、これによってフォームの設定や投稿データを管理できます。

テーマ「beginner2018」では、お問い合わせフォームのフォームIDはテンプレート側で contactForm と指定されているため、基本設定画面からも同じIDを使用しています。


入力チェック・変換



フォームの任意の項目に対して、「入力必須」や「最大文字数」などの条件を指定することができます。テンプレートを編集する必要があります。

しかし今回のチュートリアルでは管理画面のみでできることを学習するため、この機能について作業することはありません。


一般メール設定


一般メール設定では、フォームに入力した方へ送信するメールを管理することができます。



基本的には、メールの件名、本文について管理画面から直接入力し、通常のメールフォームと同様に「To」で送信先のメールアドレスを、「From」で送信元のメールアドレスを指定します。その他にも、通常のメールの設定と同じようにCc・Bcc・Reply-To の設定ができます。

「一般メール設定」の「From」は概ねサイト管理者になるので、自分のメールアドレスを入力しておくと良いでしょう。


From(自分のメールアドレス)

また件名、本文を入力していない場合は、a-blog cms 側で用意しているテンプレートの形式が採用されます。上図の件名ファイル、本文ファイルの項目に記入されている「/contact/form/subject.txt」「/contact/from/body.html」などは、そのテンプレートが置いてある場所へのパスになっています。


管理者宛メール設定


管理者宛メール設定では、フォームの管理者宛へ送信されるメールを管理することができます。



構成は一般メール設定と同じです。メールの件名、本文について管理画面から直接入力し、通常のメールフォームと同様に「AdminTo」で送信先のメールアドレスを、「AdminFrom」で送信元のメールアドレスを指定できるようになっています。

こちらでは送信先をサイト管理者にする必要があるので、「AdminTo」へ自分のメールアドレスを入力しておきましょう。


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}

+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-+:-+:-+:-+:-+

入力内容を保存したら再度お問い合わせを送信し、自分のメールフォームより受信したメールの内容を確認しましょう。


管理者宛メール内容

管理者宛メール内容


送信者宛メール内容

送信者宛メール内容


入力した件名や本文が表示され、また変数で記入した部分にフォームの入力内容が反映されていればチュートリアルの目標は達成です。


お疲れ様でした!
以上で「管理画面からサイトを運用する」のチュートリアルは全て終了です
次の「HTMLとCSSだけでサイトを制作する」へ進みましょう