Contact Form 7 Multi-Step Formsは、Contact Form 7のフォームをステップ分割することができるWordPressプラグインです。

入力→確認→完了といったように、画面遷移しながらフォームの送信ができるようになります。

注意点

最初に注意点についてお伝えしておきます。

Contact Form 7 Multi-Step Formsの無料版では、1度に送信できる容量が4KBまでという制限があります。そのため、1000文字ほどの長文を送信しようとしても送れません。(送信ボタンを押しても次の画面に進まなくなります)

これを回避するためにはPro版を購入する必要があり、Pro版では制限が5MBまでに引き上げられます。添付ファイルがなければ5MBあれば十分ですね。

Pro版のライセンスはこちらから購入可能です。1サイト用のライセンスでは買い切りも選択できます。

Contact Form 7 Multi-Step Formsのインストール

インストール手順は以下の通りです。

ファイルをFTPでアップロードしてインストール

1. Contact Form 7 Multi-Step Formsをダウンロードします。
2. ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。
3. 管理画面の[プラグイン]ページで、Contact Form 7 Multi-Step Formsを有効化します。

WordPress管理画面でインストール

1. [プラグイン] – [新規追加]にアクセスします。
2. 「Contact Form 7 Multi-Step Forms」で検索します。
3. [今すぐインストール]をクリックして、Contact Form 7 Multi-Step Formsをインストールします。
4. [有効化]をクリックしてプラグインを有効化します。

Contact Form 7 Multi-Step Formsを使ってフォームに確認画面を設置する方法

Contact Form 7は必須なので、事前にインストールしておいてください。

固定ページの作成

まずは、下記固定ページを作成します。スラッグは環境に合わせて変更してください。

• フォーム入力画面：contact
• 入力内容確認画面：contact/confirm
• 送信完了画面：contact/thanks

入力フォームの作成

[お問い合わせ] – [コンタクトフォーム]で通常通り入力フォームを作成します。入力フォームではメール送信はされませんので、この時点でメールタブの設定はしなくて大丈夫です。

ショートコードのsubmitの値を”確認画面へ”などに変更して、multistepのショートコードを追加します。

「Next Page URL」に確認画面のスラッグを入力して、「First Step」にチェックを入れます。

生成されたタグをフォームの最後に挿入します。

これで入力画面の作成は完了です。ショートコードを固定ページに記述します。

確認画面用のフォーム作成

作成した入力フォームを複製して確認画面用のフォームを作成します。

確認画面では、textやemailなどのタグをmultiformに置き換えます。必須の * も消しておきます。selectやcheckboxの選択肢も不要です。[multiform “〇〇”]というフォーマットに書き換えます。

multiformタグが設置された箇所に、フォームで入力した値が表示される仕様です。

previousタグを設置すると、前の画面に戻るボタンを設置できます。確認画面には戻るボタンを設置しておいた方が良いですね。

戻るボタンのHTMLは以下のように出力されます。

<input class="wpcf7-form-control wpcf7-previous" type="button" value="修正する">

入力フォームと同様に、multistepタグを追加します。「Next Page URL」に完了画面のスラッグを入力して、「Last Step」「Send Email」にチェック入れます。

フォームの最後にタグを挿入します。

確認画面用のフォームからメールが送信されますので、メールタブの設定もしておきます。

フォームが作成できたら、確認画面の固定ページのショートコードを設置しましょう。

これで一通りの設定が完了です。入力フォーム→確認画面→完了画面というように画面遷移してメールが送信されます。

あとがき

私の観測範囲では、デザイナーさんから上がってくるフォーム画面のデザインには、ほぼ確実に確認画面が入っていますね。今まで実装したコーポレートサイトのお問い合わせフォームには、すべてに確認画面を設置した気がします。

フォームプラグインにContact Form 7を使っていて、確認画面を設置したい時は、ぜひContact Form 7 Multi-Step Formsをご活用ください。