• TOP
  • 記事一覧
  • WordPressテーマ制作者が押さえるべきContact Form 7の実装ポイント 納品時のポイント

WordPressテーマ制作者が押さえるべきContact Form 7の実装ポイント 納品時のポイント

更新日：2025/02/24

WordPressテーマを制作・納品する際、お問い合わせフォームの実装は重要なポイントとなります。今回は、環境に依存せずContact Form 7を確実に動作させるための実装方法をご紹介します。

なぜContact Form 7なのか？

WordPressのお問い合わせフォームプラグインとして、圧倒的なシェアを持つContact Form 7。無料で利用でき、カスタマイズ性も高いため、多くのテーマ制作者が採用しています。

WordPress自作テーマ納品時のContact Form 7実装術 – 環境非依存のアプローチ

問題点

Contact Form 7でフォームを作成すると、自動的にIDが割り振られます。例えば：

エラー: コンタクトフォームが見つかりません。

このIDは環境ごとに異なるため、開発環境で作ったフォームIDが本番環境で使えないことになります

テンプレートファイルにコンタクトフォームを埋め込むことはできますか?
自作したFormを【Contact Form 7】で使う方法

Contact Form 7 のテンプレート書くの面倒問題
ファイルに記述した内容を Contact Form 7 のテンプレートとして利用できるように実装してみました。
https://qiita.com/k_h_b/items/67fcb47cbce45ccc017e

以下のコードを、フォームを表示したい WordPress のテンプレートファイル（page.php など）に埋め込みます。

上記のContact Form 7 のテンプレート書くの面倒問題を実装

<?php
// フォームのデータを取得
add_action('wpcf7_contact_form', function ($form) {
  $path = '{ テンプレートを記述したファイルへのパス }'; // フォームテンプレートのファイル
  ob_start();

  // 指定したテンプレートファイルを読み込む
  include $path;
  $template = ob_get_clean();

  $p = $form->get_properties();
  if ($p['form'] === $template) return $form; // 変更がなければそのまま

  $p['form'] = $template;
  $form->set_properties($p);
  $form->replace_all_form_tags();
  $form->save();
  return $form;
});

// 指定したフォームを取得して表示
$useform = array_shift(get_posts([
  'post_type' => 'wpcf7_contact_form',
  'posts_per_page' => 1,
  'name' => strtolower(urlencode('{ 利用するフォームのスラッグ }'))
]));

echo do_shortcode('
エラー: コンタクトフォームが見つかりません。
');
?>

解決アプローチ1
タイトルでフォームをショートコードで設定できるようにする

  • 独自ショートコード [cf7_insert form_title=’contact’] を作成
  • WordPressの標準機能（get_posts）を使用
  • 固定ページなどで簡単に呼び出せる
// オリジナルのショートコード登録
add_shortcode('cf7_insert', 'get_cf7_insert');

function get_cf7_insert($atts){
    extract(shortcode_atts(array(
        'form_title' => '',
    ), $atts));
    
    // Contact Form 7のpost_typeから該当タイトルのフォームを検索
    $args = array(
        'post_type' => 'wpcf7_contact_form',
        's' => $form_title,
    );
    $myposts = get_posts($args);
    
    if($myposts) {
        foreach($myposts as $post) {
            setup_postdata($post);
            $wpcf7_shortcode_command = '
エラー: コンタクトフォームが見つかりません。
';
        }
        return do_shortcode($wpcf7_shortcode_command);
    }
    return '';
}
[cf7_insert form_title='contact']
Contact Form 7のフォームを環境に依存させず表示

解決アプローチ2
Contact Form 7のAPIを使用して、タイトルからIDを動的に検索

  1. フォームテンプレートの提供
// functions.php
function register_default_contact_form() {
    if (function_exists('wpcf7_load_text_domain')) {
        $form_template = file_get_contents(get_template_directory() . '/inc/contact-form-template.txt');
        // フォームテンプレートを登録
    }
}
add_action('after_switch_theme', 'register_default_contact_form');
  1. フォーム名による参照
function get_contact_form_by_title($title) {
    $forms = WPCF7_ContactForm::find(array('title' => $title));
    if (!empty($forms)) {
        return '
エラー: コンタクトフォームが見つかりません。
->id() . '" title="' . $title . '"]';
    }
    return '';
}
function get_contact_form_by_title($title) { ▶ フォームのタイトルを引数に受け取り、対応するショートコードを生成する関数 $forms = WPCF7_ContactForm::find(array(‘title’ => $title)); ▶ Contact Form 7のAPIを使用してフォームを検索 ▶ タイトルが一致するフォームの配列を取得 !empty($forms) return ‘

エラー: コンタクトフォームが見つかりません。

->id() . ‘” title=”‘ . $title . ‘”]’; ▶ 最初に見つかったフォームのIDを取得 ▶ フォームIDとタイトルを組み合わせてショートコードを生成 ▶ 環境に依存しないショートコードを動的に生成 return ”; フォームが見つからない場合 ポイント： 1. タイトルベースの検索で環境非依存を実現 2. 動的なショートコード生成で柔軟な対応が可能
  1. テンプレートファイルでの呼び出し
// page-contact.php
<?php echo do_shortcode(get_contact_form_by_title('お問い合わせフォーム')); ?>
themes/your-theme/
  ├── inc/
  │   └── contact-form-template.txt
  └── functions.php

開発環境 フォームID: 123 title: お問い合わせ テーマファイル contact-form-template.txt functions.php 本番環境 フォームID: 456 title: お問い合わせ 1. テーマにフォームテンプレートを同梱 2. タイトルベースでフォームを参照 3. 環境に応じたIDを自動取得 フォームIDに依存しない実装により、環境間の移行をスムーズに

テーマユーザーへの配慮

  1. カスタマイザーでの設定項目追加
  • フォームIDを簡単に変更できる
  • スタイルのカスタマイズオプション
  • 表示位置の調整機能
  1. ドキュメント整備のポイント
  • プラグインのインストール手順
  • フォームID確認方法の説明
  • カスタマイズ方法の解説

■ スタイリングのベストプラクティス

環境非依存のCSS設計

.wpcf7-form {
    /* フォームの基本スタイル */
}
.wpcf7-response-output {
    /* メッセージ表示のスタイル */
}
新規記事

すべてを見る
人気記事ランキング
SEOサンプル記事
話題のキーワードから探す