Contact Form 7 Multi-Step Formsの使い方

コンタクトフォームはウェブサイトで重要な役割を果たしますが、フォームが長すぎるとユーザーの離脱率が上がる可能性があります。
この問題を解決するために、「Contact Form 7 Multi-Step Forms」プラグインを使用することができます。
このプラグインを使うことで、フォームを複数のステップに分割し、ユーザーが分かりやすく入力できるようにすることができます。
今回は、「Contact Form 7 Multi-Step Forms」の使い方について解説します。

プラグインのインストールと有効化

WordPressのダッシュボードにログインし、「プラグイン」セクションから「新規追加」を選択します。

プラグイン検索バーに「Contact Form 7 Multi-Step Forms」と入力し、プラグインを検索します。
プラグインが表示されたら、「インストール」をクリックしてプラグインをインストールします。

有効化すると、上記画像のメッセージが表示されるので「スキップ」をクリックして次に進みます。

新規フォームの作成

新しいコンタクトフォームを作成します。
通常のContact Form 7と同様に、フォームのタイトルやフォームフィールドを追加します。

確認画面用フォームなどのわかりやすい名前でフォームを作成します。

text* your-name
textarea your-message

などの内容を確認画面では、

multiform your-name
multiform your-message

に変更します。

メールの設定も忘れずに、確認画面へ移動します。

固定ページを作成

WordPressの固定ページより、確認画面用のページを作成します。
また、サンクス(送信完了)ページも作成します。

入力画面から確認画面へ移動する設定

「multistep」をクリックします。

「First Step」にチェックを入れ、「Next Page URL」に確認画面用へのURLを入力し、
「Insert Tag」ボタンをクリックしてフォームにマルチステップタグを挿入します。

確認画面から送信完了へ移動する設定

「multistep」をクリックします。

「Send Mail」にチェックを入れ、「Next Page URL」に送信完了用に作成したURLを入力し、「Insert Tag」ボタンをクリックしてフォームにマルチステップタグを挿入します。

まとめ

「Contact Form 7 Multi-Step Forms」を使用することで、長いフォームを分かりやすいステップに分割し、ユーザーの離脱率を減少させることができます。
プラグインのインストールからフォームの作成、設定、表示までの手順を把握することで、効果的なマルチステップフォームを実装できるでしょう。