Contact Form 7でステップフォームを実現する方法｜Web制作現場で使える導入手順と注意点
- スキルアップ
- 2025/7/24
- 2025/7/24
複雑な入力項目を含むお問い合わせフォームでは、途中離脱が発生しやすく、コンバージョン率の低下を招くこともあります。そこで注目されているのが「ステップフォーム」の導入です。
この記事では、Web制作現場でも多く採用されている「Contact Form 7」と「Contact Form 7 Multi-Step Forms」を使ってステップ形式のフォームを構築する方法と、より効率的に実装できる代替手段として「GT form WP」もご紹介します。
UXとCVの向上を両立させたい方は必見です。
Contact Form 7にステップフォームを導入するメリット
なぜステップ形式のフォームが選ばれるのか？
Web制作において、フォームは「ユーザーと企業をつなぐ最後の関門」といっても過言ではありません。しかし、設問数が多いフォームや長文入力が必要な場合、ユーザーは途中で離脱してしまうことも珍しくありません。
そこで注目されているのが、フォームを段階的に表示できる「ステップフォーム」です。
ステップフォームでは、一度にすべての入力項目を見せるのではなく、少しずつ画面を切り替えながら進めていくため、ユーザーにとっての心理的ハードルが下がります。
「いきなり長い入力欄が並んでいてゲンナリ…」という印象を与えることなく、自然な流れで送信完了まで導ける点が大きなメリットです。
Web制作現場でのニーズと活用シーン
実際にWeb制作の現場では、以下のようなシチュエーションでステップフォームの導入が求められています。
- 採用エントリーのフォーム：氏名・学歴・職歴・希望条件などを1ページで見せると離脱率が高いため、ステップ分割で対応。
- 商品カスタマイズ・見積もり依頼：ユーザーの選択肢が多い場合でも、1ステップずつ案内することでUXが向上。
- アンケートや診断コンテンツ：段階的に質問を表示することでユーザーが答えやすくなり、回答率がアップ。
これらのケースでは、単なるデザインの工夫ではカバーできない「設問量の多さ」に対する課題を、ステップ表示で解決できます。
また、ステップフォームはスマートフォンでの表示にも適しており、縦スクロールが長くなりすぎる問題も防げます。
必要なプラグインと準備
Contact Form 7でステップ形式のフォームを実現するには、本体のプラグインに加えて、拡張機能を導入する必要があります。WordPressに慣れている方なら比較的スムーズに導入できますが、実装前にいくつか押さえておきたいポイントがあります。
まず基本となるのが、以下の2つのプラグインです。
Contact Form 7（本体）
言わずと知れた問い合わせフォームプラグイン。多くのWeb制作案件で採用されており、柔軟なカスタマイズ性が魅力です。
※Contact Form 7ダウンロード
Contact Form 7 Multi-Step Forms（拡張）
フォームを複数ページに分割するためのアドオンになります。
フォームの流れをショートコードで画面遷移ができるのが特長ですので、こちらを利用すればステップフォームだけではなく送信前の入力確認画面も設定することができます。
インストールはどちらも管理画面から可能で、基本的には無料で使えます。
「Contact Form 7 Multi-Step Forms」は特に設定画面はなく、プラグインを有効にするだけで利用可能です。
ステップフォームを実装するには、フォームを複数に分けて設定し、それぞれのフォーム画面のショートコードを固定ページに割り当てる必要があるため、事前に全体設計をしておくことをおすすめします。
また、ステップをまたいで入力内容を保持するためにCookie機能を利用している点にも注意が必要です。
「Contact Form 7 Multi-Step Forms」は、特定の条件下において個人情報が流出するおそれが報告されています。
セキュリティや設計上の制約を理解したうえで準備することで、後のトラブルを防ぐことができます。
※Contact Form 7 Multi-Step Formsダウンロード
フォームの分割とナビゲーション設定
Contact Form 7でステップ形式のフォームを作るには、フォームそのものを複数に分割し、それぞれを順番に表示させる仕組みを構築する必要があります。
その鍵となるのが、専用のショートコードを使ったナビゲーション設定です。
Multi-Step Formsプラグインを導入すると、以下のようなタグが使用可能になります。
[multistep]：次のページへの遷移ボタンを表示。
[multiform]：入力項目の確認画面に設置。Multi-Step Formsで利用するTagで、例えば [multiform “your-name”] とすると"your-name" に入力した値が表示されます。
[previous]：前の画面に戻るボタンを表示。
それぞれのステップ画面は、別々のフォームIDとして設定する必要があり、さらに画面URLを作成するために固定ページを作成し、それぞれのフォーム画面のショートコードを配置します。
たとえば以下のような構成になります。
ステップ1：ステップフォーム画面1 → 固定ページ「STEP1」に設置
ステップ2：ステップフォーム画面2 → 固定ページ「STEP2」に設置
ステップ3（確認画面）：確認フォーム → 固定ページ「確認画面」に設置
ステップ4（送信完了）：固定ページ「送信完了画面」
各フォームの最後に記述するショートコードによって、次の固定ページに遷移する設計になっており、ユーザーは段階的にフォームを進めていくことができます。
また、フォームIDをまたいでも入力内容を保持する仕組みとして、ブラウザのCookieが利用されており、これにより複数ページでも入力情報を引き継げるようになっています。
Contact Form 7 Multi-Step Formsの設置方法
ステップフォーム画面1
ステップフォーム画面2
送信内容の確認画面のフォーム設定
メール送信前には入力内容の確認画面があった方が良いので、送信内容の確認画面を作成します。
フォーム画面は下記のようになります。
最後の [multistep multistep-943 send_email "conplete"] の設定方法は下記のように設定します。
またこのフォームの例では送信完了後の画面も用意して、送信後に完了画面 "conplete" へ遷移させています。
Cookie削除など実装時の注意点
ステップフォームを実装する際は、見た目やナビゲーションだけでなく、フォーム送信後の動作やCookieの扱いについても注意が必要です。
特にContact Form 7 Multi-Step Formsでは、Cookieを使ってフォーム間の入力データを保持しているため、意図しない不具合が起きることもあります。
ステップフォームを最後まで入力・送信した後も、Cookieがブラウザに残ったままだと、再訪時に以前の入力内容が残って表示されたり、送信できない状態になることがあります。これを防ぐにはフォーム送信後のCookie削除を忘れずに設定してください。
Contact Form 7 Multi‑Step Forms（無料版）の注意事項
Contact Form 7 Multi‑Step Forms（無料版）は、Cookieによってステップ間のデータを保持していますが、Cookieには保存容量に制限があります。そのため、約4 KBを超えるデータ量になると、以下のような問題が発生する可能性があります。
- 確認画面で入力内容が空欄になる
- 管理者向けメールに一部しか反映されない／まったく表示されない
- 自動返信メールが届かない
これは、無料版ではCookie保存に依存しているためで、無料版は最大約4 KBのデータまで、対して有料のPro版（セッションストレージ利用）は最大5 MBまで処理可能とのことです。
GT form WPならもっと簡単！制作会社にも選ばれる理由
Contact Form 7とその拡張プラグインを使えばステップフォームの構築は可能ですが、「もっと手軽に」「ステップのためのフォームや固定ページを増やさずに」「確認画面やスパム対策も一括で」導入したい、という声も多く聞かれます。
そういったニーズに応えるのが、弊社が提供するWordPressお問い合わせフォームプラグイン「GT form WP」です。
| 項目 | Contact Form 7 + 拡張 | GT form WP |
|---|---|---|
| ステップ構成 | フォームと固定ページをステップ毎に複数設定が必要 | 1つのフォームで管理画面からステップ設定が可能 |
| Cookie管理 | 手動設定が必要 | 自動で処理される |
| スパム対策 | 拡張プラグインで対応 | 標準でreCAPTCHA v3対応・リクエスト制限対応 |
| フォーム確認画面 | 別プラグインと連携が必要 | 標準搭載 |
| 商用案件の導入 | 無償利用は制限あり | ライセンス購入で柔軟に対応可能 |
GT form WPの概要と特徴
GT form WPは、WordPress専用に開発された多機能お問い合わせフォームプラグインです。大きな特徴は以下の通りです。
- ステップフォームを画面遷移つきでノーコード設計
- Google reCAPTCHA v3対応済みでスパム防止も万全
- フォーム送信後の確認画面や完了ページの設定も簡単
- WordPress本体がなくてもPHP環境で動作可能（外部設置も可）
複数ページに分けたフォームがビジュアル的に自然に遷移するため、ユーザー体験の向上にもつながります。
また、ステップ間でのデータ保持やCookie処理も内部で完結しており、コード記述やショートコードに煩わされることもありません。
Contact Form 7との違いと優位点
| 選択肢 | 特徴 | 適したケース |
|---|---|---|
| Contact Form 7 無料＋Multi‑Step Forms | 無料で利用可能だが、長文・大量データには制約あり | 入力項目数が少ないシンプルなフォーム |
| Multi‑Step Pro（セッションストレージ利用） | 約5 MBまでのデータ保持に対応 | 長文や多数のフォーム項目があるケース |
| GT form WP（当社製品） | Cookie/セッション構成なし、容量制限なく設計 | 制作会社・商用案件におすすめ |
Web制作会社として複数案件を扱う中で、ステップ画面毎のフォーム設定・ステップ画面用固定ページを準備する手間や、プラグイン間の互換性問題はできるだけ避けたいところ。
GT form WPなら、フォーム作成から運用までが一つの環境で完結します。
商用案件での導入メリット
GT form WPは、制作会社やフリーランスがクライアント向けに使用するケースを想定して設計されています。
そのため、1案件（1ドメイン毎）にライセンス購入することにより利用ができ商用導入が可能です。
納品後の保守フェーズでも、1つの画面でステップ画面すべてのフォーム内容を変更できる点は、クライアント満足度の向上にも直結します。
「見た目と機能、そして運用性のバランスを重視したい」——そんな制作現場にこそ、GT form WPは最適な選択肢です。
まとめ｜最適なフォーム選びでCV率とユーザー体験を向上
ステップフォームは、単なる見た目の工夫ではなく、ユーザー体験（UX）とコンバージョン率（CV）の両方を改善する重要な施策です。特に設問が多いフォームでは、段階的に入力させるだけで離脱率が下がり、完了率が上がるケースも少なくありません。
Contact Form 7にMulti-Step Formsを組み合わせる方法は、無料で実装できる手軽さが魅力です。一方で、Cookie管理や確認画面との相性、手作業による設定の複雑さがネックになることもあるでしょう。
そうした中、より効率的でメンテナンス性の高い選択肢として「GT form WP」のような高機能な有料プラグインを選ぶ企業も増えています。
1つのフォーム画面でステップ画面を直感的に操作・設計できる点や、商用案件でも安心して導入できる柔軟さは、Web制作会社にとって大きな武器となるはずです。
最終的には、案件の要件や運用体制に応じて、最適なフォーム構成を選ぶことが成果につながる第一歩です。
「入力しやすさ」と「作りやすさ」、その両方を意識した設計が誰でも簡単にできるWordPressお問い合わせフォームプラグイン「GT form WP」の導入を是非ご検討ください。
