PowerCMS ブログ

PowerCMSのフォーム機能 (ContactForm.pack) を利用すればノンプログラマでも驚くほど簡単にお問い合わせフォームを作成できます。プログラマをアサインできないサイト構築案件でもフォームが手軽に作成できるとあって人気の機能で、フォームの各コントロールの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 タグを記述してテンプレートモジュールを指定し、編集の際はテンプレート管理画面からそのモジュールのソースを編集する

ベーステンプレートを編集して確認画面に「修正する」リンクを表示する

カスタマイズの一例として、確認画面に「修正する」リンクを追加する方法をご紹介します。

• サンプルMTML (ZIPファイル - 4 KB)

※ 解凍してmodule_mtml.tmplを /mt/addons/ContactForm.pack/alt-tmpl/module_mtml.tmpl に設置し、フォーム項目(1行テキスト)のテンプレートに form_element.tmpl の内容をコピーします。

69行目付近(「修正する」リンクのJavaScriptを追加)

※2019年2月22日にJavaScriptを更新いたしました。

    <input type="submit" value="<$mt:Trans phrase="Submit" component="ContactForm"$>" />
    <script id="customize-form-base">
    (function () {
      const scriptElem = document.getElementById('customize-form-base');
      let node = scriptElem.parentNode;
      while (node && 'form' !== node.nodeName.toLowerCase()) {
        node = node.parentNode
      }
      if (!node) {
        return
      }

      const inputElem = node.querySelector('input[name="__mode"]');
      if (inputElem) {
        const buttonElem = document.createElement('button');
        buttonElem.type = 'button';
        buttonElem.textContent = '修正する';
        buttonElem.classList.add('foo', 'bar', 'baz');  // ボタンにクラス名が必要であればカンマ区切りで設定します
        buttonElem.addEventListener('click', function () {
          inputElem.value = 'view';
          node.submit();
        });
        scriptElem.parentNode.insertBefore(buttonElem, scriptElem);
      }
    }());
    </script>

引き続き、フォーム項目(1行テキスト)のテンプレートを編集します。

39行目付近( request.<mt:var name="field_basename">が飛んできている場合、そちらを表示する)

    <mt:setvarblock name="request_basename">request.<mt:var name="field_basename"></mt:setvarblock>
    <input type="text" class="contact-form-text-full" name="<mt:var name="field_basename">" id="<mt:var name="field_basename">" value="<mt:if name="$request_basename"><mt:var name="$request_basename" escape="html"><mt:else><mt:var name="field_default" escape="html"></mt:if>" />

ところで、このようにカスタマイズを行えば目的は達せられるのですが、以下のようなケースで改善の余地があります。

• ダイナミックパブリッシング(DynamicMTML)に対応できない
• フォームやブログ/ウェブサイトによって違うモジュールを利用したい場合、mt:If タグによって分岐をさせなければならない(フォームの種類が多い場合、冗長なテンプレートになってしまう)

次回はContactForm のベーステンプレートをモジュール管理する ContactFormMTMLプラグインについてご紹介します(紹介記事を作成しました)。

追記：他の種類のフォーム項目を対応させる方法につきましては以下ブログ記事にてご案内しております
▪️ContactFormで入力した値を修正画面に引き継ぐ方法