バージョンアップしたContact Form 7 に入力確認画面をつけたい!

ワードプレス

2022-03-14

入力確認画面が作れるプラグイン「Contact Form 7 Multi-Step Forms」

Contact Form 7をアップデートしたらフォームが動かなくなってしまった! 調べてみると確認画面を作るプラグイン「Contact Form 7 add confirm 」が新しいものに対応していないみたいでした。

アップデートはするべきですよね。でもその場合お客さんのサイトで確認画面付きのContact Form 7を全部他のプラグインに変更しないとダメ?!

そこで「MW WP Form」への変更作業を少しずつ始めていましたが、こちらのプラグインも更新されていないので、今後がちょっと心配でした。そんな時「Contact Form 7 Multi-Step Forms」を知りました!

こちらはフォームを段階的に分けることができるプラグインです。これで今までのContact Form 7を生かした確認画面が作れます!

ステップ① Contact Form 7の設定

まずは「Contact Form 7」の設定をいつもどおりに行います。
受信メールや自動返信メールもフォームの「メール」タブできちんと設定しましょう。
もう作成済みの場合は次のステップからどうぞ。

ステップ② プラグイン「Contact Form 7 Multi-Step Forms」インストール

プラグイン「Contact Form 7 Multi-Step Forms」インストール。
このような表示が出てきます。今回は「スキップ」しました。

インストール後「multistep」「form fiel」「dprevious」が追加されました。

ステップ③ 入力画面の送信ボタン周りの設定

「multistep」で入力の次の「確認ページ」に遷移するよう設定します。
[submit “送信”]の下にカーソルを当てて「multistep」をクリック。

(1)今作成している入力画面は最初のページなので「first_step」にチェックを入れます。
(2)確認画面のURLを設定します。ここでは「/confirm/」と設定しました。

(3)ボタンの表示を「送信」から「確認する」([submit “確認する”])に変更します。

ステップ④ 確認画面の設定

次に、このフォームを複製して確認画面を設定します。
(1)送信完了画面のURLを設定します。ここでは「/thanks/」と設定しました。
そして「last_step」「send_email」にチェックを入れます。

(2)戻るボタンを作りましょう。
[submit “確認する”]の前にカーソルを当てて「previous」をクリック。

(3)確認画面に値が表示されるよう「form field」ボタンで設定します。
複製したままだと[text* your-name] などになっています。これを削除して「form field」をクリック。それぞれのname属性を入れていきます。

(4)ボタンの表示を「送信する」([submit “送信する”])に変更します。
これでひとまずフォームの設定は完了しました!

入力ページ、確認ページ、送信完了ページを作成

続いて固定ページで「入力ページ」「確認ページ」「送信完了ページ」を作成します。

「入力ページ」を作成します。
このページにステップ③作成したコンタクトフォームのショートコードをペーストします。
(既にページがある方はそのページでOKです。)

ステップ③の(2)で設定したURLで「確認ページ」を作成します。
このページにステップ④で作成したコンタクトフォームのショートコードをペーストします。

ステップ④の(1)で設定したURLで「送信完了ページ」を作成します。

完成です! 送信テストをしてみましょう。
動作確認できましたか?

メモ

入力する前に確認ページのURLを開くと「Please fill out the form on the previous page.」と表示されます。グーグル翻訳で「前ページのフォームにご記入ください。」と翻訳されました。

これを日本語に直す場合、フォームの「メッセージ」タブの真ん中あたりを編集します。

おわりに

プラグインを開発してくださり本当にありがたいです。
そして新しい情報を取り入れていくことの重要性を改めて感じました。サイトを作って終わり、これで大丈夫、と安心せずその時々に適したメンテナンスをしていきたいなと思います。

-ワードプレス

関連記事

よく使うWordPressテンプレートタグ

URLを出力するWordPressのテンプレートタグ phpファイルにテンプレートタグを使用することで、自動でURLを取得して表示してくれます。これでサイトURLが変わってもコードの修正をしなくても大 …

カテゴリーなどの一覧ページに並び順を変更できるボタンをつけたい

投稿記事一覧をソートするボタンを作りたい! よくネットショップで見かける、値段の安い順、高い順、人気順など見たい順番を選べるボタン。 WordPressのカテゴリー一覧ページなどに設置できれば、ユーザ …

【MW WP Form】必須項目をラジオボタン選択肢によって変えたい

MW WP Formの必須項目を分岐で変更! お問い合わせフォームなどで、選択肢によって分岐させ、フォームの項目を変えるのは難しい。例えば、資料請求を選んだら住所入力欄が出てくるとか。 必須が多いとフ …

WordPress よく使うおすすめプラグイン

プラグインが増えれば内容によってスクリプトが増え、ページの読み込みが遅くなるので、使い過ぎないようにします。私が今まで制作していて本当に助かっているプラグインはこちらです!

カスタム投稿プラグイン「Custom Post Type UI」のお引っ越し

カスタム投稿の移行 「Custom Post Type UI」は、簡単にカスタム分類を設定して独自の投稿タイプを作れるプラグインです。function.phpに記述せずにカスタム投稿を作成できるのは初 …