【解決策2選】Elementorフォームで「郵便番号の住所自動入力」と「確認画面」を両立させる方法

Elementorで高機能なフォームを作成する際、多くの人が実装したいと考えるのが「郵便番号からの住所自動入力」と「送信前の入力内容確認画面」です。

それぞれを単体で実装する方法は情報が見つかりますが、「この2つの機能を1つのフォームに共存させたい」となると、意外な壁にぶつかることがあります。

「片方はできるのに、両立させようとするとうまくいかない…」

この記事では、そんなお悩みを解決するため、実際にあった質問とそれに対する2つの具体的な解決策を、ステップ・バイ・ステップで分かりやすく解説します。

• 解決策①：Jetformbuilder と yubinbango.js を組み合わせる方法
• 解決策②：Elementor Pro だけで完結させる方法（テンプレート利用）

ご自身の環境やスキルに合った方法で、ユーザーにとって親切なフォームを実装しましょう。

多くの人がつまずく「壁」とは？

今回の記事は、あるWeb制作者コミュニティに寄せられた、以下のような質問が元になっています。

【質問者のお悩み】
Elementor Proで、フォームを作成しています。
① 郵便番号を入力したら住所が自動で入る機能
② 送信前に入力内容を確認できる画面
この2つを実装したいのですが、どうしても両立できません。

試したこと:

• Jetformbuilderで確認画面を作った後、住所自動入力を試す
  → Elementorフォーム用の住所自動入力設定（Custom Attributes）が使えず、失敗。
• Elementor Proのステップ機能で確認画面を作ろうと試す
  → 確認画面に、前のステップで入力した内容を表示させるためのマクロ（<!--JFB_FIELD::name=-->など）が機能せず、失敗。

このように、Elementor Proのステップ機能と、Jetformbuilderの確認画面機能は、それぞれ異なる仕組みで動いているため、単純に組み合わせることができないのが、つまずきの原因です。

しかし、ご安心ください。コミュニティの有志によって、この課題をクリアする2つの素晴らしい方法が共有されました。

解決策①：Jetformbuilder と yubinbango.js を使う方法

まずご紹介するのは、高機能フォームプラグイン「Jetformbuilder」と、郵便番号検索ライブラリ「yubinbango.js」を組み合わせる、堅実な方法です。

この方法のポイント

• フォームの作成と確認画面は「Jetformbuilder」が担当。
• 住所自動入力は、JavaScriptライブラリ「yubinbango.js」が担当。

【実装手順】

STEP 1: yubinbango.js を読み込む

フォームを設置したページのHTMLウィジェットなどに、以下のコードを記述します。フォームウィジェットの前に置くのが確実です。

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<span class="p-country-name" style="display:none;">Japan</span>

これで、このページで yubinbango.js の機能が使えるようになります。

STEP 2: フォーム全体にCSSクラスを設定

Jetformbuilderで作成したフォームウィジェットを選択し、Elementorの編集画面で [高度な設定] > [CSSクラス] に以下のクラス名を入力します。

h-adr

これは、yubinbango.js に「このフォーム全体が住所情報を扱う領域ですよ」と教えるための”目印”です。

(※画像はイメージです)

STEP 3: 各フィールドにCSSクラスを設定

次に、フォーム内の各フィールドに、役割に応じたCSSクラスを設定していきます。

1. 郵便番号フィールド
[高度な設定] > [CSSクラス名] に以下を入力します。

h-adr p-postal-code

2. 住所フィールド
[高度な設定] > [CSSクラス名] に以下を入力します。
（都道府県、市区町村、それ以降の住所を1つのフィールドにまとめる場合）

h-adr p-region p-locality p-street-address

(※画像はイメージです)

以上です！
これで、Jetformbuilderの確認画面機能を活かしつつ、郵便番号を入力すると自動で住所が入力されるフォームが完成します。

解決策②：Elementor Pro のみで完結させる方法

「できれば追加のプラグインは使わず、Elementor Proだけで完結させたい」という方には、こちらの方法がおすすめです。

この方法のポイント

• Elementor Proの「ステップ機能」を使って入力画面と確認画面を作成。
• 特別なJavaScriptを使い、入力内容を確認画面のHTMLフィールドに動的に表示させる。
• 住所自動入力はElementor Pro標準の「Custom Attributes」機能を利用。

この方法は、ある開発者がAIの力を借りて作成したテンプレートを利用することで、誰でも簡単に実装できます。

【実装手順】

STEP 1: テンプレートファイルをダウンロード

まずは、この機能が組み込まれたElementorのテンプレート（JSONファイル）を用意します。
今回は、コミュニティで共有されたファイルを元に作成した、という想定で進めます。

(※注: 実際にコミュニティで共有されたファイルelementorpro-form-confirm-zipcode.jsonをダウンロードできるリンクをここに設置する想定です)

テンプレートファイルをダウンロードする (elementorpro-form-confirm-zipcode.json)

STEP 2: Elementorにテンプレートをインポート

WordPressの管理画面から [テンプレート] > [テンプレート] を開き、「テンプレートをインポート」ボタンから、先ほどダウンロードしたJSONファイルをアップロードします。

STEP 3: テンプレートをページに挿入

Elementorの編集画面を開き、テンプレートを挿入したい場所でグレーのフォルダアイコンをクリックし、「マイテンプレート」タブからインポートしたテンプレートを選択して挿入します。

STEP 4: 動作の確認とカスタマイズ

挿入されたフォームは、すでに以下の機能が実装されています。

• ステップ1: 項目入力画面（郵便番号を入力すると住所が自動入力される）
• ステップ2: 入力内容の確認画面

このテンプレートの素晴らしい点は、フォームの項目を増やしたり、順番を変えたりしても、確認画面が自動的に追従してくれることです。JavaScriptが動的に内容を生成してくれるため、項目追加のたびに確認画面を手動で修正する必要がありません。

住所自動入力の設定は、Naomi Suzuki (tofulab.app) さんのYouTube動画で解説されている「Custom Attributes」を使った王道の方法が採用されています。

まとめ：あなたに合うのはどちらの方法？

今回は、Elementorフォームで「住所自動入力」と「確認画面」を両立させる2つの方法をご紹介しました。

	解決策① (Jetformbuilder)	解決策② (Elementor Proのみ)
必要なもの	Elementor, Jetformbuilder	Elementor Pro
メリット	・Jetformbuilderの柔軟な機能が使える ・設定がCSSクラスの追加で直感的	・追加プラグインが不要 ・テンプレートで即導入可能 ・項目の増減に自動で対応
デメリット	・Jetformbuilderプラグインが別途必要	・JavaScriptが組み込まれており、コードの深い改修は難しい
おすすめな人	・普段からJetformbuilderを愛用している人	・プラグインを最小限に抑えたい人 ・手軽に高機能フォームを実装したい人

どちらの方法にもメリットがあります。
ご自身のWebサイトの環境や、今後の運用方針に合わせて、最適な方法を選択してみてください。