TayoriBlog

  • このエントリーをはてなブックマークに追加

Googleフォームをwebサイトに埋め込む方法を3ステップで解説!サンプル付き

Googleフォームで回答を集めるには、リンク共有やWebサイトへのフォームの埋め込みなどの方法があります。特にWebサイトへの埋め込みは、フォームへの迅速なアクセスが可能で回答率の向上が見込める手段です。本記事では、Googleフォームの埋め込み方法を解説。Webサイトへの埋め込みのメリットや活用シーンも簡単に紹介しています。フォームを設置する目的に応じて埋め込みを含めた共有方法を検討し、効果的なフォーム運用が実現しましょう。

【目次】

  1. Googleフォームを埋め込む目的と活用例
  2. Googleフォーム埋め込みの4つの方法
  3. まとめ

Googleフォームを埋め込む目的と活用例

GoogleフォームをWebサイトに埋め込む主な目的は2つあります。1つ目は「回答へのハードルを下げること」です。フォームを埋め込むことで、回答者は別ページへ移動することなく回答できるます。回答へのハードルも下がるため、より多くの回答が期待できます。2つ目は「デザインの統一」です。Webデザインに合わせてフォームをカスタマイズすることで、違和感なくフォームを提供できます。

具体的な活用例として、以下のようなものがあります。

・アンケート
・イベントの申し込み
・問い合わせ窓口
・資料請求

WebにGoogleフォームを埋め込むことで、ユーザーとのスムーズなコミュニケーションと効率的なデータ収集が可能となるでしょう。

Googleフォーム埋め込みの4つの方法

Googleフォームをプラットフォームに埋め込む方法は複数あります。ここでは4つの方法について解説します。

方法1:iframeで埋め込む

Googleフォームの埋め込みコードを発行し、該当のWebページのHTMLコードに埋め込む方法です。活用場面として、ウェブサイトやブログ、社内ポータルなどが挙げられます。ただし、フォームのサイズによってはスクロールバーが表示されることがあります。Webデザインとの兼ね合いでスクロールバーが気になるのであれば、サイズを調整しましょう。ただし、ファイルや画像をアップロードを求める質問項目が含まれている場合、埋め込みコードを発行できません。この場合は、リンク共有やEメールなどの共有方法を検討しましょう。

方法2:リンクとして埋めこむ

GoogleフォームのURLをコピーして、Web上のテキストやボタンにリンクとして設定する方法です。Webのデザインを損なうことなく、シンプルにフォームへの導線を確保できます。メールマガジンやSNS投稿、ウェブサイトのバナー広告などフォームそのものを表示するスペースがないプラットフォームから、フォームへ遷移させたい場合に最適です。「詳しくはこちら」「アンケートに回答する」といった文言と組み合わせることで、ユーザーの行動を効果的に促せます。ただし、リンクをクリックする場合、回答者はプラットフォームから離れてGoogleフォームのページに移動しなくてはなりません。回答までのステップ数が若干増えるのが難点です。

方法3:Eメールに埋めこむ

Googleアカウントに登録しているメールアドレス宛であれば、GoogleフォームをEメールに表示させることができます。受信者はメールを開いてすぐにフォームへアクセスできるので、回答までのステップが少なくなり回答率の向上に繋がります。

方法4:プラットフォーム特有の機能で埋め込む

「WordPress」「Googleサイト」など一部のプラットフォームでは、Googleフォームを埋め込むための機能を提供しています。プラットフォームによりますが、専門知識がなくてもコピー&ペーストでフォームを表示できるケースが多くみられます。ブログやホームページ作成ツールなど特定のプラットフォームを利用している場合は、Googleフォームを埋め込むための機能があるかを調べてみましょう。

方法1:iframeで埋め込む手順

iframeでの埋め込みは、WebサイトにGoogleフォームを表示させる一般的な方法です。Googleフォームをiframeで埋め込む手順について解説します。

Step1:Googleフォームを作成する

新規フォームを作成するか、既存のフォームを開きます。必要な質問項目を追加し、各種設定を行ってフォームを完成させましょう。

Step2:埋め込みコードを取得する

フォームの編集画面右上にある「⋮」をクリックし、「HTMLを埋め込む」を選択。iframeタグで記述された埋め込みコードが表示されます。必要に応じて幅(width)と高さ(height)を調整してください。デフォルト値は幅640px、高さ480pxに設定されています。設定が終わったら、埋め込みコード全体をコピーしましょう。

