2025-10-08

ElementorWeb制作

Elementor Proフォームに確認画面を追加する方法

「Elementor Proのフォーム、便利だけど確認画面が出ない…」「入力ミスに気づかず送信されちゃった…」
Elementor Proのフォームはとても便利ですが、「確認画面」を出す機能が標準ではありません。
海外のサイトでは、入力しているそばから「ここは間違っていますよ」と教えてくれる機能が多いため、「送信ボタンを押すときには、内容はもう合っているはず」と考えられています。

一方、日本のウェブサイトでは、ユーザーに「この内容で本当に良いですか?」と最終確認の機会を設けることが、丁寧さや思いやりだと考えられています。この文化の違いが、確認画面の必要性の差につながっているのではないのでしょうか。

何とか「確認画面」を出せないか、試行錯誤したのですが、結論から言うとElementor Pro単体ではできません。そこでElementor Proと連携する3つのコードを実装させ実現しました。

実装環境
WordPress バージョン 6.8.3
Elementor バージョン 3.32.1
Elementor Pro バージョン 3.32.1
テーマ:Hello Elementor
サーバー:Xサーバー
PHP バージョン 8.3.21
データーベース:mysqlnd 8.3.21

INDEX

どうやって実装するの?

このカスタマイズは、Elementor Proと連携する3つのコードを実装させます。

  1. JavaScript(HTMLウィジェット): Elementorの「送信!」という動きを一旦ストップさせ、代わりに入力内容が書かれたポップアップ(確認画面)を表示させます。
  2. PHP(functions.php): 確認画面で「送信する」ボタンが押されたときに、メールを送ったり、データベースに保存したりする、実際の処理を担当します。
  3. CSS(追加CSS): ポップアップ(確認画面)のデザインをきれいに整えます。

 

完成イメージは、送信ボタンを押すと、フワッと入力内容の確認画面が出てきます。「修正する」「送信する」が選べる。さらにデータベースに受信内容が保存されElementorのSubmissionsから確認が出来きるイメージです。