ウェブサイトにGoogle Formsを埋め込むには？

"Google Form にリンクするのではなく、ウェブサイトに直接埋め込むことはできますか？"- Google Docs Editors Community

問い合わせフォームや登録フォームは、リンクの先ではなく自分のウェブサイトに置きたいものです。Google Form へのリンクは訪問者をサイトの外へ送り出し、戻ってこない人もいます。Google 自身の埋め込みコードなら訪問者はページにとどまりますが、フォームは独自のスクロールバーを持つ固定の枠に入り、見た目は Google のままです。Formfacade なら、埋め込みコードを 1 つウェブページに貼り付けるだけで、iframe も Google のブランドもなしにフォームがそこに表示され、回答はこれまでどおり Google Forms と Google Sheets に届きます。

Google Form をウェブサイトに置く 3 つの方法と、それぞれの足りない点を紹介します。

1. フォームにリンクする

Google Forms からフォームのリンクをコピーし、ボタンやメニューに置きます。すぐに設定できますが、訪問者はフォームに入力するためにウェブサイトを離れ、戻ってこない人もいます。

2. Google の Embed HTML を貼り付ける

Google Form を開き、右上の ⋮ More アイコンをクリックします。Embed HTML を選び、HTML コードをコピーして、フォームを置きたいウェブページに貼り付けます。
iframeのコード、Width 640、Height 384が表示されたEmbed HTMLダイアログ。Copyに印が付いています
訪問者はページにとどまりますが、変更できるのはフォームの幅と高さだけです。フォームは独自のスクロールバーを持つ固定の枠に表示され、下部には Google のブランドと注意書きが入ります。

3. Formfacade で埋め込む

  • フォームを作成をクリックし、フォームに名前を付け、Build form、Proceed の順にクリックします。
  • 「Share」タブをクリックし、Embed をクリックします。
  • 「Where do you want to embed this form?」で「My website is different from above」を選び、Next ボタンをクリックします。
ShareのEmbedタブで「Where do you want to embed this form?」と尋ねている画面。Embed、My website is different from above、Nextに印が付いています
  • この埋め込みコードをコピーし、フォームを埋め込みたいウェブページに貼り付けます。
ShareのEmbedタブで埋め込みコードが枠内に表示された画面。コードに印が付いています
iframe も Google のブランドもない状態で、フォームがウェブページに表示されます。
フォームをウェブサイトに合わせる手助けが必要な場合は、Next をクリックし、「Yes, I want to customize UI like my website」を選んで Next をクリックします。
Embedタブで「Have you embedded the form?」と尋ねている画面。「Yes, I want to customize UI like my website」が選択されて印が付き、Nextにも印が付いています
ページのURLとメッセージを入力してSubmitをクリックします。私たちのチームからご連絡し、ご依頼をお手伝いします。
Embedタブで「Which page did you embed the form?」と「Do you need any help?」を尋ねている画面。メッセージ欄とSubmitに印が付いています

フォームをウェブサイトの色とフォントに合わせるには？

  • 「Preview」タブをクリックします。
  • ウェブサイトに合わせて Primary color、Background、Typography settings を設定します。
  • この色を保存するには「Apply to all forms」ボタンをクリックします。このフォームだけでなく、アカウント内のすべての公開中のフォームが変わります。埋め込みコードはこのボタンを押さなくても動きます。
  • フォームのレイアウトを変更するには、Layout タブをクリックします。そこのボタンは「Apply to this form」です。
PreviewのThemeタブ。Primary color、Background、Typographyの設定があり、色のボックスとApply to all formsボタンに印が付いています

ウェブサイトがWordPress、Squarespace、Shopify、Wixの場合は？

Google Forms標準の埋め込みはウェブサイト上で崩れてフォームが切れることがあるため、代わりにFormfacadeの埋め込みコードを使ってください。ウェブサイトが一覧にあれば選び、表示される手順に従います。Shopify、Wix、その他のウェブサイトの場合は「My website is different from above」を選びます。Google FormsをWordPressに埋め込む方法、Google FormsをSquarespaceに埋め込む方法、Google FormsをWixに埋め込む方法、Google FormsをGoogle Sitesに埋め込む方法もあわせてお読みください。

まとめ

リンクは訪問者をウェブサイトの外へ送り出し、Google の Embed HTML では Google の見た目のまま固定の枠に入ります。Formfacade なら、埋め込みコードをウェブページに貼り付けると、iframe なしでフォームがそこに表示されるので、訪問者はウェブサイトにとどまります。フォームを作成して、上のステップを完了してください。ご不明な点があれば、サポートにご連絡ください。

最終更新：