2022.01.20「お客様アンケート」「イベントの出欠確認」などの用途で活用できるGoogleフォームの埋め込み方法を紹介しています。上記のような課題が生じるかと思います。本コラム記事では、ホームページやブログにGoogleフォームを埋め込みたい方に向けて、4つの埋め込み方法を紹介しています。関連記事Googleフォームでフォームを作成する方法については、以下のコラム記事で解説中です。まとめGoogleフォームの埋め込み方法は4つGoogleフォームの埋め込み方法には、下記4つの方法があります。リンク埋め込みHTMLコードGmail自作フォームとの連携それぞれの方法にメリットやデメリットがあるので、自社に合った方法を選定しましょう。リンク埋め込み出典:Jimdo1つ目は、Googleフォームのリンクをホームページ上に埋め込む方法です。リンクテキストによる埋め込みなので、自社ホームページデザインに合わせてGoogleフォームのレイアウトを変更する必要がありません。別ページに移動できるため、ボリュームが多いフォームに適しています。リンクテキストをクリックしてもらう必要があるので、利便性が低くなるのがデメリットです。Jimdo2つ目は、HTMLコードで埋め込む方法です。Googleフォーム上でレイアウト調整したHTMLを埋め込みます。Googleフォーム上では必要最低限のデザイン変更しかできないため、自社ホームページデザインとフォームデザインが合わない場合があります。Gmailに埋め込む出典:Gmail3つ目は、Gmailに埋め込む方法です。この方法では「Gmailに直接埋め込む方法」と「Gmail上にリンクを埋め込む方法」の2種類があります。メールにてアンケート調査を実施するときに最適な方法です。送信先が「Gmail以外」になるとフォームレイアウトが崩れて回答できません。そのため、送信先が「Gmailの場合のみ」有効な方法になります。自作フォームとGoogleフォームを連携させる4つ目は、自作フォームとGoogleフォームを連携させる方法です。自作したフォームデザインを活用し、機能面はGoogleフォームを利用する方法になります。Googleフォームのデメリットである、デザイン性の低さをカバーできる方法です。連携作業をするにあたり、マークアップ作業が必要になります。Googleフォームをリンクで埋め込む方法Googleフォームをリンクで埋め込む方法を紹介します。下記手順の通り実行しましょう。「送信」ボタンを選択しましょう。出典:Googleフォームホームページに埋め込むためのリンクを発行します。「リンクタブ」を選択して、リンクをコピーしましょう。画面左下の「URL短縮」を選択すると、リンクテキストを短くできます。出典:Jimdoフォームを埋め込みたいWebページに先ほどコピーしたリンクを張り付けましょう。【STEP3】テスト出典:Googleフォームリンクの埋め込みが完了したら、動作確認のためにテストを行いましょう。テストでは、下記2点を確認しましょう。リンクを選択するとGoogleフォームが立ち上がるかフォームを入力したらGoogleフォームの「回答」に反映されるかGoogleフォームをHTMLコードで埋め込む方法GoogleフォームをHTMLコードで埋め込む方法を紹介します。下記手順の通り実行しましょう。出典:Googleフォームホームページやブログに埋め込むGoogleフォームを作成します。HTMLで埋め込む場合は、フォームがそのまま反映されます。ホームページのデザインにできるだけ合わせたフォーム作成をおすすめします。ヘッダー部分に関しては、HTMLでフォームの埋め込みができません。フォームが完成したら、Googleフォームの画面右上にある「送信」ボタンを選択します。出典:Googleフォーム「<>」を選択してHTMLコードを発行します。出典:Googleフォーム続いて、フォームサイズを調整します。「幅」「高さ」の数字を入力すると、サイズを調整できるようになっています。サイズ調整が終わったら、HTMLコードをコピーしましょう。出典:Jimdoサイズ調整が上手くできない方は、埋め込み先のサイズを計測した上で、ピクセルを調整する方法がおすすめです。今回は上記画像の幅に合わせる方法を紹介します。Chromeであれば、合わせたい画像を「右クリック」→「検証」でデベロッパーツールを立ち上げて、ピクセル数を確認します。今回の画像であれば、サイズは「幅640px」×「縦231px」であることが分かります。出典:GoogleフォームGoogleフォームのHTML発行画面に戻り「幅640px」に合わせてコードを発行しましょう。縦サイズに関しては、フォームの質問項目によって適切なサイズがことなるので、その都度で確認しながら調整してください。【STEP4】テスト出典:Jimdoフォーム設置したいWebページに先ほどコピーしたHTMLコードを貼り付けて、動作確認のテストを実施しましょう。GoogleフォームをGmailに埋め込む方法GoogleフォームをGmailに埋め込む方法を紹介します。下記手順の通り実行しましょう。出典:GoogleフォームGmailに埋め込むためのフォームを完成させます。フォームの完成後は、Googleフォームの画面右上にある「送信」ボタンを選択します。出典:Googleフォーム「メールタブ」を選択して、フォームを送信します。下記内容を入力しましょう。最後に「送信」を選択すれば完了です。【STEP3】テスト出典:Gmail先ほど「送信」をするとき「フォームをメールに含める」にチェックを入れていると、上記画面のようなフォームが送信できます。出典:Gmail一方「フォームをメールに含める」のチェックを外すと、上記画面のようなフォームが送信できます。自作フォームとGoogleフォームを連携させる方法を紹介します。出典:GoogleフォームはじめにGoogleフォームを作成します。今回は、質問項目を「お名前」「メールアドレス」「お問い合わせ内容」の3点でフォームを作成しました。出典:Googleフォーム続いて、GoogleフォームのURLを取得します。画面右上の「送信」ボタンを選択して、URLをメモしておきましょう。【STEP2】HTMLでフォームを作成する次に、HTMLを活用してフォームを作成します。質問項目は、先ほど作成したGoogleフォームと同じものを作成してください。今回は、説明のために簡易的なフォームとなっています。完成後のフォームデザインは、HTMLを活用したフォームとなるので、この時点でデザインも完成させておくのがベストです。上記画像のHTMLコードは下記の通りです。value="Submit">Send</button></form>【STEP3】Googleフォームのソースを表示HTMLでフォームが作成できたら、先ほどメモしたGoogleフォームのURLにアクセスしましょう。次に「右クリック」→「ページのソースを表示(※)」を選択します。action」と入力します。action」から始まる下記コードが必要となるので、こちらを探してメモしておきましょう。data-is-first-page="true">実際に必要となるコードは、下記部分となります。action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSeE4zrA6IQHi763soQNMjQz3E2C5Zf-yOUoIKJjTCD71gVV-g/formResponse"ただし、コードの区切りが悪いので、貼り付けミスがないように「閉じタグ(>)」までコピーしておき、そのまま長いHTMLコードを貼り付けることをおすすめします。続いて、ソースからname値を取得してきます。nameは、要素に名前を設定するための属性です。今回のGoogleフォームで作成した質問項目が「お名前」「メールアドレス」「お問い合わせ内容」なので、ソースには下記3つのname値が存在します。[1581146510,&quot;お名前&quot;,null,0,[[367525723,[],true,[],[],null,[1063918481,&quot;メールアドレス&quot;,null,0,[[2023463226,[],true,[],[],null,[1317161844,&quot;お問い合わせ内容&quot;,null,1,[[603833351,[],true,[],[],null,「お名前」であれば、[1581146510,&quot;お名前&quot;,null,0,[[367525723,[],true,[],[],null,の中にある「367525723」の数字が必要です。この数字をHTMLで作成したフォームに貼り付けると「Googleフォーム」と項目が紐づきます。name値をみつけるには、Windowsなら「Ctrl」+「F」で検索窓を立ち上げて「お名前」「メールアドレス」「お問い合わせ内容」などの質問項を検索してみつけましょう。action」「name」を貼り付けます。「貼り付け前」「貼り付け後」のHTMLコードは下記の通りです。value="Submit">Send</button></form>冒頭のformタグにGoogleフォームでコピーした「action」を貼り付けます。inputタグに質問項目を「”name=”entry.○〇〇”」として貼り付けます。「お名前」からコピーしたHTMLコードは、以下になります。[1581146510,&quot;お名前&quot;,null,0,[[367525723,[],true,[],[],null,「367525723」の部分をコピーして「“name=”entry.367525723”」として貼り付けてください。【STEP5】CSSでフォームのデザインを調整するCSSでフォームのデザインを調整していきましょう。CSSを活用すれば、フォームの横幅や高さの変更ができます。入力欄やボタンの色やサイズの変更もできます。CSSの代表的なプロパティを例に挙げると、以下になります。要素の背景色を指定ホームページの配色に応じて、CSSでフォームをカスタマイズしていきましょう。CSSを変更するときには、パソコンやスマートフォンなど、画面サイズが違うデバイスでもフォームのデザインが崩れないか確認をしましょう。【STEP6】テスト最後に「Googleフォーム」と「HTMLで自作したフォーム」が紐づいているかテストします。自作したHTMLフォームをブラウザで開き回答を送信してみましょう。出典:Googleフォームサンクスページが表示されれば完了です。Googleフォームに回答が届いているかも確認しましょう。上記で紹介した方法は「Googleフォームの回答ページ」のカスタマイズなので、サンクスページは、上記画像のようにGoogleフォーム画面になってしまいます。これを変更する場合は、別途サンクスページ用のカスタマイズも必要です。【STEP7】サンクスページのカスタマイズフォーム回答ページのカスタマイズは、あらかじめサンクスページを作成してURLを発行する必要があります。上記画面のように簡単なサンクスページを作成しましょう。HTMLで作成する場合は、下記コードを参考にしてください。送信完了</h1><p>お問い合わせありがとうございました。type="button">TOPに戻る</button></a></div></div></body></html>続いて、HTMLフォームに下記2点コードを貼り付けます。onload="if(submitted){window.location='(サンクスページURL)';}"></iframe>サンクスページ移動までをカスタマイズしたHTMLコードは、下記の通りです。onload="if(submitted){window.location='サンクスページのURL入力';}"></iframe>コードの最下部にある「サンクスページのURL入力」に移動させたいページURLを入力します。指定したサンクスページに飛ばない場合は「URL」が間違っていないか再度確認しましょう。Googleフォーム埋め込みに関するQ&A最後にGoogleフォーム埋め込みに関するQ&Aを4つ紹介します。Googleフォームは、レスポンシブ対応されていません。ホームページに埋め込んだGoogleフォームをスマートフォンでみると、フォームの横幅が切れてしまいます。フォームの横幅が切れないよう、デバイスごとで最適なフォームデザインにするには、レスポンシブ対応の作業が必要になります。レスポンシブ対応したGoogleフォームにするには「HTML」や「CSS」などの知識が必要になります。関連記事レスポンシブ対応したGoogleフォームをホームページに埋め込む方法について詳しくは、以下のコラム記事をご覧ください。基本的に、Googleフォームにコンバージョンタグの設置はできません。コンバージョンタグは、フォーム記入後に表示されるサンクスページに設置しますが、Googleフォームでは実装が難しくなっています。出典:Googleフォーム『Googleフォーム上にコンバージョンタグ設置をしたい』という方は、サンクスページにURLのリンクを設置して、その遷移先にコンバージョンタグ設置する方法が可能です。ユーザー全員がURLをクリックする可能性は低いので、あくまで簡易的なコンバージョン計測となります。Googleフォームのサンクスページを編集するには、Googleフォーム上から「設定」→「プレゼンテーション」で変更できます。WordPressへの埋め込み方法は「リンク埋め込み」「HTMLコードで埋め込む」で手順がことなります。詳細は下記の通りです。※WordPressの旧エディタ(クラシックエディタ)を使って解説していきますリンク埋め込みリンク埋め込みは、通常のテキストを入力する「ビジュアルエディター」でリンクを埋め込みます。「テキスト」もしくは「ボタン」を設置した状態で「リンクタブ」を選択し、Googleフォームで発行したリンクを挿入すれば完了です。HTMLコードで埋め込むHTMLコードで埋め込む場合は「テキストエディター」を立ち上げます。Googleフォームで発行したHTMLコードを入力します。プレビューで確認して、反映していれば完了です。Q.埋め込みしたGoogleフォームが表示されないA.埋め込みしたGoogleフォームが「表示されない」「開けない」場合は、権限付与がされていない可能性があります。下記手順でGoogleフォームの権限を確認してみましょう。出典:Googleフォーム上記画像のように「制限付き」となっていると、他ユーザーからフォームを閲覧することができません。権限の変更をしましょう。出典:Googleフォーム「リンクを知っている全員」に権限を変更すれば完了です。まとめGoogleフォームの埋め込み方法4つを紹介しました。各埋め込み方法のメリットとデメリットは下記の通りです。マークアップ作業が必要リンク埋め込みは下記手順で実施します。【STEP3】テストGoogleフォームをHTMLコードで埋め込む方法は下記手順で実施します。【STEP4】テストGoogleフォームをGmailに埋め込む方法は下記手順で実施します。【STEP3】テスト自作フォームとGoogleフォームを連携させる方法は下記の通りです。【STEP4】HTMLフォームにコードを貼り付ける【STEP5】CSSでフォームのデザインを調整する【STEP6】テスト【STEP7】サンクスページのカスタマイズご自身に適した埋め込み方法で、ホームページやブログなどにフォームを設置していきましょう。美容業まずは無料でご相談ください。