確認画面付きのメールスニペットcfFormMailer

公開日:2021年10月29日
最終更新日:2021年10月29日
レベル:★★★☆☆
MODXで問い合わせフォームなどを作成するのに便利な確認画面付きフォームスニペット「cfFormMailer」のセットアップ方法をご紹介します。

MODX Evolution(以降、単にMODXと表記します)で問い合わせなどのメール送信機能を実装する方法として、MODX標準で持っている「eForm」スニペットがあります。しかし、eFormスニペットには入力した内容を送信する前に一旦確認するためのページ、所謂「確認画面」を表示する機能がありません。

海外では確認画面なしで送信する方式が一般的なようですが、日本の場合、確認画面を要求するケースが多いようです。 

今回ご紹介する「cfFormMailer」は確認画面が使えるメールフォームのスニペットです。
MODX標準ではないのでプログラムを入手してインストールする必要がありますが、確認画面だけでなく多機能なメールフォームです。

cfFormMailerの入手〜サーバへアップロード

入手

下記のGitHubよりcfFormMailerをダウンロードします。

GitHub - cfFormMailer

ダウンロードしたzipファイルを展開します。

サーバ側へアップロード

  1. MODXが稼働しているサーバのMODXフォルダの「assets/snippets/」フォルダに「cfFormMailer」フォルダを新規に作成します。
  2. 作成した「cfFormMailer」に、ダウンロード&展開したファイルにある「cfFormMailer-master/assets/snippets/cfFormMailer」フォルダ内にある次の3つのファイルをアップロードします。
    • additionalMethods.inc.php
    • bootstrap.php
    • class.cfFormMailer.inc.php

MODX管理画面での設定

スニペットの作成

MODX管理画面にログインし、「エレメント」→「スニペット」タブより下記内容でスニペットを新規作成します。

  • スニペット名:cfFormMailer
  • プロパティの説明:<strong>1.6</strong> cfFormMailer (バージョン番号は「snippet.cfFormMailer.php」ファイル内に記載している)
  • スニペットコード(php):展開したcfFormMailer-masterフォルダ直下にある「snippet.cfFormMailer.php」ファイルの内容をコピー&ペースト

メールフォーム用リソースの作成

以下に記す手順で、メールフォーム用の次の6つのリソースを作成していきます。

  • 環境設定用リソース
  • 入力画面
  • 確認画面
  • 送信完了画面
  • 自動返信メール用テンプレート
  • 管理者宛メール用テンプレート

チャンクで作成しても良いのですが、メールフォームを複数作成した際に管理しやすいように、ここでは「リソース」で作成していきます。

コンテナの作成

メールフォームリソースをまとめておくためのコンテナ(フォルダのようなもの)を作成し、上記リソースをこのコンテナ以下に作成していきます。ここでは次の内容でコンテナを作成することにします。

  • リソース名:お問い合わせ(わかりやすい内容で設定)
  • エイリアス:contact(わかりやすい内容で設定)
  • メニューに表示:チェックOFF
  • コンテナとして扱う:チェックON
  • リッチテキストで編集:チェックOFF
  • 本文:後で設定します
  • その他の項目は既定値のままで可

環境設定用リソースの作成

メールフォームの各種設定をまとめた環境設定用リソースを次の内容で作成します。

  • リソース名:config(わかりやすい名称で設定)
  • エイリアス:既定値のままで可
  • 使用テンプレート:(blank)
  • コンテントタイプ:text/plain
  • リッチテキストで編集:チェックOFF
  • 本文:展開した「cfFormMailer-master/assets/snippets/cfFormMailer/config/」フォルダにある「contact.cfg.sample」の内容をコピー&ペースト
  • その他の項目は既定値のままで可

一旦保存し、再度本リソースを開いて本文中の次の内容を設定します。

  • admin_mail:管理者宛メールの受信先メールアドレスを設定
  • admin_subject:管理者宛メールの標題にする文字列を設定
  • reply_from:自動返信メールのFromに設定するメールアドレスを設定
  • reply_subject:自動返信メールの標題にする文字列を設定

設定内容の詳細は「cfFormMailerマニュアル」を参照してください。

入力画面の作成

