【WordPress】Cloudflare Turnstileの表示位置を調整する方法。好きな問い合わせ場所に設置！

2025年2月9日2026年1月12日WordPress

この記事では、WordPressブログの「Contact Form 7」プラグインに導入した「Cloudflare Turnstile」の表示位置を調整する方法を書きます。

【WordPress】Cloudflare Turnstileの表示位置を調整する方法。好きな問い合わせ場所に設置！

ナポリタン寿司は2025年2月から「reCAPTCHA」ではなく「Cloudflare Turnstile」を利用することにしました。めんどくさい画像認証や信号機タイルをクリックしてね認証からおさらばです。

僕が使っている問い合わせフォームは「Contact Form 7」プラグインで、以前は「Simple Cloudflare Turnstile」を使って表示させていましたが、現在は「Contact Form 7」に直接インテグレーション（連携）して使っています。

「Contact Form 7」のインテグレーション機能で登録した場合、デフォルトの表示位置は問い合わせフォームの上でした。

「Simple Cloudflare Turnstile」を使って「Contact Form 7」のフォームに「Cloudflare Turnstile」を表示した画像

僕は上部ではなく、下にある送信ボタンの上に配置したいと思ったので設定変更してみます。

同じように表示位置を調整したい方、参考にしてみてください。

1. 「Simple Cloudflare Turnstile」の表示位置を変える方法
2. 【2026年1月追記】Contact Form 7に直接登録した場合
- 2.1. 余談
- 2.2. 登録方法
3. 中央揃えにしたい場合
4. 感想

「Simple Cloudflare Turnstile」の表示位置を変える方法

「Simple Cloudflare Turnstile」プラグインを使っている場合の方法です。

もしプラグインを使っておらず、「Contact Form 7」に直接登録している場合はこちらに飛んでください。基本的に方法は一緒ですが、書き込むショートコードが微妙に変わります。

「Contact Form 7」用ショートコードをコピーする

WordPressの管理画面→左側サイドバーの「設定」→「Cloudflare Turnstile」をクリックします。

WordPressにインストールした「Simple Cloudflare Turnstile」プラグインの設定を開く手順画像

「Contact Form 7」をクリックして専用のショートコードをコピーします。「[ cf7-simple-turnstile]」です。

「Simple Cloudflare Turnstile」の「Contact Form 7」用ショートコードをコピーする手順画像

<!--「Simple Cloudflare Turnstile」の「Contact Form 7」用ショートコード-->
[ cf7-simple-turnstile]

<!--「Simple Cloudflare Turnstile」の「Contact Form 7」用ショートコード-->
[ cf7-simple-turnstile]

本記事のショートコードは「[」と「c」の間にあえて半角スペースを入れています。そうじゃないと本記事でも「Cloudflare Turnstile」が発動してしまったので(笑)皆さんは設定画面からコピーしましょう。

「すべてのCF7のフォームで有効化」はよく分からない場合チェックしておくのがいいかなと思います。

問い合わせページを複数作成していてこっちでは有効にしてこっちでは無効にしたい…みたいな個々で調整したい時はチェックを外します。

大体のブロガーさんは問い合わせフォームが1ページだけだと思うので、その場合そのページでショートコードを挿入すればチェックしなくてもOKです。

チェックしていてもショートコードが優先されるので同じ問い合わせページで2つの「Cloudflare Turnstile」が被って表示される…みたいな表示崩れは発生しません。

コンタクトフォームの編集ページを開く

左側サイドバーの「お問い合わせ」→コンタクトフォーム→作成した問い合わせページを編集します。

ショートコードを任意の場所に挿入

「Contact Form 7」の編集ページを開けたら、自分が表示させたい場所にカーソルをおいてコピーしたショートコード「[ cf7-simple-turnstile]」を貼り付けます。

「Contact Form 7」に「Simple Cloudflare Turnstile」のショートコードを挿入する手順画像

例えば僕の場合デフォルトだと送信ボタンの上に表示されていました。

上記画像では送信ボタン（[submit "送信"]）の下に書き込んでいます。実際送信ボタンの下に表示されたらちゃんとショートコードが機能しているってことです。

書き込めたら下部にある「保存」ボタンを押します。変更が適用されたらOKです。

位置が変わったか確認

実際に問い合わせページを開きます。僕の場合「https://www.naporitansushi.com/question/」です。

「Cloudflare Turnstile」のチェック画面が送信ボタンの下に表示されています。

「Contact Form 7」に表示する「Simple Cloudflare Turnstile」の位置を調整した画像

僕の好みは送信ボタンの上だったので結局ショートコードは使わずデフォルトのままにしています。

デフォルトってのは「すべてのCF7のフォームで有効化」にチェックを入れた状態のことです。チェックを入れなかったら表示されないので、チェックを入れるかショートコード挿入方式を採用しましょう。

【2026年1月追記】Contact Form 7に直接登録した場合

余談

「Contact Form 7」のバージョン6.1（2025年6月26日）以降、「Simple Cloudflare Turnstile」などのプラグインを使わなくても「Contact Form 7」上で「Cloudflare Turnstile」を使えるようになりました。

「Contact Form 7」に直接サイトキーシークレットキーをインテグレーション（登録・連携）できます。公式ページに記載されています。

デフォルトでは Turnstile ウィジェットはフォームの先頭に配置されます。これを移動させたい場合はフォームテンプレート内に [turnstile] フォームタグを挿入します。

加えて、[turnstile] フォームタグに以下のオプションを指定できます:

action — data-action 属性値を指定。
appearance — data-appearance 属性値を指定。
language — data-language 属性値を指定。
size — data-size 属性値を指定。
tabindex — data-tabindex 属性値を指定。
theme — data-theme 属性値を指定。
Cloudflare Turnstile インテグレーション | Contact Form 7 [日本語]