フォームをライトボックスポップアップとして埋め込む方法
お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の
英語版を参照してください。
ライトボックスフォームは、ユーザーがあなたのウェブページ上で操作を行ったときに、ページ上にオーバーレイ表示されるポップアップフォームです。これにより、サイト訪問者の注意をフォームに引きつけることができます。例えば、製品情報や割引に関する最新情報を受け取るためにニュースレターの購読を顧客に求めたい場合、サイト上で一定時間閲覧した後に表示されるライトボックス形式のメール購読フォームを使用できます。
フォームをライトボックスポップアップとしてウェブページに埋め込むには、
- フォームビルダーで、共有する タブ > 埋め込み > ライトボックスポップアップフォーム に移動します。
- 開始する をクリックします。

- ポップアップで、ポップアップのサイズを設定 オプション(表示設定 内)を選択して、フォームの高さと幅を px 単位でカスタマイズし、サイトに合わせます。フォームが長い場合はスクロールバーが表示されます。
- 詳細プロパティ では、位置 ドロップダウンから、ライトボックスフォームをページ上のどこに表示するかを設定できます。
- ライトボックスフォームの読み込み時に適用する アニメーション スタイル(スライドイン / フェードイン)を選択できます。
- 枠線と色を適用 オプションを使用して、ライトボックスポップアップの枠線に色を付けることで、フォームの見た目をカスタマイズすることもできます。
- 起動設定 では、ポップアップ起動条件 の設定から、ライトボックスフォームをページ上のいつ表示するかを選択できます。
- また、サイトの読み込みと同時にフォームを事前読み込みし、選択した ポップアップ起動条件 によってライトボックスフォームが表示されるまでフォームを非表示にしておくこともできます。このオプションを有効にすると、サイト読み込み時のフォームの読み込み遅延を防ぐことができます。
- ページ上にポップアップ起動ボタンを配置し、クリックされたときにライトボックスフォームを表示するように設定することもできます。
- ライトボックスフォームに事前入力を行い、流入元を追跡するためのリファラーを追加したい場合は、
- 事前入力したいフォームの項目に対して、 項目エイリアス を設定します。
- URL パラメーターを含める オプションを選択します。
- パラメーター名(設定した項目エイリアス/リファラー名で表され、フォームがどのデータ元から送信されたかを追跡するためのもの)を、事前入力したいパラメーター値にマッピングします。

- コードを取得 をクリックし、続けて コードをコピー をクリックします。
- コピーしたコードを、ウェブページの HTML に貼り付けます。
ポップアップ起動条件
ページ読み込み時
ページと同時にフォームを読み込んで表示したい場合は、このオプションを選択します。サイトが読み込まれると同時にフォームも読み込まれ、表示されます。例えば、オンラインストアのページ読み込みと同時に、会員登録で時間限定の割引を提供するユーザー登録フォームを表示することができます。
ページ離脱意図時
訪問者がページから離れようとしたタイミングでフォームを表示したい場合は、このオプションを選択します。これにより、ページを離れようとしている訪問者の注意を引き戻すことができます。例えば、時間がないためにブログページから離れようとしている訪問者に対して、メールアドレスを入力してもらい、サイト上の重要な情報の PDF コピーを後で参照できるようメールで送信するフォームを表示することができます。
一定時間経過後
ユーザーがページ上で一定時間閲覧・操作した後にフォームを表示したい場合は、このオプションを選択します。フォームをページ上に表示するまでの遅延時間を秒数で入力します。例えば、ユーザー登録フォームがある場合、訪問者にサイトの内容にしばらく触れてもらってから、情報の入力を依頼するのが適切です。訪問者がコンテンツに十分影響を受け、ポップアップフォームに不快感を抱かないタイミングを選択してください。
ユーザーがサイトを一定の割合(%)までスクロールした後にフォームを表示したい場合は、このオプションを選択します。コンテンツをスクロールしていることは、訪問者がページに興味を持っているサインと考えられます。そのため、特定の位置までスクロールしたタイミングでフォームを表示することで、その興味をさらに高めることができます。例えば、ユーザーがコンテンツから必要な情報を得られるポイントやセクションを見極め、その位置を過ぎてスクロールしたときに購読フォームを表示する、といった設定が可能です。
埋め込みフォームに 画像アップロード 項目がある場合、回答者はウェブカメラを使って写真を撮影することができません。これを許可するには、埋め込みコードに次の内容を含める必要があります。
- allow='camera'
- ?zf_enablecamera=真
例: