PowerCMS™

PowerCMS ブログ

ホーム > PowerCMS ブログ > カスタムフォーム機能のテンプレートを管理画面のみで編集・管理する方法

2018年10月10日

カスタムフォーム機能のテンプレートを管理画面のみで編集・管理する方法

カスタムフォームにおけるフォーム全体のテンプレート ( 以下『フォームテンプレート』 ) を変更するには、サーバーに接続してファイルを編集する必要があります。

本記事では『管理画面しか触れない状況なんだけど、どうにかならないかな?』という方に向けて、管理画面だけでフォームテンプレートを編集する方法をお届けします。

※ 本記事に記載しているコードは PowerCMS 5.02 で動作確認を行っています

カスタムフォーム機能 (Contact Form アドオン) とは

PowerCMS の全てのエディションには『カスタムフォーム機能 (Contact Form アドオン)』が標準で同梱されており、バックエンドを気にすることなく、お問い合わせフォームやアンケートフォームを非常に簡単に作成する事ができます。

製品に同梱されているテーマを適応するだけでフォーム機能をすぐにご利用いただけます。

お問い合わせ・アンケートフォーム作成と管理(カスタムフォーム) | PowerCMSの機能
https://www.powercms.jp/products/features/function/form.html
エディション別機能比較表 | 製品ラインナップ
https://www.powercms.jp/products/lineup/comparison.html

フォームのデザインを変更したいこと、ありますよね

フォームを作成したらデザインの変更したくなるかと思います。
フォームテンプレートの編集方法は既に本ブログの記事に記載されています。

フォームの各コントロールのHTMLも、各設問の設定となる「フォーム項目」と呼ばれるオブジェクトの管理画面からMTタグを使ってカスタマイズできます。

ところが、いわゆるフォームの"ガワ部分"(ベーステンプレート)、formタグや buttonタグなどのカスタマイズを行うにあたってはどの部分をカスタマイズすれば良いかがわかりにくいらしく、この件に関する質問はサポートへの問い合わせでも多い部類に入ります。

これまでサポートでご案内しているカスタマイズの方法は以下の通りです。

  • /mt/addons/ContactForm.pack/tmpl/module_mtml.tmpl をそのままカスタマイズするか
  • /mt/addons/ContactForm.pack/alt-tmpl/module_mtml.tmpl にコピーを設置し、そちらをカスタマイズする

このテンプレートをファイルではなく管理画面上のテンプレートモジュールで管理・編集したいという問い合わせも良くいただくので、以下のようにご案内しています。

  • 上記の module_mtml.tmpl 内に mt:Includeタグを記述してテンプレートモジュールを指定し、編集の際はテンプレート管理画面からそのモジュールのソースを編集する

ContactFormで フォームの確認画面に「修正する」リンクを追加する | PowerCMS ブログ >より引用

alt-tmpl を利用せずにフォームテンプレートを修正可能にするプラグインもご提供しています。

ContactFormの複数のベーステンプレートをモジュール管理可能にするプラグイン | PowerCMS ブログ
https://www.powercms.jp/blog/2017/01/contact_form_mtml.html
ContactFormMTML プラグイン
https://github.com/alfasado/mt-plugin-contactform-mtml

上記の通り、プラグインを利用するにしても alt-tmpl 機能を利用するにしても、一度はサーバーに接続してファイルを設置・編集する必用があります。

管理画面のみでフォームテンプレートを管理する方法

さて本題です。

テンプレートの作りかた次第で、管理画面のみでもフォームテンプレートを管理する事が出来ます。

ポイントとしては『フォーム用カスタムフィールドのタグを使わない』ことです。代わりに以下で作成するテンプレートモジュールを MTInclude タグでインクルードする事でフォームを表示します。

次の2ステップで実装方法をご紹介いたします。

  1. テンプレートモジュール「ContactForm」「ContactForm::module_mtml」を作成する
  2. ウェブページアーカイブテンプレートで「ContactForm」テンプレートモジュールをインクルードする

ステップ 0. 前提

以下のフォーム用カスタムフィールドが事前に作成されているのが前提です。

項目名 設定値
システムオブジェクト ウェブページ
名前 フォームを選択
種類 フォーム
ベースネーム contactformselector
テンプレートタグ ContactFormSelector

ステップ 1. テンプレートモジュールを作成する

その1: ContactForm
<mt:Ignore>==============================
# 利用方法
MTInclude タグに _tag 変数を付与して呼び出します。

# 変数
_tag        : フォーム種類カスタムフィールドのタグ名( "MT" を除く )
_module_mtml: 実装テンプレート名 ( デフォルト値: "ContactForm::module_mtml" )

# サンプル
<mt:Include module="ContactForm" _tag="ContactFormSelector" _module_mtml="ContactForm::module_mtml">
==============================</mt:Ignore>

