複数ページ・ステップでの入力フォームを実現する Contact Form 7 Multi-Step Forms

  • 投稿日
  • 更新日
  • 著者 WP Recipe
  • カテゴリー プラグイン

入力フォームで入力する項目が多いと、途中で入力をやめてしまうユーザーも出てきます。
せめて、フォームを複数ページに分割して、表示すると改善されるかもしれません。

WordPressワードプレスの入力フォームプラグイン「Contact Form 7」（コンタクトフォーム７）で、複数ステップに分かれた入力フォームを作ることができるプラグイン「Contact Form 7 Multi-Step Forms」があります。

この記事では「Contact Form 7 Multi-Step Forms」の導入手順から使い方と設定などを解説していきます。

複数ステップで構成する入力フォームの動作サンプル

「Contact Form 7 Multi-Step Forms」で、複数ステップで構成する入力フォームのサンプルがプラグイン作者のウェブサイトで見ることができます。

Contact Form 7 Multi-Step Form – Webhead
Multi-step contact forms are a great way to collect information for newsletters, applications, or for marketing purposes.
webheadcoder.com

「Contact Form 7 Multi-Step Forms」の導入方法

「Contact Form 7 Multi-Step Forms」はWordPressワードプレスの公式ディレクトリに登録されています。
ですので、WordPressワードプレスのダッシュボードにあるプラグインの新規追加から「Contact Form 7 Multi-Step Forms」を検索して、インストールすることができます。

また、「Contact Form 7 Multi-Step Forms」の動作には、「Contact Form 7」（コンタクトフォーム７）が必須ですので、こちらも別途インストールしておきましょう。

「Contact Form 7 Multi-Step Forms」の使い方

マルチステップで構成するフォームを作成するにあたり、各ステップにつき、固定ページまたは投稿が一つ必要です。

例えば、3つのステップがある場合、3つの固定ページ/投稿が必要です。

また、「Contact Form 7」で作成するフォームも、ステップの数だけ必要です。
もし、3つのステップの場合、フォームも作成することになります。

フォームの各ステップを表示する固定ページ/投稿を作成

各ステップの入力フォームを表示する固定ページ/投稿のURLが、後の作成工程で必要になります。
ですので、各ステップを表示する固定ページ/投稿を作成し、URLをメモしておきます。

１ステップ目のフォームを作成

  1. では、ダッシュボードから「お問い合わせ」をクリックして、「Contact Form 7」のフォーム作成画面を開きます。
  2. １ステップ目のフォームを作成します。
  3. フォーム作成を終えたら、フォームの一番下に、次のフォームへ行くボタンを追加します。
    次のフォームへ行くボタンは、「Contact Form 7」で普通にフォーム送信ボタンを作るのと同じ、[submit]タグを使います。

次のフォームへ行くボタンのサンプル・タグ：
　[submit “次へ”]

  1. 次に、フォームのテンプレート編集画面の一番下にカーソルを置きます。
    多くの場合、[submit]タグの下をクリックする感じですかね。
  2. 「Contact Form 7」の「フォーム」タブの画面には、[テキスト][メールアドレス][URL]…といったフォーム用タグの挿入ボタンが並んでいます。その中に、「Contact Form 7 Multi-Step Forms」プラグインを有効化したことで追加された[multistep]というボタンをクリックします。
  3. ポップアップで出てきたウィンドウに「First Step」と表示があるので、その横にあるチェックボックスに、チェックマークを付けます。
  4. 次のステップのフォームを表示する固定ページ/投稿のURLを「 Next Page URL」の欄に入力します。
  5. ポップアップウィンドウの右下にある「Insert Tag」ボタンをクリックします。すると、[multistep]タグが挿入されます。
  6. フォームを保存し、１つ目のフォームを表示する固定ページ/投稿に、ショートコードを貼り付け、保存します。

これで、 第１ステップのフォームは完了です。次のステップのフォームを作っていきましょう。

第２ステップ以降のフォームを作ります

  1. 「Contact Form 7」のフォーム作成画面で、入力フォームを新規作成します。
  2. そして、第１ステップのフォームと同じように、いつも通りにフォームのテンプレートを作成します。
  3. 第１ステップのフォームでは、「次へ」ボタンを追加しましたが、第２ステップ以降のフォームでは、「戻る」ボタンも追加してみましょう。
    次のフォームへ進むボタンは[submit]でしたが、前のフォームへ戻るボタンは[previous]が用意されています。

