Googleフォーム 無料 でつかえる 便利なツールですよね。アンケート、出欠表や、クイズ、診断などのコンテンツ、そして、お問い合わせや、プレゼントの応募フォーム、エステなどの予約フォームなど、幅広く活用できます。
しかし、URLが、Googleフォームだと、自社サイトのものでないので、違和感を感じるという方もいらっしゃいます。そんなお悩みの方に、おすすめの解決策です。Googleフォームは、かんたんにWebサイトへの埋め込めるのです。
Googleフォーム 管理画面から、Youtubeの動画埋め込みのように、googleフォームの埋め込みタグをコピーして、自社のWebサイトのhtmlファイルに貼り付けるだけです。
この記事では、Googleフォームを自社のホームページへ埋め込む方法、そして、googleフォームのデザインを変更する方法をまとめました！スマホ対応を意識して、レスポンシブデザインでの埋め込みができるように解説していきます。
Googleフォーム 埋め込む方法
さっそくですが、Googleフォームを、自社のホームページに埋め込む方法をまとめていきます。冒頭で書いたとおり、Webサイトへ埋め込む方法は、Youtubeの動画埋め込み同様、簡単にできます。googleフォームの管理画面から、HTMLコードをとってきて、掲載したいWebサイトのHTMLファイルに張り付けるだけです。
ただ、せっかくなので、スマートフォン対応させておきましょう。レスポンシブで見れるように、ちょっとだけ、コードを書き換えましょう。
Googleフォームを埋め込む手順は以下の通り
- googleフォームでフォームを作る
- 設定確認
- 埋め込み用HTMLコードを取得
とっても簡単に3つの手順で、Googleフォームを埋め込むまでの作業が完了します。また、今回は、スマートフォン対応のされたレスポンシブデザインのページで埋め込む設定で解説していきます。
googleフォームでフォームを作る
googleフォーム 公式ホームページ
https://www.google.com/intl/ja_jp/forms/about/
いつものように、googleフォームでフォームを作りましょう。特に気にせず、進めて下さい。メールアドレスなども、普通に取得する形式で、フォームを作ってしまって、だいじょうぶです。
Googleフォーム 設定確認
そして、googleフォームでフォームを作ることが完了したら、Googleフォームの管理画面右上にある歯車アイコンをクリックしてください。
ログインが必要の箇所で、回答を1回に制限する にチェックが入っていないようにしておいてください。
通常はチェックは入っていないはずです。
Googleフォーム 埋め込み 用 HTMLコード取得
埋め込み 用 HTMLコード 取得 は、送信ボタンを押せばできます。
ここで出てくるウィンドウで、送信方法の横にある < > マークをクリックしてください。
ここに表示されるiframeタグを使うので、全部コピーしてください。ちなみに、ショートカット的に、コピーボタンをクリックすれば、コード全部をコピーができます。コピーしたら、ワードでも、テキストエディタでもいいので、文字変換されないソフトで保管しておいてください。
そして、保存したコードから、width= 640 という記述のされている部分を治しましょう。修正する方法は、単純で、width:100% に書き換えるだけです。
あとは、自社のホームページに埋め込むだけです。入れたいページのhtmlファイルに、上記の修正したコードを張り付けするだけです。
Googleフォーム デザイン変更方法
Googleフォームを自社のホームページに埋め込む方法を記載しました。しかし、レスポンシブ対応（スマホ対応）はできていても、デザインがね、というケース、ありますよね。せっかくの自社ホームページなので、デザインのクオリティはあげておきたいところ。
また、デザイン性だけでなく、使いやすいUIにしないと、アンケートなどを入力しようとしてくれたユーザーが逃げてしまうかもしれません。
そこで、デザインをホームページのwebデザインにあうようにする、そんなデザイン変更方法、カスタマイズ方法について、解説していきます。
デザイン変更方法 は 自分でHTMLのフォームを作ること
Googleフォームは、Googleフォーム自体で、フォントや、カラーなどを変える機能を持っています。しかし、各入力項目の大きさなどは、制御しきれない部分があります。
そこで、デザイン変更をしたい！と思うのですが、そのためには、自分で、HTMLのフォームを作って、そことGoogleフォームを連携させる必要があります。そして、それが1番簡単にデザインカスタマイズしやすい方法です。
実際、自分で作ったHTMLのフォームをGoogleフォームと連携させる方法は、かんたんで、要するに、自分の作ったフォームの送信先などを、Googleフォームにすれば、いいだけの話なのです。
それゆえ、自分でHTMLフォームを作るときには、Googleフォームと同じ項目のフォームを作ってください。
HTMLフォームは、いろいろなソフトで作れると思うので、ツールで作ってみてもいいかもしれません。
具体的な googleフォーム コード設定方法
さて、HTMLフォームを自分で作ったら、Googleフォームとの連携のために、Googleフォームの送信先URLを確認しましょう。
Googleフォームでいつものように送信ボタンをクリックして、チェーンのアイコンをクリック。
すると、ここでURLが表示されます。実は、このURLが、Googleフォームで送信後に遷移するページのURLなのです。
これを自分で作ったHTMLのフォームの遷移先として登録しましょう。
次に、フォームのアクションをするコードを取ってきます。公開したGoogleフォームから、ソースを表示させます。CTRL＋Uキーで表示されるはずです。
あとは、ソースの中で、action というキーワードを検索して、Elements内に存在する「form action= /formResponse 」を探します。
そして、この/formResponseのURLをコピーして、自分のHTMフォームの中のformタグにペーストします。
今度は、ソースの中で、entryで検索して、Googleフォームのフォーム項目の数、name=entry. をピックアップして、コピペしていきます。
nameタグの中身は、自分で作ったHTMLのフォームと合わせてください。
はい、これで完成です。
自分で作ったHTMLファイルが、Googleフォームの機能を活用できるようになりました。あとは、この自分で作ったHTMLフォームのデザインをCSSなどで整えるだけです。
最初に、ソフトで作ってあれば、CSSの調整もしやすいと思います。
Googleフォーム デザイン変更 注意点
上記で、Googleフォーム デザイン変更 が できると思いますが、大前提として、Googleフォームの仕様が変更される可能性があるので、注意しましょう。
プログラムは提供社の仕様変更により、大きく変わる可能性があります。その結果、ある日突然、埋め込んだ or デザイン変更した Googleフォームを使えなくなる！なんてことも、ありえます。
ソースコードが変わる可能性があるため、その点のリスクは把握しておきましょう。
そのため、googleフォーム以外での、フォームの制作もできるような状況を作っておきましょう。
- 有料サービスの利用
- ワードプレスでのメールフォーム作成
などです。
【サーチコンソール】google 検索結果 から ページを 消す方法 炎上や間違ったページの削除方法
■ Google フォーム 人気の関連記事
Google フォーム を もっと知りたい方向けに！人気のGoogle フォーム関連記事
【手軽】Googleフォーム 定員 設定方法 参加上限人数 のある イベント 申し込みフォームへ
【無料】Googleフォーム 自社ホームページ 埋め込む方法 デザイン 変更 も 簡単！
【便利！？】Googleフォーム 添付ファイル 画像添付 方法 ファイルアップ方法
便利！Google フォーム 応募 締め切り スケジュール設定 formLimiter
【簡単】google フォーム 自動返信メール 設定方法 企業 問い合わせフォーム に
【仕事術】Googleフォーム スプレッドシート 連携 方法 レポート 付加価値 アップ！
【管理しやすい】Google フォーム QRコード 作成 方法 アンケート調査 出欠確認 に
【集計 便利】Google フォーム 活用事例 13選 みんな の 使い方 利用目的 まとめ
【加速】Googleフォーム メール通知 で 回答 結果 確認！複数アドレス 送信方法 も 解説
【重要】Google フォーム セキュリティ リスク 対応策 リスク軽減 方法 を 簡単解説！
【便利】Google フォーム URL 設定 基礎知識 開けない とき 対応方法 など
【解決】Google フォーム オーナー変更 コピー で アンケート フォーム 簡単作成
【可視化】Googleフォーム 集計 グラフ スプレッドシート 連携 で 見やすく
【おすすめ】Googleフォーム アプリ スマホ でも 簡単 アンケートの作り方
googleフォーム 注文フォーム 作り方 サンプル おすすめ設定 いかがですか？
【簡単5分】Googleフォーム 複数回答 質問 アンケート 作成方法 無料ガイド