<mt:If tag="$_tag">
  <mt:SetVarBlock name="contactform_tag">mt:<mt:Var name="_tag">Loop</mt:SetVarBlock>
  <mt:If name="contactform"><mt:If name="template_type" like="^(confirm|submit)$">
    <mt:Var name="contactform_tag" value="mt:Loop">
  </mt:If></mt:If>
  <mt:SetVarBlock name="_">
    &lt;<mt:Var name="contactform_tag"><mt:If name="contactform_tag" eq="mt:Loop"> name="field_loop"</mt:If>&gt;
      &lt;mt:Include module="<mt:Var name="_module_mtml" _default="ContactForm::module_mtml">"&gt;
    &lt;/<mt:Var name="contactform_tag">&gt;
  </mt:SetVarBlock>
  <mt:Var name="_" decode_html="1" mteval="1">
</mt:If>
その2: ContactForm::module_mtml

パッケージに同梱されているファイル [ addons/ContactForm.pack/tmpl/module_mtml.tmpl ] の内容をコピペ

フォームテンプレートを編集する場合は、こちらのテンプレートモジュールを編集します

<mt:Ignore>==============================
フォーム実装
Original File: /path/to/powercms/addons/ContactForm.pack/tmpl/module_mtml.tmpl
==============================</mt:Ignore>

<mt:IfContactFormIsOpen>
  <mt:If name="template_type" eq="submit">
    <mt:If name="__first__">
      <p class="contact-form-information">
        <$mt:FeedbackThanksMessage nl2br="xhtml"$>
      <!-- /.contact-form-information --></p>
    </mt:If>
  <mt:Else>

    <mt:If name="__first__">
      <mt:unless name="template_type">
        <$mt:setVar name="template_type" value="view"$>
      </mt:unless>

      <div id="contactform">

        <p class="contact-form-information">
          <mt:If name="confirm_ok">
            <$mt:FeedbackConfirmMessage nl2br="xhtml"$>
          <mt:Else>
            <mt:If name="template_type" eq="view">
              <$mt:FeedbackInformationMessage nl2br="xhtml"$>
            <mt:ElseIf name="template_type" eq="confirm">
              <$mt:FeedbackErrorMessage nl2br="xhtml"$>
            </mt:If>
          </mt:If>
        <!-- /.contact-form-information --></p>

        <form action="<mt:if name="config.ContactFormCGIPath"><$mt:Var name="config.ContactFormCGIPath"$><mt:else><$mt:CGIPath$></mt:if><$mt:ContactFormScript$>" method="post"<mt:if name="config.ContactFormAllowUploadFile"> enctype="multipart/form-data"</mt:if>>
          <mt:if name="mode" eq="confirm">
            <input type="hidden" name="sessid" value="<$mt:GetVar name="request.sessid" escape="html"$>" />
          <mt:else>
            <input type="hidden" name="sessid" value="<mt:IfDynamic><$mt:GetVar name="request.sessid" escape="html"$><mt:Else><mt:IfBlogDynamicMTML><mtml tag="MTGetVar" params='name="request.sessid" escape="html"'></mt:IfBlogDynamicMTML></mt:IfDynamic>" />
          </mt:if>
          <input type="hidden" name="__mode" value="<mt:If name="confirm_ok">submit<mt:Else>confirm</mt:If>" />
          <mt:If name="template_type" eq="confirm">
            <input type="hidden" name="id" value="<mt:Var name="id" escape="html">" />
            <input type="hidden" name="blog_id" value="<mt:Var name="blog_id" escape="html">" />
            <input type="hidden" name="model" value="<mt:Var name="model" escape="html">" />
            <input type="hidden" name="object_id" value="<mt:Var name="object_id" escape="html">" />
            <input type="hidden" name="identifier" value="<mt:Var name="identifier" escape="html">" />
            <mt:if name="magic_token">
              <input type="hidden" name="magic_token" value="<mt:Var name="magic_token" escape="html">" />
            </mt:if>
            <mt:if name="token">
              <input type="hidden" name="token" value="<mt:Var name="token" escape="html">" />
            </mt:if>
          <mt:Elseif name="template_type" eq="submit">
          <mt:Else>
            <input type="hidden" name="blog_id" value="<$mt:BlogID$>" />
            <input type="hidden" name="id" value="<$mt:ContactFormID$>" />
            <$mt:ArchiveType setvar="archive_type"$>
            <mt:If name="archive_type" eq="Individual">
              <input type="hidden" name="object_id" value="<$mt:EntryID$>" />
              <input type="hidden" name="model" value="entry" />
            <mt:Elseif name="archive_type" eq="Page">
              <input type="hidden" name="object_id" value="<$mt:PageID$>" />
              <input type="hidden" name="model" value="page" />
            <mt:Elseif name="archive_type" like="Category">
              <input type="hidden" name="object_id" value="<$mt:CategoryID$>" />
              <input type="hidden" name="model" value="category" />
            </mt:If>
          </mt:If>

          <div class="contact-form">
    </mt:If>

    <mt:If name="template_type" eq="confirm">
      <$mt:Var name="field_html"$>
    <mt:Elseif name="template_type" eq="submit">
    <mt:Else>
      <$mt:FormElementHTML$>
    </mt:If>

    <mt:If name="__last__">
            <div class="contact-form-submit">
              <mt:If name="confirm_ok">
                <input type="submit" value="<$mt:Trans phrase="Submit" component="ContactForm"$>" />
              <mt:Else>
                <input type="submit" value="<$mt:Trans phrase="Confirm" component="ContactForm"$>" />
              </mt:If>
            <!-- /.contact-form-submit --></div>

          <!-- /.contact-form --></div>
        </form>
      <!-- /#contactform --></div>
    </mt:If>

  </mt:If>

