GoogleフォームをWEBサイトやWordPressに埋め込みしたい
アンケート作成や問い合わせページを作成などに便利なGoogleフォーム。簡単にWebサイトやWordPressに埋め込める機能が用意されています。
WebサイトにGoogleフォームへのリンクを設置し、アクセスしてもらって回答してもらう方法もありますが、その場合はWebサイトに戻る手段がなくなるためあまりおすすめできません。
そういう場合はWebサイトに埋め込んで、わざわざGoogleフォームページにアクセスせずに回答できる状態にしておくのが一番です。
GoogleフォームをWEBサイトに埋め込みする方法
簡単なものでもいいので、あらかじめ埋め込み用の Google フォームを作成しておいてください。
既に埋め込み用のGoogleフォームが完成している前提で解説を進めます。
![Googleフォームの[送信]ボタンをクリック](http://s3.ap-northeast-1.amazonaws.com/static.aprico-media.com/production/imgs/images/000/049/703/original.png?1583571349)
Googleフォームが完成したら、[送信]ボタンをクリックします。
「フォームを送信」ウィンドウが表示されるので、一番右の送信方法を選択します。
すると埋め込み用のHTMLタグが表示されるので、それをコピーしてください。
後はウェブサイトのHTMLに貼り付けたら、このように表示されて自身のサイトでGoogleフォームで回答してもらえるようになります。
GoogleフォームをWordPressに埋め込みする方法
WordPressの場合もWebサイトに埋め込み方法と全く同じ方法でGoogleフォームを埋め込めます。
Webサイトに埋め込みする方法で解説したやり方でiframeタグを発行し、テーマやサイドバー、投稿ページなどに貼り付けるだけです。
ただし、貼り付けす際は一点だけ注意が必要で、必ずテキストエディターに切り替えた状態で貼り付けましょう。ビジュアルエディタに貼り付けてはいけません。
テキストエディタへの切り替えは、コチラで行えます。この切替ボタンがない場合は通常のテキストエディタですのでそのまま貼り付けても問題ありません。
埋め込みしたGoogleフォームのデザインのカスタマイズ
埋め込みするGoogleフォームの中身はCSSでデザインを変更することができません。
ですが、Googleフォーム側に簡単に編集できる設定項目が用意されており、カラーパレットアイコンをクリックすることでカスタマイズできます。
テーマカラーを変更する
Googleフォーム全体のテーマカラーは自由に変更できます。
デフォルトで用意されているテーマからは少ないですが、[+]ボタンを押すことでカラーパレットが起動し、好きな色を設定できるようになっています。
フォントを変更する
フォントの変更も簡単です。
用意されているフォントこそ少ないですが、「ベーシック・デコラティブ・フォーマル・プレイフル」の4種類から選択できます。
高さを変更する
「フォームの送信」で発行された埋め込みタグをそのまま埋め込むと、高さが足りずにスクロールバーが表示される状態になってしまうことがあります。
この場合は、埋め込みタグ発行時に高さの数値を増やすようにしてください。
ここを変更することで、スクロールバーが必要なくなるくらい高さを広げることができます。
レスポンシブ対応させる
Googleフォームはレスポンシブに対応しておらず、レスポンシブ設定用の項目もありません。
そのため、レスポンシブに対応させることだけは埋め込むサイトで行う必要があります。
といっても難しいことではなく、いかのCSSを貼り付けるだけで大丈夫です。
iframe[src^="https://docs.google.com/forms/d/e"]{
width:100%;
}
詳しい解説は割愛しますが、レスポンシブ対応させたい場合は上記CSSを使ってください。
ちなみに、Googleフォームにはヘッダーに画像を設定することが可能ですか、埋め込み時はヘッダー画像が表示されません。どうしてもヘッダー画像を使いたい場合はGoogleフォームのリンクを共有し、直接Google フォームにアクセスしてもらうようにしましょう。