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