eFormのセットアップ

MODXで問い合わせなどのメール送信を行う機能を実装するのに便利な「eForm」のセットアップ方法をご紹介します。

eFormはMODX（Evolution）に標準で付属しているスニペットですので、特に別途のインストールなど無しで利用することができます。

eForm利用時の注意点

比較的設定が簡単なeFormなのですが、利用する上で次の３つの注意点があります。

1. メールアドレスのnameは「email」でないといけない
   メールフォームは比較的自由に作成できるeFormですが、１つだけ制限があるようです。
   フォーム中、確認用メールを送信するための「メールアドレス」欄の「name」属性の値は「email」に固定されています。それ以外の名前をつけると確認メールが送信されませんので注意してください。
2. 本文の日本語が文字化けする
   外国製なのだからでしょうか、フォームに記載した内容をメールで送信する際、そのままでは日本語本文の内容が文字化けしてしまうようです。
   以降でご紹介する方法で日本語文字化けを回避します。
3. 確認画面がない
   日本ではなじみがある問い合わせフォーム入力後、一旦表示される「確認画面」がeFormにはありません。いきなりメール送信されてしまいます。
   これがいやな場合は、eFormではなく「cfFormMailer」などの別の機能の利用をオススメします。

セットアップ手順

eFormは次の手順でセットアップしていきます。

1. eFormソースコード修正
2. 「問い合わせフォーム」本体の作成
3. 「問い合わせフォーム」入力ページの作成
4. 「問い合わせメール送信完了ページ」の作成
5. 「確認用返信メール」雛形の作成
6. 「管理者用メール」雛形の作成
7. リソースへ実装
8. 動作確認

eFormソースコード修正

文字化け回避

「eForm利用時の注意点」でもあげたように、そのままではメール本文の日本語が文字化けしてしまいます。
これを回避するために、「/assets/snippets/eform/」ディレクトリにある「eform.inc.php」を修正します。
「$modx->mail->Body = $xxx;」と直接代入している箇所を、以下のように「$modx->mail->Body = mb_convert_encoding($xxx,"JIS","UTF-8");」というふうにmb_convert_encodingを経由するように変更します。
MODX Evolution 1.0.23J, eForm 1.4.4.7 では変更箇所は５箇所あります。

454行目付近

//$modx->mail->Body        = $body;
$modx->mail->Body = mb_convert_encoding($body,"JIS","UTF-8");

564行目付近

//$modx->mail->Body        = $report;
$modx->mail->Body = mb_convert_encoding($report,"JIS","UTF-8");

581行目付近

//$modx->mail->Body        = $report;
$modx->mail->Body = mb_convert_encoding($report,"JIS","UTF-8");

597行目付近

//$modx->mail->Body        = $autotext;
$modx->mail->Body = mb_convert_encoding($autotext,"JIS","UTF-8");

612行目付近

//$modx->mail->Body        = $mobiletext;
$modx->mail->Body = mb_convert_encoding($mobiletext,"JIS","UTF-8");

（オプション）送信者情報の追加

問い合わせフォームを入力・送信してくださった方の「IPアドレス」「ホスト名」「ユーザーエージェント（ブラウザ）」の情報を管理者用メールに記載できるようにします。

• 本設定は任意です。必要だと思われるかたのみどうぞ。

435行目付近

# set postdate
$fields['postdate'] = strftime($modx->toDateFormat(null, 'formatOnly') . " %H:%M:%S",time());
// 以下を追加します
$fields['sender_ip'] = $_SERVER['REMOTE_ADDR'];
$fields['sender_host'] = gethostbyaddr($_SERVER['REMOTE_ADDR']);
$fields['sender_ua'] = $_SERVER['HTTP_USER_AGENT'];

「問い合わせフォーム」本体の作成

問い合わせフォーム全体をコントロールするための設定を「チャンク」として次のように定義します。
チャンク名は任意です。今回は「contactFormForPages」とします。

チャンク「contactFormForPages」

［［eForm
   &formid=`feedbackForm01` -------------------- ①
   &tpl      = `contactForm` ------------------- ②
   &report   = `contactReport` ----------------- ③
   &automessage = `contactReply` --------------- ④
   &autosender = `info@abc.com` ---------------- ⑤
   &subject  = `お問い合わせありがとうございます` --- ⑥
   &gotoid   = `16` ---------------------------- ⑦
］］

• ①：【必須】「問い合わせフォーム」入力ページにてhidden項目「name=formid」のvalueに設定した値
  例では「feedbackForm01」という値にしています
• ②：【必須】「問い合わせフォーム」入力ページのリソースID、またはチャンク名
  例ではチャンク名「contactForm」を指定しています（この後作成）
• ③：【必須】「確認用返信メール」のひな型のリソースID、またはチャンク名
  例ではチャンク名「contactReport」を指定しています（この後作成）
• ④：「確認用返信メール」のひな型のリソースID、またはチャンク名
  例ではチャンク名「contactReply」を指定しています（この後作成）
• ⑤：「確認用返信メール」の差出人メールアドレス
  例では「info@abc.com」を指定しています
• ⑥：送信するメールのタイトル
  例では「お問い合わせありがとうございます」を指定しています
• ⑦：「問い合わせメール送信完了ページ」のリソースID、またはチャンク名
  例ではリソースID「16」を指定しています

これを問い合わせフォーム毎に作成します。問い合わせフォームを３種類作成する場合には３個作成することになります。

「問い合わせフォーム」入力ページの作成

問い合わせフォームの最初に表示される入力ページを作成します。
これは通常のページと同様に「リソース」として作成しても「チャンク」として作成してもどちらでもかまいません。今回はチャンク「contactForm」として作成しました。

