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

"Google Formsをお問い合わせフォームとして挿入、埋め込み、または追加するにはどうすればいいですか"- Google Docs Editors Community

これはよくある質問で、Googleのフォーラムでは18人がウェブサイトのお問い合わせフォームについて尋ねています。Google Formsのフォームへのリンクは訪問者をサイトの外に連れ出し、戻ってこない人もいます。GoogleのEmbed HTMLなら訪問者はページにとどまりますが、フォームは専用のスクロールバーとGoogleのフッターが付いた固定の箱に入り、変えられるのは幅と高さだけです。Formfacadeなら、埋め込みコードを1つページに貼り付けるだけで、フォームはiframeなし、Googleのブランド表示なしでそこに表示されます。回答は引き続きGoogle FormsのフォームとGoogle Sheetsに届くので、並べ替えて誰に先に電話するかを決められます。

以下は、Google Formsのフォームをウェブサイトに載せる2つの方法と、それぞれの不十分な点です。

Google FormsのEmbed HTML

  • Google Formsのフォームを開き、右上の⋮ Moreアイコンをクリックします
  • Embed HTMLを選びます
  • HTMLコードをコピーし、フォームを置きたいウェブページに貼り付けます
iframeのコード、Width 640、Height 384が表示されたEmbed HTMLダイアログ。Copyに印が付いています
不十分な点：変えられるのは幅と高さだけです。フォームにはGoogleの見た目と下部の注意書きが残り、長いフォームは自分の箱の中でスクロールします。

Formfacadeの埋め込みコード

  • 開いたページでフォームに名前を付け、Embed formをクリックし、Proceedをクリックします。
  • Shareタブの「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のブランド表示なしでウェブページに表示されます。不十分な点：無料プランでは小さなFormfacadeのクレジット表示が入り、消すには有料プランが必要です。

ウェブサイトに合わせるお手伝いが必要ですか？

埋め込みコードの画面で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の設定をウェブサイトに合わせます
  • この色を保つには「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なら、埋め込みコードを1つウェブページに貼り付けるだけで、フォームはiframeなし、Googleのブランド表示なしでそこに表示され、回答は引き続きGoogle Formsのフォームに届きます。フォームを作成して、上の手順を進めてください。ご不明な点があれば、サポートにご連絡ください。

最終更新：