フォームメーラー×Turnstileで作る高速・安全な問い合わせフォーム

2026.05.03

ブログでGoogle AdSenseやAmazonアソシエイト、他のアフィリエイトを利用するために必須と言われている「問い合わせフォーム」ですがWordPressではプラグインを利用すれば簡単に設置ができます。

WordPressで問い合わせフォームを設置するにはプラグインが便利ですが、プラグインには動作速度の低下やスパムの増加といった問題が伴う場合があります。私が利用しているさくらのレンタルサーバーでもWordPressの利用者向けにプラグインを使わず、Googleフォームの利用を促すメールを配信していました。

本記事では、フォームメーラーとCloudflare Turnstileを活用し、自由なデザインを可能にし、スパム対策が施された問い合わせフォームを自作する手順を解説します。

フォームメーラーでフォームを取得
CloudflareでTurnstileのサイトキーを取得
実際のコードを使った解説
最後に

フォームメーラーでフォームを取得

フォームデザインを自由に設定するには、HTML形式でフォームを取得する必要があります。「フォームメーラー」を利用すると、無料でHTML形式のフォームを作成できます

https://www.form-mailer.jp/でFreeプランで登録をする。
「新規フォーム作成」から「一般フォームを作成」を選択する。
フォーム名を入力し、「個人情報の入力項目」にチェックを入れる。
必要な項目を設置し、「フォームを作成」。
フォーム編集後、「公開設定」で公開し、「コード出力」からHTML形式でフォームを取得する。

注意点：フォームメーラーのHTMLコードの仕様として、一部制限事項があるため、取得画面で詳細を確認してください。その説明の後にHTMLコードがあるのでコピーします。

CloudflareでTurnstileのサイトキーを取得

スパム防止対策として、Cloudflare Turnstileを利用します。TurnstileはGoogle reCAPTCHAに比べて軽量で、個人情報を収集せず、パフォーマンスへの影響が少ないのが特長です。CDNを利用していないサイトでも無料で利用できます。

サイトキー取得手順

Cloudflareでアカウントを作成。
ダッシュボードから「Turnstile」を選択。
「ウィジェットを追加」をクリックし、ウィジェット名とドメインを入力。
「作成」ボタンを押して、サイトキーを取得。

Google reCAPTCHAは全体的な保護を重視しますが、問い合わせフォームだけにボット対策を施すにはTurnstileが適しています。

実際のコードを使った解説

問い合わせフォームを固定ページで表示するには、「page-contact.php」というファイルを作成し、テーマディレクトリに配置します。以下のコード例を活用してください。

page-contact.phpのコード

page-contact.phpの内容については、アドレスやnameに含まれている「置き換える」の部分は、は各自固有のものと思われるので、フォームメーラーで取得したHTMLコードと同一になるよう変更してください。

<!-- Cloudflare Turnstile (Bot Protection) のスクリプト -->
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" defer></script>

<main>
    <!-- お問い合わせフォーム -->
    <form class="t1" action="https://ssl.form-mailer.jp/fm/service/Forms/confirm" method="post" name="form1" enctype="multipart/form-data" accept-charset="UTF-8">
        <!-- フォームの一意のキー -->
        <input type="hidden" name="key" value="「置き換える」">

        <!-- フォームのタイトル -->
        <h1>お問い合わせフォーム</h1>

        <!-- お名前フィールド -->
        <p>お名前<span>必須</span></p>
        <p>
            <input name="field_「置き換える」_sei" type="text" placeholder="姓">
            <input name="field_「置き換える」_mei" type="text" placeholder="名">
        </p>

        <!-- メールアドレスフィールド -->
        <p>メールアドレス<span>必須</span></p>
        <p>
            <input name="field_「置き換える」" type="text" size="30" placeholder="info@example.com">
        </p>

        <!-- お問い合わせ内容フィールド -->
        <p>お問い合わせ内容<span>必須</span></p>
        <p>
            <textarea name="field_「置き換える」" rows="8" placeholder="" class="t5"></textarea>
        </p>

        <!-- Cloudflare Turnstile ボット検出機能 -->
        <div class="cf-turnstile" 
             data-sitekey="「Turnstileのサイトキー」" 
             data-callback="javascriptCallback" 
             data-language="ja">
        </div>

        <!-- 送信ボタン -->
        <p>
            <input class="t4" name="submit" type="submit" id="submit" value="確認画面へ" disabled>
        </p>

        <!-- フォーム提供元のリンク -->
        <p>
            <a href="https://www.form-mailer.jp/?utm_source=https://ssl.form-mailer.jp/fms/「置き換える」&utm_medium=ownedmedia&utm_campaign=powered-by-formmailer" target="_blank" id="powered" rel="noopener">Powered by FormMailer.</a>
        </p>

        <!-- エンコーディング方式の指定 -->
        <input type="hidden" name="code" value="utf8">
    </form>

    <!-- JavaScriptコールバック関数 -->
    <script>
        window.javascriptCallback = function() {
            // Cloudflare Turnstile成功時に送信ボタンを有効化
            document.getElementById('submit').disabled = false;
            console.log('Challenge Success.');
        }
    </script>
</main>

問い合わせフォームの仕様

JavaScript読み込み制御：Cloudflare Turnstileのスクリプトは「お問い合わせフォーム」ページだけで動作するようにします。
送信ボタンの無効化：Turnstileのチェックを通過しないと送信ボタンが有効化されない仕様です。これによりスパム送信を防ぎます。

おまけのCSS

以下はフォームのデザインを整えるCSSの例です。お好みに合わせてカスタマイズしてください。

.t1 p {
    font-weight: bold;
    margin: 0 !important
}

.t1 span {
    vertical-align: 15%;
    line-height: 1;
    display: inline-block;
    color: #fff;
    background: #e53935;
    font-size: .82rem;
    margin-left: 5px;
    padding: 4px 6px;
    border-radius: 3px
}
.t1 input {
    font-size: 1.07rem
}
input {
    height: 40px
}

.t1 input,
.t1 textarea,
.t2,
.t3 {
    border-radius: 5px;
    border: solid 1px #ccc;
    margin-bottom: 1.5em
}

.t2 {
    height: 100px;
    overflow-y: scroll;
    padding: 15px;
    margin-bottom: .5em
}

.t2 p {
    font-weight: normal;
    font-size: 1rem;
    margin: 1em 0
}

.t3 {
    font-size: 1rem;
    padding: 10px
}

.t3 input {
    margin: 0;
    height: auto;
    margin-right: 5px
}

.t4 {
    cursor: pointer;
    background: #18510d;
    font-size: 1.19rem;
    width: 100%;
    color: #fff;
    text-align: center;
    border: none
}

.t5 {
    width: 100%
}

下のような問い合わせフォームができました。

最後に

今回の方法で、プラグインを使わずに問い合わせフォームを自作し、サイトのパフォーマンスを向上させつつスパム対策を施せます。フォームメーラーでHTMLフォームを作成し、Cloudflare Turnstileでボットを排除することで、効率的かつ安全な問い合わせフォームを構築できます。

今すぐ使えるかんたん　WordPress　やさしい入門［6.x対応版］

桑名由美著

Amazonプライム感謝祭

最後までお読みいただき、誠にありがとうございます。