「お名前」「メールアドレス」「内容」のみのシンプルなフォームです。必要に応じてclassを指定してスタイルを設定します。

チャンク「contactForm」

<div id="valid_msg" class="validationmessage blinking"></div> --- ①
<form method="post" action="/arch/cms/modx/eform.html"> ------------------------ ②

<input type="hidden" id="SendForm" name="SendForm" value="eFormのセットアップ"> --- ③
<input type="hidden" name="formid" value="feedbackForm01" /> ---------------- ④

<div>
  <label for="InputName1">お名前<span class="required">必須</span></label>
  <input type="text" class="form-control" id="InputName1" name="InputName1" placeholder="お名前" eform="お名前:string:1" /> -- ⑤
</div>

<div>
  <label for="InputEmail1">メールアドレス<span class="required">必須</span></label>
  <input type="email" class="form-control" id="InputEmail1" name="email" value="" placeholder="xxx@xxx.xxx" eform="メールアドレス:string:1" /> -- ⑥
</div>

<div>
  <label for="InputDescription">内容</label>
  <textarea class="form-control" rows="3" id="InputDescription" name="InputDescription">
<!--@IF:0>eFormのセットアップの問い合わせ<@ENDIF--></textarea> ------- ⑦
</div>
<button type="submit">送信</button>
</form>

• ①：エラーチェックの結果エラーがあった場合、ここにメッセージを表示します
• ②：form 文です
• ③：後述する管理者用メールに、どのフォームから送信されたものかを掲載させるためのhidden項目
• ④：上の「問い合わせフォーム」本体の作成の①に指定する値を設定します
• ⑤：「お名前」項目です。入力必須を指定しています
• ⑥：「メールアドレス」項目です。入力必須を指定しています。上記注意点の1. でも記載したようにname属性の値は「email」固定にします
• ⑦：「内容」項目です。例のように必要に応じて「@IF」文も使えます

エラーチェックの指定方法の詳細は次のサイトを参照ください。
MODX Japan eForm
http://modx.jp/docs/extras/snippets/eform/

「問い合わせメール送信完了ページ」の作成

問い合わせメールが正常に送信された後に表示されるページを作成します。
これはチャンクで作成しても通常のページのようにリソースで作成してもどちらでもかまいません。
特にこれといった仕組みもないので、今回はリソースとして作成しました。例では作成したリソースのリソースIDは「16」です。

「確認用返信メール」ひな形の作成

問い合わせフォームを送信してくださった方へ確認用として送信するメールのひな型を作成します。
これは通常のページと同様に「リソース」として作成しても「チャンク」として作成してもどちらでもかまいません。今回はチャンク「contactReply」として作成しました。

チャンク「contactReply」

 様
お問い合わせいただきましてありがとうございます。
後ほど弊社担当者よりご連絡させていただきます。

----------------------------------------------------------------------
【お問い合わせ内容】
----------------------------------------------------------------------
お名前： 様
メールアドレス：
お問い合わせ日時：
お問い合わせ内容：


::: XXX株式会社 :::::::::::::::
tel: 092-111-2222
URL: https://abc.com/
───────────────────────────────────────────────

このメールは自動返信機能により送信しています。

「管理者用メール」ひな形の作成

問い合わせフォーム送信内容を管理者へ送信するメールのひな型を作成します。
これは通常のページと同様に「リソース」として作成しても「チャンク」として作成してもどちらでもかまいません。今回はチャンク「contactReport」として作成しました。

チャンク「contactReport」

様からお問い合わせがありました。
----------------------------------------------------------------------
お名前:様
メールアドレス:
お問い合わせ内容:

----------------------------------------------------------------------
■送信元フォーム：
■発信日時　　　： 
■発信IP　　　　： 
■ホスト名　　　： 
■エージェント　： 
----------------------------------------------------------------------
※このメールは自動返信機能により、送信しています。

リソースへ実装

ここまで出来上がったらページへチャンク「contactFormForPages」を実装します。

チャンクなので、問い合わせフォームとして新規にページ（リソース）を作成しても、既存のページの一部に表示することもできます。

例のようにチャンクをリソース内に記述します。

<div class="section-title center">
  <h2>Contact</h2>
    <div class="title_overview">お問い合わせはお気軽に</div>
      <p>お問い合わせは下記フォームでお願いします。</p>
 <--------------------------------- チャンクを記述
</div>

動作確認

次のことを確認します。

1. チャンクを実装したページ（リソース）にアクセスし、フォームが正しく表示されることを確認します。
2. フォームに必要事項を入力し「送信」ボタンクリック後、問い合わせメール送信完了ページが正しく表示されることを確認します。
3. フォームに入力した内容がメールアドレス入力欄に記載した宛先に正しくメール送信されていることを確認します。
4. 管理者宛に確認メールが正しく送信されていることを確認します。

メールが送信されない場合、次のことを確認してみます。

1. 他の手段でサーバからメールを送信してみて（bashシェルスクリプトなど）正しくメールが送信されるかどうか
2. MODXのメール設定が正しくされているか確認
   [メイン]->[ダッシュボード]->[グローバル設定] の「セキュリティ」タブの「メール送信方法」〜「SMTPセキュア」の設定までを確認
3. SELinuxを使用している場合、「httpd_can_sendmail」の値が「on」になっていることを確認
   SSHなどからコマンド「sudo getsebool  httpd_can_sendmail」を実行してみる。
   offの場合、「sudo setsebool -P httpd_can_sendmail on」を実行してみる。
4. Amazon EC2からメールを送信する場合、別途申請が必要です。