ポップアップフォームを作成・表示する

Published: 2026年7月16日 · Last updated: 2026年7月21日 · By Marcus Biel

ポップアップは、Webサイトのコンテンツの上に表示されます。背後のページをそのまま残しながら、訪問者の視界に登録オファーを直接表示できます。

ポップアップは、ニュースレターのオファー、割引、イベント登録、リードマグネット、その他の目的を絞った行動喚起に便利です。通常のページ閲覧を中断するため、デザインだけでなく表示のタイミングと頻度も重要です。

このガイドでは、ポップアップ固有の設定について説明します。レイアウト、コンテンツブロック、購読者フィールド、タグ、タイポグラフィ、レイヤー、登録フローについては、メインの登録フォームビルダーガイドで説明しています。

ポップアップを作成する

「Signup Forms」を開き、「Create Form」をクリックして「Popup」を選択します。わかりやすい内部名を入力し、ビルダーに進みます。

既存のポップアップを編集するには、Signup Forms Overviewでその名前をクリックします。

「Homepage Discount Popup」「Webinar Registration Popup」「Guide Download Popup」のように、オファーや配置場所がわかる名前を使用してください。内部名が訪問者に自動的に表示されることはありません。

ポップアップテンプレートを選択する

ポップアップでは、空白のフォーム、標準フォーム、4種類のデザイン済みテンプレートを利用できます。

• Clean discount
• Warm guide
• Dark webinar
• Soft community

オファーに合ったサイズとコンテンツ構成のテンプレートを選択します。テキスト、フィールド、色、画像、余白、レイアウトはすべて後から変更できます。

ポップアップをデザインする

ビジュアルビルダーを使ってポップアップを配置します。登録フォームに、テキスト、画像、動画、リスト、ボタン、ソーシャルリンク、購読者カウンター、スペーサー、区切り線を組み合わせることができます。

主なメッセージは、すぐに理解できる程度に短くまとめます。明確な見出し、簡潔な説明1つ、具体的な送信ボタンのほうが、複数のメッセージが競合する構成よりも効果的なことが一般的です。

登録フォームブロックを選択して、フィールド、必須情報、非表示タグ、進捗インジケーター、購読者カウンター、入力欄、送信ボタンを設定します。「Page settings」を開くと、ポップアップ全体の背景と外観のデフォルト設定を変更できます。

ポップアップはWebサイトの上に表示され、閉じる操作が用意されています。小さな画面でもフォームを使いやすく保てるよう、重要なテキストやフィールドの周囲に十分な視覚的スペースを確保してください。

ポップアップの動作を設定する

登録フォームブロックを選択し、「Widget Settings」を開きます。このセクションでは、ポップアップを表示するタイミングと、訪問者に表示できる頻度を設定します。

表示遅延

「Display Delay」では、埋め込み先のWebサイトページでポップアップを表示する前にMaildroppaが待機する秒数を設定します。

追加の遅延なしで表示するには0を入力します。オファーが表示される前に訪問者がページを読む時間を設けたい場合は、より大きな値を使用します。ビルダーで設定できる遅延は最大86,400秒です。

ページの内容に応じて遅延を選択してください。目的を絞ったキャンペーンページでは短い遅延が適している場合がありますが、記事では長めの遅延のほうが中断感を抑えられます。

表示頻度

「Display Frequency」では、同じ訪問者にポップアップを再び表示できるまでの期間を設定します。利用できるオプションは次のとおりです。

• Always
• Once per hour
• Once per day
• Once per week
• Once per month

「Always」は慎重に使用してください。同じ訪問者にポップアップが繰り返し表示されると、煩わしく感じられることがあります。一般的なWebサイトのオファーでは、1日ごとまたは1週間ごとの頻度から始めるのが適している場合が多いです。

頻度は訪問者のブラウザに保存されます。そのため、別のブラウザ、プライベートブラウジングウィンドウ、またはブラウザストレージを消去した状態でテストすると、異なる結果になることがあります。

離脱意図を使用する

訪問者がページ領域の外へポインターを移動し、離脱しようとしている可能性があるときにポップアップを開くには、「Exit Intent Popup」を有効にします。

離脱意図を有効にすると、ポップアップは通常の遅延表示ではなく、この動作を待って表示されます。選択した表示頻度によって、短時間で再表示されることは引き続き防止されます。

離脱意図はポインターの動きに基づくため、主にデスクトップやノートパソコンのブラウザで有効です。タッチデバイスでは同じ離脱シグナルを取得できません。モバイル訪問者も、ページ自体または別の適切なフォームから登録オファーを見つけられるようにしてください。

ページ要素から手動でポップアップを開く

Webサイト上の特定のボタン、画像、リンクを訪問者がクリックしたときにポップアップを開くことができます。これが手動クリックトリガーです。訪問者がページの外へポインターを移動したときに反応する「Exit Intent Popup」とは異なります。