メールフォームの入力画面となるリソースを作成します。

  • リソース名:input(わかりやすい名称で設定)
  • エイリアス:既定値のままで可
  • 使用テンプレート:(blank)
  • リッチテキストで編集:チェックOFF
  • 本文:展開した「cfFormMailer-master/assets/snippets/cfFormMailer/tpl/」フォルダにある「web_form.tpl.sample」を参考に作成しても良いでしょう。
  • その他の項目は既定値のままで可

  • 入力値のエラーチェック方法など入力画面の詳細は「cfFormMailerマニュアル」の「機能解説」欄を参照してください。
  • 入力画面はリッチテキストで編集すると<iferror>が消えてしまうことがあるので、「リッチテキストで編集」のチェックをOFFにして編集したほうが良いでしょう。
  • MODXをドキュメントルートではなくサブディレクトリにインストールしている場合、フォームのaction属性は
    <form method="post" action="cms/modx/cfformmailer.html">
    ではなく
    <form method="post" action="/arch/cms/modx/cfformmailer.html">
    としないとうまく動かない場合があります。

確認画面の作成

メールフォームの確認画面となるリソースを作成します。

  • リソース名:confirm(わかりやすい名称で設定)
  • エイリアス:既定値のままで可
  • 使用テンプレート:(blank)
  • リッチテキストで編集:チェックOFF
  • 本文:展開した「cfFormMailer-master/assets/snippets/cfFormMailer/tpl/」フォルダにある「web_confirm.tpl.sample」を参考に作成しても良いでしょう。
  • その他の項目は既定値のままで可

  • MODXをドキュメントルートではなくサブディレクトリにインストールしている場合、フォームのaction属性は
    <form method="post" action="cms/modx/cfformmailer.html">
    ではなく
    <form method="post" action="/arch/cms/modx/cfformmailer.html">
    としないとうまく動かない場合があります。

送信完了画面の作成

メールフォームの送信完了画面となるリソースを作成します。

  • リソース名:thanks(わかりやすい名称で設定)
  • エイリアス:既定値のままで可
  • 使用テンプレート:(blank)
  • リッチテキストで編集:チェックOFF
  • 本文:展開した「cfFormMailer-master/assets/snippets/cfFormMailer/tpl/」フォルダにある「web_thanks.tpl.sample」を参考に作成しても良いでしょう。
  • その他の項目は既定値のままで可

自動返信メール用テンプレートの作成

メールフォームに入力した相手へ送信する自動返信メールのテンプレートとなるリソースを作成します。

  • リソース名:mail_reply(わかりやすい名称で設定)
  • エイリアス:既定値のままで可
  • 使用テンプレート:(blank)
  • リッチテキストで編集:チェックOFF
  • 本文:展開した「cfFormMailer-master/assets/snippets/cfFormMailer/tpl/」フォルダにある「mail_autoreply.tpl.sample」を参考に作成しても良いでしょう(サンプルはhtmlメールになっているのでテキストメールを送りたい方は注意が必要)。
  • その他の項目は既定値のままで可

管理者宛メール用テンプレートの作成

管理者宛メールのテンプレートとなるリソースを作成します。

  • リソース名:mail_admin(わかりやすい名称で設定)
  • エイリアス:既定値のままで可
  • 使用テンプレート:(blank)
  • リッチテキストで編集:チェックOFF
  • 本文:展開した「cfFormMailer-master/assets/snippets/cfFormMailer/tpl/」フォルダにある「mail_receive.tpl.sample」を参考に作成しても良いでしょう。
  • その他の項目は既定値のままで可

環境設定用リソースへの反映

以上のリソースを作成した結果、次のようなコンテナ&リソースの構成になっています(各リソース右横のリソースIDはこの例と違っているかと思います)。

各リソースに割り当てられたリソースID(リソース名の右横に付与された番号)を環境設定用リソースの本文へ反映します。
上図の例とした場合、次のようになります。

 :
# テンプレート (チャンク名またはリソースIDで指定)
tmpl_input = 24
tmpl_conf = 25
tmpl_comp = 26
tmpl_mail_admin = 28
tmpl_mail_reply = 27
tmpl_mail_reply_mobile =
complete_redirect =
 :

コンテナ本文の設定

コンテナの本文にcfFormMailerスニペットを呼び出す文を記述します。
「config=」には環境設定用リソースのリソースID(上図の例では「23」)を設定します。

[!cfFormMailer?config=23!]

上記構文をコピー&ペーストする際には"[" と "]" を半角にするように注意してください。

動作確認

以上でcfMailFormの設定は完了です。
ブラウザから作成したコンテナのエイリアス(上記の例では「contact」)「http://MODXサーバ/contact/」へアクセスしてみます。

入力画面、確認画面、完了画面が表示され、自動返信メール・管理者宛メールが正しく送信されれば完了です。

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

  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等クラウドシステム構築
等々のご依頼承っております

Contents