ポップアップフォームの作成と表示

公開日: 2026年7月16日 · 最終更新日: 2026年9月12日 · 著者 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サイトの案内では、まずは毎日または毎週の頻度に設定するのがおすすめです。

表示頻度の管理に使う情報は、訪問者のブラウザに保存されます。そのため、別のブラウザやプライベートブラウジングウィンドウを使った場合、またはブラウザのストレージを消去した場合は、テスト結果が異なることがあります。

離脱を検知して表示する

訪問者がページの外へポインターを移動し、離脱しようとしている可能性があるときにポップアップを開くには、「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に置き換えます。Webサイトビルダーが提供する別のポップアップの中に、Maildroppaのポップアップを配置しないでください。

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

登録フローを紐付ける

ビルダーのヘッダーで、割り当てられている登録フローを確認します。このフローで、フォーム送信直後の応答、ダブルオプトインの確認メール、登録確認後の結果を設定します。

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

プレビューと保存

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

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

ポップアップを有効化し、自動表示用に埋め込む

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

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

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

このセクションの手順は、設定した待ち時間や離脱の検知に基づいて、ポップアップを自動的に開く場合に適用されます。ボタン、画像、リンクのクリックでポップアップを開く場合は、

の手順に従ってください。

一般的な埋め込み手順については、埋め込みフォームの作成と設置をご覧ください。

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

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

1. 設定した待ち時間を確認します。
2. 閉じるボタンと、フォームの外側をクリックしたときの動作をテストします。
3. 離脱時の表示を有効にしている場合は、ページの外へポインターを移動して動作をテストします。
4. 手動トリガーを有効にしている場合は、設定したページ要素をクリックして動作をテストします。
5. 幅の狭い画面でレイアウトを確認します。
6. フォームを送信し、確認メールから登録を確定するダブルオプトインの手続きを完了します。
7. Maildroppaで購読者と非表示タグを確認します。

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

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

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

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