JavaScriptを使ったフォームの埋め込み方法

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

JavaScript コードを使用すると、フォームを Web サイトのページ要素として埋め込むことができます。iframe と異なり、このオプションではフォームは外部リソースではなく、ページ要素として埋め込まれます。フォームの自動リサイズまたはカスタムの高さを設定することができます（JavaScript 埋め込みコードを使用）。

初期設定の JS コードを使用する

このオプションでは、ユーザーの操作に応じてフォームの高さを自動調整できます。このスクリプトを使用すると、フォームの 1 ページ目で表示されている項目に基づいて、フォームに初期の高さが設定されます。ユーザーがフォーム内を移動すると、ユーザーの操作に基づいて動的にサイズが変更されます。コードスニペットは、フォームページで表示されている項目に基づいてフォームの高さを自動的に計算します。

自動リサイズ用の JS コードを取得するには、

フォームビルダーで、共有タブに移動し、左側メニューの 埋め込みをクリックします。
Javascript をクリックします。
初期設定 JS コード の下で、コードをコピーをクリックします。
コピーしたコードを、フォームを表示したい位置の Web サイトの HTML に貼り付けます。

JS コードをカスタマイズする

自動生成されたJavaScript コードをカスタマイズして、フォームの固定の高さを設定したり、URL パラメーターを含めることができます。

固定の高さを設定する

このオプションを使用して、フォームに固定の高さを設定できます。フォームが長い場合は、スクロールバーが表示されます。

フォームの高さを固定するカスタマイズ済みの Javascript コードスニペットを使用するには、

フォームビルダーで、共有タブに移動し、左側メニューの 埋め込みをクリックします。
Javascript をクリックし、今すぐカスタマイズをクリックします。
固定の高さを設定する を選択し、希望するフォームの高さを入力します。
コードを取得 をクリックし、続けてコードをコピーをクリックします。
コピーしたコードを Web ページの HTML に貼り付けます。

URL パラメーターを含める

このオプションを使用して、次の URL パラメーターを含めることができます:

リファラー名: フォームがどこから入力されたか、データの参照元を追跡するのに役立ちます。

項目エイリアス : 事前に定義した値でフォーム項目を自動入力するのに役立ちます。

コードを取得 をクリックし、コードをコピーをクリックします。コピーしたコードを Web ページの HTML に貼り付けます。

メモ: すでに JavaScript コードを Web サイトに埋め込んでいて、後からカスタムの高さを使用したり、フォームに URL パラメーターを含めるように変更する場合は、必ず コードをコピー をクリックして、JS コードをカスタマイズした後に生成されたコードをコピーしてください。コピーしない場合、初期設定の自動リサイズ用コードスニペットを引き続き使用してしまう可能性があります。Web ページ内の既存のコードを、コピーしたコードに置き換えてください。

例:

height と width 属性を含める場合:

また、リファラーを追跡して、回答者がどの Web サイトからフォームを見つけたかを把握したり、埋め込みフォームに事前入力して、Web サイト訪問者の入力作業を簡単にすることもできます。