CMSのポテンシャルを引き出す─MODxで作る商用サイト

第15回 MODxのスニペットを使いこなす─FormIT[その1]

この記事を読むのに必要な時間:およそ 4.5 分

はじめに

これまで,WayfinderSimpleSearchなど,MODxの中でも代表的とも言えるスニペットについて簡単な紹介を行ってきましたが,今回も商用サイトを構築する上で必須とも言える,メールフォームを実現するためのスニペットを紹介します。その名はFormITです。

メールフォームの歴史は非常に長いため,ご存知のように,⁠メールフォーム」と検索するだけで,シンプルなものからAjaxに対応したものまで,さまざまなメールフォーム用のプログラムをダウンロードすることができます。それらをMODxとは独立した形で動作させることも可能なのですが,MODx以外の部分でバージョン,設定管理が必要になってしまうため,運用の手間を考えると,なるべくメールフォームもMODx内で完結させたいと考えたくなるのは筆者だけではないはずです。

FormITのインストール

もはや解説の必要も無いかもしれませんが,スニペットをインストールするためには,⁠システム」⁠⁠パッケージマネージャー」⁠⁠プロバイダから取得」より「FormIT」を検索してください。FormITスニペットはWayfinderやLoginスニペットと並んで非常にメジャーなスニペットですので,検索せずとも「ダウンロードが多い順」の中にリストアップされていることが多いです。

FormITスニペットを導入すると,図1のように関連スニペットを含め,合計7個の関連スニペットがインストールされます。

図1 インストールされるスニペット群

図1 インストールされるスニペット群

余談ですが,以前のバージョンであるMODx Evolutionでメールフォームを実現させるためのスニペットといえば,eFormがメジャーで,一部の機能について言えばFormITよりも優れていたのですが,現在このスニペットは開発が止まっており,Revolution用のメールフォームといえば,現時点では事実上FormIT一択という状況です。

FormITとリソースの関係

以前SimpleSearchスニペットを導入した際に,⁠検索用リソース」⁠⁠検索後に表示されるリソース」を作成したのは記憶に新しいかもしれませんが,FormITを使ったメールフォームを設置するためにも,基本的に次の2つのリソースが必要になります。

  • メールフォーム自体のリソース
    ⁠なかみつ園で言えば,http://www.nakamitsuen.com/form.html)
  • 問い合わせメールのテンプレートとなるリソース(チャンク)

では,いつものような流れで,まずは実際に動作を体験してみた上で詳しい解説に入っていきましょう。

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

ここでは,なかみつ園のように,シンプルなメールフォーム用のページを作成してみます。管理画面より,次の問い合わせフォーム用リソースを作成してみてください。

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

タイトルお問い合わせ
エイリアスform
公開するチェック
リソースコンテンツリスト1の内容

リスト1 メールフォーム用リソース

[[!FormIt?
 &hooks=`email`
 &emailTpl=`formit_mailbody`
 &emailSubject=`【お茶のなかみつ園】お問い合わせありがとうございます`
 &emailTo=`user@example.com`
 &emailToName=`お茶のなかみつ園`
 &validate=`name:required,
      email:email:required,
      message:required`
 &successMessage=`<p>お問い合わせを受け付けました。</p>`
]]

<p>
<div class="success" style="color: #ff0000">[[!+fi.successMessage]]</div>
</p>

<form class="form" action="[[~[[*id]]]]" method="post">
  <table id="contactform">
    <tbody>
    <tr>
      <th>お名前<span style="color: #ff2222;">*</span></th>
      <td><input id="name" name="name" type="text" value="[[!+fi.name]]" /><br /><span class="error">[[!+fi.error.name]]</span>
      </td>
    </tr>
    <tr>
      <th>メールアドレス<span style="color: #ff2222;">*</span></th>
      <td><input id="email" name="email" type="text" value="[[!+fi.email]]" /><br /><span class="error">[[!+fi.error.email]]</span></td>
    </tr>
    <tr>
      <th>問い合わせ内容<span style="color: #ff2222;">*</span></th>
      <td><textarea id="message" cols="35" rows="7" name="message">[[!+fi.message]]</textarea><br /><span class="error">[[!+fi.error.message]]</span></td>
    </tr>
    <tr>
      <th><br /></th>
      <td><input id="submit" name="submit" type="submit" value="送信" /></td>
    </tr>
  </tbody>
  </table>
</form>

送信先メールアドレスの部分は適宜変更してください。

次に,管理者にメールを通知するためには,そのためのテンプレートが必要になりますので,その内容は次のようにチャンクとして作成します。

リスト2 formit_mailbodyチャンクの内容

==============================================================<br />
※ 本メールは自動送信です。返信することは出来ません。<br />
==============================================================<br />
<br />
下記のお問い合わせを受け付けました。通常,2営業日以内にご連絡<br />
いたします。お急ぎの場合は,お手数ですがお電話にてお問い合わせ<br />
下さい。<br />
<br />
--------------------------------------------------------------<br />
お問い合わせ内容<br />
--------------------------------------------------------------<br />
<br />
お名前:     [[+name]] 様<br />
メールアドレス: [[+email]]<br />
<br />
お問い合わせ内容:<br />
[[+message]]<br />

以上のようにリソースとチャンクを作成した結果,お問い合わせページの様子は図2のようになります。スニペットコール時に,&validateというパラメータで内容の妥当性をチェックしているため,図2のように正しくないメールアドレスを指定すると,英語でのエラーが表示されています。

図2 問い合わせページの様子

図2 問い合わせページの様子

一方で,正しいメールアドレスを指定した場合に送られてくるメールの内容は次のようなものとなります。

リスト3 送信されてくるメールの内容

============================================================== 
※ 本メールは自動送信です。返信することは出来ません。 
============================================================== 

下記のお問い合わせを受け付けました。通常,2営業日以内にご連絡 
いたします。お急ぎの場合は,お手数ですがお電話にてお問い合わせ 
下さい。 

-------------------------------------------------------------- 
お問い合わせ内容 
-------------------------------------------------------------- 

お名前:     テスト 様 
メールアドレス: foo@example.com 

お問い合わせ内容: 
問い合わせのテスト

現時点では,管理者のみにメールが送られてくる形なので,機能的にいろいろなツッコミどころはあるかと思いますが,まずはメールフォームを簡単に設置できることだけは理解いただけたかと思います。FormITの機能はこれだけではないため,順を追って解説させてください。

著者プロフィール

中満英生(なかみつひでお)

大学時代に出会ったSolarisがきっかけでUNIXの世界へ。その後ホスティングプロバイダ,データセンターで実務経験を積む傍ら,雑誌記事の執筆や技術セミナーの講師を務める。サーバ設定の他,セキュリティに関する著作や技術者エッセイも執筆経験あり。

コメント

  • 日本語化ファイル

    つたないものですが、FormItの日本語化したファイルを置いてあります。

    http://wiki.rookie-inc.com/web/modx/revolution/addons/formit

    Commented : #1  T.Hayashi (2011/09/27, 18:44)

コメントの記入