手動クリックトリガーは次の手順で設定してインストールします。

1. Signup Form Builderでポップアップを開きます。
2. キャンバス上の登録フォームブロックをクリックし、右側の「Settings」を開きます。
3. 「Widget Settings」を展開し、「Open popup when a customer clicks a page element」を有効にします。
4. 「Save changes」をクリックします。
5. Signup Forms Overviewに戻り、ポップアップが無効になっている場合は有効化します。
6. そのポップアップの行にある「Show Code Snippet」をクリックします。

ダイアログには、Webサイトで必要な2つの値が表示されます。

1. 「JavaScript」タブからコード全体をコピーし、ポップアップを利用可能にするWebサイトのページに追加します。
2. コードの下にある「Add this ID to element from which you want to manually trigger Popup」の下に表示されたIDをコピーします。
3. ポップアップを開くボタン、画像、リンクのid属性に、その値を正確に追加します。

IDの形式は次のとおりです。

maildroppa-popup-btn-[form-id]

例：

<button id="maildroppa-popup-btn-[form-id]">ガイドを入手</button>

JavaScriptがポップアップを読み込みます。IDによって、ポップアップと選択したページ要素が接続されます。公開済みの同じページに、両方が存在している必要があります。訪問者がその正確なIDを持つ要素をクリックすると、Maildroppaスクリプトがポップアップを開きます。

Webサイトのボタンに別のポップアップシステムのIDがすでに設定されている場合、Maildroppaでクリックを処理するときは、そのIDをMaildroppaのトリガーIDに置き換えます。Maildroppaポップアップを、Webサイトビルダーが提供する別のポップアップの中に配置しないでください。

1ページ内では、各HTML IDを1回だけ使用してください。複数の要素で同じポップアップを開く場合は、同じIDを重複させずにそれらの要素を接続するよう、Webサイトの実装担当者に依頼してください。

登録フローを接続する

ビルダーのヘッダーで割り当てられた登録フローを確認します。登録直後の応答、Double Opt-inメール、確認後の結果を制御します。

既存のフローを選択、編集することも、このポップアップ専用のフローを作成することもできます。オファー専用の確認メッセージやリードマグネット配信が必要な場合は、専用フローが便利です。

プレビューと保存

「Preview」をクリックすると、Webサイトで使用中のバージョンを変更せずに、ポップアップのデザインと動作を確認できます。レイアウト、閉じる操作、フィールドの順序、バリデーション用のスペース、送信後の応答を確認してください。

ポップアップの準備ができたら「Save changes」をクリックします。その後、Signup Forms Overviewに戻ります。

ポップアップを有効化して自動的に埋め込む

ポップアップがまだ有効でない場合は、3点メニューのアクションから有効化します。次に「Show Code Snippet」をクリックし、「JavaScript」タブからコード全体をコピーします。

ポップアップを利用可能にするすべてのWebサイトページにスクリプトを追加します。コードにはポップアップ固有のフォームIDが含まれており、保存済みの最新設定が読み込まれます。

「HTML」タブには、カスタム実装用に生成されたマークアップが表示されます。これを使用する場合は、Webサイトのコードやスタイルが結果に影響する可能性があるため、すべての動作と送信手順を慎重にテストしてください。

このセクションは、表示遅延または離脱意図の動作に基づいてポップアップを自動的に開く場合に適用されます。クリック時にポップアップを開くボタン、画像、リンクについては、

を参照してください。

一般的な埋め込み手順については、埋め込みフォームを作成して埋め込むを参照してください。

Webサイトでポップアップをテストする

コードを追加したら、実際のWebサイトページでポップアップをテストします。

1. 設定した遅延を確認します。
2. 閉じるボタンと、フォームの外側をクリックする操作をテストします。
3. 有効にしている場合は、ページの外へポインターを移動して離脱意図をテストします。
4. 有効にしている場合は、設定したページ要素をクリックして手動トリガーをテストします。
5. 狭い画面でレイアウトを確認します。
6. フォームを送信し、Double Opt-inの手続きを完了します。
7. Maildroppaで購読者と非表示タグを確認します。

頻度設定により、繰り返しテストしている間はポップアップが再表示されないことがあります。新しい訪問としてテストする必要がある場合は、プライベートブラウジングウィンドウを使用するか、該当するブラウザストレージを消去してください。

ポップアップを更新または無効化する

ポップアップを更新するには、Maildroppaで開き、デザインまたは動作を編集してプレビューし、「Save changes」をクリックします。JavaScriptスニペットでは、引き続き同じフォームIDが使用されます。

一時的に表示を停止するには、アクションメニューから「Deactivate」を選択します。無効化しても、ポップアップと過去のレポートデータは保持されます。不要になった場合は、Webサイトからスクリプトまたはトリガー要素も削除してください。