Step3:サイトに埋め込む

WebサイトのHTMLファイルを開き、フォームを表示したい位置に埋め込みコードを貼り付けます。その後、ファイルを保存してウェブサイトにアップロードしましょう。スマートフォンなどのモバイル端末で正しく表示させるには、iframeの幅を「100%」に設定することで親要素の幅に合わせてサイズを自動調整してくれます。

方法2:リンクとして埋めこむ手順

ここではテキストリンクとして埋め込む手順について説明します。

Step1:リンク設定するテキストを選択

該当のHTMLファイルで、「詳細はこちら」「当社のウェブサイト」などフォームへのリンク設定するテキストを選択します。

Step2:リンクを設定する

選択したテキストを<a>タグで囲み、href属性にリンク先のURLを指定します。

<a href="リンク先のURL">リンクを設定するテキスト</a>

Step3:HTMLを保存・反映

記述したHTMLコードを保存し、Webページに反映しましょう。ページを更新すると、テキストリンクが有効になっているはずです。

方法3:Eメールに埋めこむ手順

Googleアカウントに登録しているメールアドレス宛であれば、Googleフォームをメール通知に埋めこむことができます。

Step1:Googleフォームを開く

共有したいGoogleフォームを開きます。

Step2:フォームの共有画面を開く

フォーム編集画面の右上にある「公開」をクリックすると、オプション画面が開きます。その画面の回答者の欄に表示されている「管理」をクリックして「フォームの共有」画面を開きます。

Step3:フォームを共有するメールアドレスを入力する

「ユーザー、グループ、カレンダーの予定を追加」欄にフォームを共有するメールアドレスを入力。必要に応じて件名やメッセージを編集したら、「送信」ボタンをクリックしましょう。送信先では、メールにフォームが表示されているはずです。

方法4:プラットフォーム特有の機能で埋め込む手順

WordPressやGoogleサイトなどのプラットフォームには、Googleフォームを簡単に埋め込むための専用機能やブロックが用意されています。ここでは、WordPressとGoogleサイトにおける埋め込み手順を3ステップでご説明します。

◼️WordPress

Step1:Googleフォームの埋め込み用コードを取得

まず、埋め込みたいGoogleフォームの埋め込み用HTMLコードを取得します。

Step2:投稿または固定ページを編集

WordPressの管理画面で、フォームを設置したい投稿または固定ページを開いて編集モードに入ります。

Step3:「カスタムHTML」ブロックを追加してURLを貼り付け

ブロックエディターの「+」ボタンをクリックして「カスタムHTML」ブロックを追加し、ステップ1でコピーした埋め込み用HTMLコードを貼り付けます。プレビューで正しくフォームが表示されているか必ず確認してください。クラシックエディターを利用している場合は、編集画面に埋め込みコードを直接貼り付ける方法が一般的です。

◼️Googleサイト

Step1:Googleフォームを作成

Googleサイトで使用するフォームを新規作成するか、既存のフォームから選択します。

Step2:サイトの編集画面を開く

Googleサイトの編集画面にアクセスします。

Step3:「挿入」から「フォーム」を選択して追加

画面右側の「挿入」メニューから「フォーム」を選択します。表示されるリストから目的のフォームを選び、「挿入」をクリックすれば完了です。これでサイト上にフォームが表示されます。

まとめ

Googleフォームの埋め込みは、回答へのハードルを下げることとWebデザインとの統一を図るために効果的な手段です。埋め込み方法にはiframeコードを使用する方法をはじめ、Eメールでの通知画面に表示する方法、WordPressやGoogleサイトなどのプラットフォーム特有の機能を活用する方法など複数の選択肢があります。用途や環境に応じて最適な方法を選択してください。Tayoriのフォームは、iframeやリンク設置だけではなくHTML設置によってもWebサイトにフォームを表示させることができます。気になる方は、下記リンクより資料をご覧ください。

>>Tayoriサービス紹介資料のダウンロード【無料】はこちら

>>1分で登録完了「Tayori」を無料でスタート

関連記事

3分で読める !
カスタマーサポートお役立ち資料

無料ダウンロード

閉じる