eFormのセットアップ

最終更新日:2020年07月19日
レベル:★★★☆☆
MODXで問い合わせフォームなどを作成するのに利用する「eForm」のセットアップ方法をご紹介します。

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

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

eForm利用時の注意点

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

  1. メールアドレスのnameは「email」でないといけない
    メールフォームは比較的自由に作成できるeFormですが、1つだけ制限があるようです。
    フォーム中、確認用メールを送信するための「メールアドレス」欄の「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 では変更箇所は5箇所あります。

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」を指定しています

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

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

問い合わせフォームの最初に表示される入力ページを作成します。
これは通常のページと同様に「リソース」として作成しても「チャンク」として作成してもどちらでもかまいません。今回はチャンク「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からメールを送信する場合、別途申請が必要です。

ー 以上 ー

 CMSを使ったホームページ制作
 VPS, AWS等クラウドシステム構築
等々のご依頼承っております