Add Template for Contact Form 7

2022.06.15

こんにちは。

WordPressのテーマ構築時にContact Form 7 を使っている方は多いと思います。
とても素晴らしいプラグインですが、テーマ構築時にフォームタグの設置をわざわざ管理画面から入力してテストするのは煩わしいと感じているのではないでしょうか。

そこで「Add Template for Contact Form 7」プラグインをリリースしました！

Add Template for Contact Form 7

テーマフォルダ内にフォームタグを記述したPHPファイルを用意することによって、Contact Form 7で設置したフォームに反映されます。

またPHPファイルでテンプレートを用意できるので、PHPやWordpress関数・オブジェクト、ACF関数(一部を除く)などを使うことができます！

使い方

インストール

Add Template for Contact Form 7をWordPressにインストールすること自体は簡単です。他のプラグインと同様に、以下の手順で進めてください。

ダッシュボードで「プラグイン」→「新規追加」を選択する
「プラグインの検索」に「Add Template for Contact Form 7 by matorel」と入力し実行する
検索結果が出たら「今すぐインストール」ボタンをクリックする
インストールが完了したら「有効化」ボタンをクリックする

設定

テーマフォルダ内に”atcf7″ディレクトリを作成し、そのフォルダの中にテンプレートファイル(***.php)を配置します。
ファイル内にコメントでTemplate Nameを任意に記述すると、管理画面のファイル選択時の名前に反映されます。

記述例 (テーマフォルダ/atcf7/sample.php)

<?php
  if (!defined('ABSPATH')) {
    exit;
  }
  /*
  * Template Name: hogehogeフォーム
  */
  ?>

  <h2>
  <?php
  // WP関数・オブジェクトの使用例
  the_title();
  ?>
  </h2>

  <table>
    <tbody>
      <tr>
          <th><label for="your-category" onclick="">Category</label></th>
          <td>
            <?php
              // ACFのget_field使用例。チェックボックスの選択肢などに使えます。
              $cats = "'".get_field("cat1")."'";
              $cats .= " '".get_field("cat2")."'";
              $cats .= " '".get_field("cat3")."'";
            ?>
            [checkbox your-category id:your-category class:atcf7-form-radio-label exclusive use_label_element <?php echo $cats; ?>]
          </td>
      </tr>
      <tr>
        <th><label for="your-name" onclick="">Name</label></th>
        <td>
          [text* your-name id:your-name]
        </td>
      </tr>
      <tr>
        <th><label for="your-email" onclick="">Mail Address</label></th>
        <td>
          <div>
            [email* your-email id:your-email ]
          </div>
        </td>
      </tr>
      <tr>
        <th><label for="your-content" onclick="">Contents</label></th>
        <td>
          [textarea* your-content x5 id:your-content ]
        </td>
      </tr>
    </tbody>
  </table>
  <div>[submit "Submit"]</div>