PowerCMS™
2025年1月1日購入分よりライセンスの価格を改定いたします。
[ブログ] PowerCMS 6 でのアップデートまとめ を追加しました。
[事例紹介] 株式会社BOTAO様 / 公益社団法人 地域医療振興協会 を追加しました。
[よくあるご質問] PowerCMS / PowerCMSクラウドの契約開始日はいつですか? を追加しました。

PowerCMS ブログ

ホーム > PowerCMS ブログ > テンプレート作成Tips > ContactFormで フォームの確認画面に「修正する」リンクを追加する

2017年01月05日

ContactFormで フォームの確認画面に「修正する」リンクを追加する

「修正する」リンクを追加した確認画面

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 タグを記述してテンプレートモジュールを指定し、編集の際はテンプレート管理画面からそのモジュールのソースを編集する

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

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

※ 解凍して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で入力した値を修正画面に引き継ぐ方法


カテゴリー
PowerCMS 3
PowerCMS 4
テンプレート作成Tips
技術情報
設定・管理画面カスタマイズ

Recent Entries