<mt:Else>

  <mt:If name="__first__">
    <p class="contact-form-information">
      <mt:IfContactFormIsClosed>
        <$mt:FeedbackClosedMessage nl2br="xhtml"$>
      </mt:IfContactFormIsClosed>
      <mt:IfContactFormIsPreOpen>
        <$mt:FeedbackPreOpenMessage nl2br="xhtml"$>
      </mt:IfContactFormIsPreOpen>
    <!-- /.contact-form-information --></p>
  </mt:If>

</mt:IfContactFormIsOpen>

ステップ 2. ウェブページアーカイブテンプレートにインクルードする

本来はフォーム用カスタムフィールドタグをフォームを挿入したい箇所に記載してフォームを表示させますが、

<mt:ContactFormSelector>

今回はフォーム用カスタムフィールドタグの代わりに下記を記載します

<mt:Include module="ContactForm" _tag="ContactFormSelector">

フォーム毎にデザインを変更したい場合は『ContactForm::module_mtml』テンプレートモジュール内で MTIf タグ等で条件分岐して出し分ける事となりますが、テンプレート全体の見通しが悪くなることが懸念されます。

そこで『ContactForm』テンプレートモジュールをインクルードする際に _module_mtml 変数にフォームテンプレートのテンプレート名を指定することで、読み込むテンプレートモジュールを切り替えるようにしてあります(指定がなければ『ContactForm::module_mtml』テンプレートモジュールを読み込みます)。

例えば次のコードだと『ContactForm::module_mtml_2』テンプレートモジュールが利用されます。

<mt:Include module="ContactForm" _tag="ContactFormSelector" _module_mtml="ContactForm::module_mtml_2">

また、カスタムフィールドのテンプレートタグが異なる場合は、MTInclude タグの _tag 変数の値を変更してください。

<mt:Include module="ContactForm" _tag="カスタムフィールドのテンプレートタグ ( 頭の MT を除いた文字列 )">

MTInclude タグに設定している _tag_module_mtml はいわゆる『variable_foo="value"』モディファイアで、読み込むテンプレートモジュールで参照可能な変数を設定しています。

参考: 変数を定義した MTInclude ファンクションタグの活用

お好みに併せてフォームテンプレートをカスタマイズ

後はお好みに合わせて「ContactForm::module_mtml」テンプレートモジュールを編集すれば完成です!

本ブログにはカスタマイズに関する記事が多数ありますので、CMS 構築にお役立ていただけますと幸いです。

ContactFormで フォームの確認画面に「修正する」リンクを追加する | PowerCMS ブログ
https://www.powercms.jp/blog/2017/01/customize_form_base.html
ContactFormで入力した値を修正画面に引き継ぐ方法 | PowerCMS ブログ
https://www.powercms.jp/blog/2017/12/contactform_1.html
カスタムフォームに編集機能を追加する | PowerCMS ブログ
https://www.powercms.jp/blog/2018/01/edit-function-for-custom-form.html
カスタムフォームのテンプレートでフォームの情報を取得する | PowerCMS ブログ
https://www.powercms.jp/blog/2018/02/get-custom-form-information-from-template.html
ContactFormでフォーム項目の種類に無い項目をCMSテンプレートのカスタマイズのみで作る | PowerCMS ブログ
https://www.powercms.jp/blog/2016/09/contactform_original_formitem.html
ContactFormでフォーム項目の種類に無い項目をCMSテンプレートのカスタマイズのみで作る(その2) | PowerCMS ブログ
https://www.powercms.jp/blog/2018/07/contactform_original_formitem2.html

カテゴリー
テンプレート作成Tips
技術情報
投稿者
たはかし