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

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

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

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

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

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

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

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

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

固定の高さを設定する

このオプションを使用して、フォームに固定の高さを設定できます。フォームが長い場合は、スクロールバーが表示されます。
フォームの高さを固定するカスタマイズ済みの Javascript コードスニペットを使用するには、
  1. フォームビルダーで、共有タブに移動し、左側メニューの 埋め込みをクリックします。
  2. Javascript をクリックし、今すぐカスタマイズをクリックします。
  3. 固定の高さを設定する を選択し、希望するフォームの高さを入力します。

    Customizing the JS Code - Set Fixed Height
  4. コードを取得 をクリックし、続けてコードをコピーをクリックします。

    Copy Code
  5. コピーしたコードを Web ページの HTML に貼り付けます。

URL パラメーターを含める

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

  • リファラー名: フォームがどこから入力されたか、データの参照元を追跡するのに役立ちます。
    Referrer Name
  • 項目エイリアス : 事前に定義した値でフォーム項目を自動入力するのに役立ちます。
    Field alias
コードを取得 をクリックし、コードをコピーをクリックします。コピーしたコードを Web ページの HTML に貼り付けます。
Notes
メモ: すでに JavaScript コードを Web サイトに埋め込んでいて、後からカスタムの高さを使用したり、フォームに URL パラメーターを含めるように変更する場合は、必ず コードをコピー をクリックして、JS コードをカスタマイズした後に生成されたコードをコピーしてください。コピーしない場合、初期設定の自動リサイズ用コードスニペットを引き続き使用してしまう可能性があります。Web ページ内の既存のコードを、コピーしたコードに置き換えてください。
例:

<script 種類='text/javascript'src=' https://forms.zohopublic.com/zylker/form/Workshop/jsperma/136dhmA8E0' id='ZFScript'></script>

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

<script 種類='text/javascript'src=' https://forms.zohopublic.com/zylker/form/Workshop/jsperma/136dhmA8E0? height=700px&width=100%25 'id='ZFScript'></script>

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

画像アップロード項目で Web カメラオプションを使用できるフォームを埋め込むには？

埋め込みフォームに 画像アップロード項目がある場合、回答者は Web カメラを使用して画像を撮影することはできません。これを許可するには、埋め込みコードに次の内容を含める必要があります:
  1. allow='camera'
  2. ?zf_enablecamera=真
例:
enable webcam in an embedded for

iframe より JavaScript コードを優先すべきタイミング

提供される iframe コードを使用してフォームを Web ページに埋め込む場合、フォームの高さと幅は自動計算されます。これはあくまで概算値のため、フォームが Web ページ上で正しく表示されない可能性があります。

このような場合は、次の問題を解消できる JavaScript コードの使用をおすすめします。

  • フォームの周囲に余白（ホワイトスペース）が多すぎる
  • フォームの一部が、埋め込み時に途中で切れてしまう
  • フォームがスクロールバー付きで埋め込まれてしまう
  • ページごとに長さが異なるため、スクロール量が変わり、フォームの見た目が不揃いになる
JavaScript コードを使用すると、フォームの寸法は Web ページのスタイルに合わせて自動計算されます。