前に戻る・次のフォームへ行くボタンのサンプル・タグ：
　[previous “戻る”][submit “次へ”]

  1. フォームのテンプレート編集画面の一番下にカーソルを置き、[multistep]ボタンをクリックします。
  2. ポップアップで出てきたウィンドウで、次のステップのフォームを表示する固定ページ/投稿のURLを「Next Page URL」の欄に入力します。
  3. ポップアップウィンドウの右下にある「Insert Tag」ボタンをクリックします。
  4. フォームを保存し、そのフォームを表示する固定ページ/投稿に、ショートコードを貼り付け、保存します。

上記の工程を必要なステップ分、行います。

最終ステップのフォームを作ります

  1. 「Contact Form 7」のフォーム作成画面で、入力フォームを新規作成します。
  2. そして、フォームのテンプレートを作成します。
  3. 最終ステップのフォームでは、「戻る」ボタンと「送信する」ボタンをつけてみます。
    送信ボタンもこれまで「次へ」ボタンで使ってきた[submit]タグを使います。

前に戻る・送信ボタンのサンプル・タグ：
　[previous “戻る”][submit “送信する”]

  1. フォームのテンプレート編集画面の一番下にカーソルを置き、[multistep]ボタンをクリックします。
  2. 最終ステップのフォームでは、ポップアップで出てきたウィンドウに表示された「last Step」の横にあるチェックボックスをチェックします。
  3. そして、ポップアップウィンドウの右下にある「Insert Tag」ボタンをクリックします。
  4. フォームを保存し、そのフォームを表示する固定ページ/投稿に、ショートコードを貼り付け、保存します。

上記で、複数のステップ・ページに分かれた入力フォームの作成は完了です。
各ステップの固定ページ・投稿を公開して、入力フォームがちゃんと動作することを確認しましょう。

「Contact Form 7 Multi-Step Forms」独自の[ｍultistep]タグについて

「Contact Form 7 Multi-Step Forms」プラグインを有効化したことで、「Contact Form 7」の「フォーム」タブの画面に追加される[multistep]タグには、以下のオプション項目があります。

オプション項目
名前個別の[multistep]タグに割り当てる名前です。入力必須項目です。
First Step第１ステップの入力フォームの場合、このオプションにチェックします。
Last Step最終ステップの入力フォームの場合、このオプションにチェックします。
Send Emailこのオプションをチェックすると、[submit]タグで生成されたボタンが押されると、入力データをメールで送信します。
Skip Save送信された入力フォームのデータを保存するプラグイン「Flamingo」や「CFDB7」を使っている場合、このオプションをチェックされていると、データが保存されません。
Next Page URLこのフォームを送信後に、次に遷移するフォームを表示する固定ページ・投稿のURLを入力します。

他の独自タグについて

[ｍultistep]タグの他にも、次の独自タグを利用できます。

[multiform “your-name”]

[multiform]タグは、前のステップで入力されたデータを表示します。上のタグ例にある「your-name」を表示したいデータのフィールド名に書き換えて利用します。

[multiform]タグは「form field」ボタンをクリックして追加できます。
データ送信前に入力内容を確認する画面が表示されない「Contact Form 7」（コンタクトフォーム７）ですが、この[multiform]タグを使うと、確認画面の実装ができますね。

[previous “戻る”]

[previous]タグは、１つ前のステップのフォームに戻るボタンを表示します。上のタグ例にある「戻る」を任意の文字に書き換えて利用してください。

「メッセージ」タブ

上記タグの他に、「メッセージ」タブに用意されているメッセージにも、独自のメッセージが以下のように追加されます。

The sender visited this form without submitting the first step of the multistep forms.
Please fill out the form on the previous page.

これは、第１ステップのフォームを経ずに、２ステップ目以降のフォームに直接来たユーザーに表示するメッセージです。

次のような日本語メッセージに書き換えては、どうでしょうか？

前のフォームに戻り、データを入力してください。

「Contact Form 7 Multi-Step Forms」の注意ポイント

ファイル・アップロードの制約

すべてのステップにおけるフォームから、[ファイル]を使って、ファイルをアップロードすることが出来ません。

最終ステップのフォームだけ、ファイルのアップロードに対応しています。

入力フォームからファイル・アップロードが必要な場合、最終ステップのフォームに、[ファイル]タグを配置してください。

１つの固定ページ・投稿に、１つの入力フォーム

同一の固定ページ・投稿に、複数ステップのフォームを表示できません。別々の固定ページ・投稿にフォームを配置された場合のみ、正常な動作をします。

面倒ですが、必要なステップを作成すると同時に、同じ数の固定ページ・投稿も用意しましょう。

この記事を書いた人

WP Recipe

記事一覧