Google フォームをウェブサイトに埋め込む

埋め込みフォームとは、ライブフォームをあなたのページ上のフレーム内に表示したものです。訪問者はサイトを離れずに回答できます。

埋め込みを許可する

埋め込みは初期設定でオフなので、他のウェブサイトがフォームを表示することはできません。

1. サイドバーのフォームタブで、ライブフォームの設定の行にある鉛筆アイコンをクリックします
2. テーマタブで、ライブフォームにスタイルを適用がオフならオンにします
3. 埋め込みを許可をオンにします

スイッチの下に埋め込みコードのボックスが表示されます。

埋め込みコードをコピーする

コピーをクリックします。コードは 1 行です。

<script src="https://skyfield.cloud/embed.js" data-form="your-form" async></script>

フォームの ID が入っている、ご自身のダイアログのコードを使ってください。スクリプトは貼り付けた場所にフォームのフレームを置き、フレームの高さをフォームに合わせ続けるので、ページに 2 本目のスクロールバーは出ません。回答者がページを移動したとき、エラーメッセージが出たとき、完了画面に着いたときに、フレームは伸び縮みします。送信後は、フォームの先頭が見える位置までスクロールし直します。

1 つのページに複数のフォームを埋め込むには、フォームごとに 1 行ずつ貼り付けます。

ページに貼り付ける

ウェブサイトが HTML を受け付ける場所に、コードを貼り付けます。

• WordPress。 カスタム HTML ブロックを追加します。
• Wix、Squarespace、Webflow。 埋め込みまたはコード要素を追加し、そこにコードを貼り付けます。
• 自分で書いた HTML。 フォームを表示したい場所に貼り付けます。

サイトでスクリプトが使えない場合

ウェブサイトビルダーによっては <script> タグが削除されます。埋め込みコードの下にあるスクリプトが使えない場合は通常の iframe を使用をクリックし、代わりにそのコードをコピーしてください。

<iframe
  src="https://skyfield.cloud/forms/your-form?embed=1"
  width="100%"
  height="900"
  style="border:0"
></iframe>

通常の iframe の高さは固定です。height="900" を、フォームに合うピクセル数に変更してください。そうすれば、ページに 2 本目のスクロールバーが出ません。複数ページのフォームでは、最も長いページに合わせた高さが必要です。

なじませる

• 埋め込みを許可の下にある自分のウェブサイトになじませるをオンにします。フォームの背後のページの色がなくなり、カードがページ自体の背景の上に収まります。ルックのカード、枠線、影はそのままで、ライブリンクのページも変わりません。
• 保存する前に、サイト上の表示プレビューで、埋め込んだフォームがシンプルなページ上でどう見えるかを確認できます。
• 表示で、その行が不要なら Powered by をオフにします。非表示にできるのは埋め込みフォームだけです。
• 埋め込みフォームでは、フォームの周りのページの余白とコントロールの行が表示されません。

埋め込みをやめる

埋め込みを許可をオフにすると、他のウェブサイトはフォームを表示できなくなります。ライブフォームにスタイルを適用をオフにしても同じです。