PowerCMS ブログ

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

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

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

※ 本記事に記載しているコードは 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でフォームの確認画面に「修正する」リンクを追加する』より

また、 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ステップで実装方法をご紹介いたします。

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

ステップ 0. 前提

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

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

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

2つのテンプレートモジュールを作成します。

ContactForm テンプレートモジュール

テンプレート名	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>

ContactForm::module_mtml テンプレートモジュール

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

テンプレート名	ContactForm::module_mtml

<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>

※ パッケージに同梱されているファイル [ addons/ContactForm.pack/tmpl/module_mtml.tmpl ] と同じ内容です

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

フォームを表示するには、本来であればフォーム用カスタムフィールドタグを利用します。

通常のフォーム表示用のタグ記述

<mt:ContactFormSelector>

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

今回のフォーム表示用のタグ記述

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

カテゴリー: テンプレート作成Tips; 技術情報

投稿者: たはかし

コメントを投稿する

名前
電子メール
URL

サインイン情報を記憶

PowerCMS ブログ

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

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

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

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

ステップ 0. 前提

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

ContactForm テンプレートモジュール

ContactForm::module_mtml テンプレートモジュール

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

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

あなたへお勧めの記事

コメントを投稿する

Archives

Recent Entries

Categories

PowerCMS ブログ

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

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

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

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

ステップ 0. 前提

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

ContactForm テンプレートモジュール

ContactForm::module_mtml テンプレートモジュール

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

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

この記事と関連性の高い記事

あなたへお勧めの記事

コメントを投稿する

Archives

Recent Entries

Categories