WordPress の Contact Form 7 のフォームをテーマに直接埋め込む方法

Contact Form 7 のフォームは投稿内に埋め込むことが簡単にできますが、テーマに直接埋め込むのはちょっとやり方が分かりませんね。私で思いつく方法ですと以下の3つがあります。

  • フォーム用の投稿を作成し直接呼び出す
  • ウィジェットを使って表示する
  • WordPress のタグを使って表示する

それぞれ紹介しますので参考にしてください。

フォーム用の投稿を作成して直接呼び出す

フォーム用のページ、スラッグは form を設定して作成して、記事内容に Contact Form 7 のショートコードをいつも通り以下のように貼る。

1
[contact-form-7 id="4" title="お問い合わせ"]

次に functions.php に以下のコードを貼りつけてください。こちらは私の作成したオリジナルのコードです。ページや投稿をスラッグ名もしくは投稿IDで読み込み出力することができます

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function wbsGetPost($type, $id, $filter = true)
{
    $loops = new wp_query();
    if(is_int($id)){
        $loops->query("post_type={$type}&p={$id}");
    } else {
        $loops->query("post_type={$type}&name={$id}");
    }
    while($loops->have_posts()): $loops->the_post();
    $the_content = get_the_content();
    endwhile;
    if($filter === true) {
        return apply_filters('the_content', $the_content);
    } else {
        return $the_content;
    }
}

テーマファイルのフォームを表示したいところで以下のタグを貼ります。

1
<?php echo wbsGetPost('page', 'form'); ?>

これでフォームが出力されるはずです。しかし、クライアントにこの状態で納品するとページ一覧に、お問い合わせフォームという無駄なページが作成されてしまうし少しスマートじゃないかもしれないです。

ウィジェットを使って埋め込む

functions.php に以下の記述をします。これはプラグインでも可能です。

1
add_filter('widget_text', 'do_shortcode');

こうすることでウィジェット内で普通に Contact Form 7 を使うことができます。サイドバーにフォームを設置したりしたい時に有効です。

WordPress のタグを使って表示する

以下のタグのようにショートタグをテーマファイルに直接埋め込む方法でも実装可能です。これだと、フォームを設置するためだけにウィジェットを有効化したり、ショートタグを有効化することなく、テーマファイルの好きな場所にフォームを設置できます。

1
<?php echo apply_filters('the_content', '[contact-form-7 id="4" title="お問い合わせ"]'); ?>

追記: さらにをかもとさんに教えてもらった方法が以下です。こっちの方がスマートです。上のフィルターは実際は中でこれが実行されているんだろう。をかもとさんありがとうございます。

1
<?php echo do_shortcode('[contact-form-7 id="4" title="お問い合わせ"]'); ?>

おわりに

いろいろな実装方法がありますが、時と場合によって変えると良いと思います。フォーム用のページを作るのは結果的には WordPress のタグを使って表示することを遠まわしでやっているだけなので、ウィジェットを使うか、WordPress のタグを使うのが良いかもしれません。それでは。

コメント

  1. wokamotoさんのコメント

    ども、wokamoto です。

    テーマに do_shortcode() 関数を直接書いたほうが早いかもよ。
    ショートコード API – WordPress Codex 日本語版

    <?php do_shortcode('[contact-form-7 id="4" title="お問い合わせ"]'); ?>

  2. wokamotoさんのコメント

    ごめん、間違えた do_shortcode() は、文字列を返すだけだから echo してやらんといかん。

    <?php echo do_shortcode('[contact-form-7 id="4" title="お問い合わせ"]'); ?>

    • webleさんのコメント

      ご丁寧にありがとうございました。記事内に追記をさせて頂きましたのでご確認くださいませ。

  3. 通りすがりさんのコメント

    突然おじゃましてすみません。たまたま目に留まったもので。

    公式サイトの FAQ にも同様の記述がありますよ。
    テンプレートファイルにコンタクトフォームを埋め込むことはできますか?

    それと、テキストウィジェットへのコンタクトフォームの埋め込みはデフォルトでサポートされていますので、何もせず単純に Contact Form 7 のショートコードを追加したらよいです。

  4. こっきーさんのコメント

    お世話になります。大変参考になります。
    現在会員制サイトを運営しております。
    ログインユーザーのメールアドレスは予め登録されているメールアドレスを表示して、
    さらにそのメールアドレスに送信内容を送る仕組みはできないのでしょうか?

    通常は以下のコードでユーザーのメールアドレスを表示することはできますよね。
    user_email;]>” />
    Contact Form 7は使い勝手がいいので是非とも活用したいと思っております。
    よろしければよきアドバイスをお願い申し上げます。