MARKLEAPS[マークリープス]

TECH BLOG

マークリープス技術ブログ

open

プラグイン「Contact Form 7 Multi-Step Forms」で問い合わせ画面を入力・確認・送信の3ページに分ける方法

Contact Form 7 Multi-Step Forms

問い合わせフォーム作成プラグイン「Contact Form 7」に確認画面を追加するプラグインでは「Contact Form 7 add confirm」が有名ですが、
・送信完了時の表示がわかりにくい
・Contact Form 7とスプレッドシートを連携するプラグイン「CF7 Google Sheet Connector」併用時にデータが重複して記録される問題がある(こちらの記事を参照
等のデメリットがあります。

そこで、プラグイン「Contact Form 7 Multi-Step Forms」
を使用し、問い合わせフォームを
「入力」「確認」「完了」の3ページに分ける方法についてご紹介します。

「Contact Form 7 Multi-Step Forms」のインストール・有効化

プラグイン > 新規追加 より、「Contact Form 7 Multi-Step Forms」をインストール・有効化します。

「入力」フォーム・固定ページを作成

Contact Form 7で通常通りフォームを作成します

step1

①確認ボタンの下にカーソルを合わせます
②「multistep」をクリックします
③名前を付けます
④「First Step」にチェックを入れます
⑤「Next Page URL」に確認ページの固定ページURLを入力します
⑥「Insert Tag」をクリックします

step1 完了

確認ボタンの下に[multistep]タグが挿入されたのを確認出来たら「保存」をクリックします。

「入力フォーム」を表示させる固定ページを作成します。
入力フォームのショートコードを固定ページに貼り付けます。

入力画面はこれで完了です。

「確認」フォーム・固定ページを作成

「確認」用のフォームを新規で作成します。
「入力」フォームのフォーム内容をコピペし、
以下のように書き換えます。

step2

①「戻る」ボタンと「送信」ボタンを挿入し、その下にカーソルを合わせます。
②「multistep」をクリックします
③名前を付けます
④「Send Email」にチェックを入れます
⑤「Next Page URL」に送信完了ページの固定ページURLを入力します
⑥「Insert Tag」をクリックします

step2

送信ボタンの下に[multistep]タグが挿入されたのを確認出来たら「保存」をクリックします。

「確認フォーム」を表示させる固定ページを作成します。
固定ページのURLは前項の「Next Page URL」に入力した値に合わせます。
確認フォームのショートコードを固定ページに貼り付けます。

「送信完了」の固定ページを作成

固定ページのURLは前項の「Next Page URL」に入力した値に合わせます。

メール設定

自動返信メールの設定は、「Send Email」のタグが挿入されている確認画面用のフォームに設定します。

以上で、「入力」「確認」「完了」とページが遷移するフォームが作成できます。

free_textオプション使用時には注意!

free_textオプションを使用している場合、
確認画面から入力画面に戻った際に、フリー入力欄に入力した内容が消えてしまう不具合を確認しました。
今のところ解消法が見つかっていない為、free_textオプションと「Contact Form 7 Multi-Step Forms」の併用には何らかの回避策が必要です。

よく読まれている関連記事

関連最新記事