お問い合わせフォーム、完成イメージ
![Googleフォーム、お問い合わせフォーム](https://i0.wp.com/skill.u-ff.com/wp-content/uploads/2021/10/2be02c8b432591caa9dfc2bd9bb99bef.png?resize=517%2C737&ssl=1)
Googleフォーム、お問い合わせフォーム
上記のようなものを作ります。
Googleフォームでお問い合わせフォームを作る方法
Googleフォームを開く
Googleフォームへアクセス。
Googleにログインしていない場合はログインする。
新しいフォームを作成
![Googleフォーム、新しいフォームを作成](https://i0.wp.com/skill.u-ff.com/wp-content/uploads/2021/10/87d309dc1313b5c4c527575931b35063.png?resize=800%2C510&ssl=1)
Googleフォーム、新しいフォームを作成
Googleフォームのホーム画面が開くので、「新しいフォームを作成」から「空白」を選びましょう。
無題のフォーム
![Googleフォーム、無題のフォーム](https://i0.wp.com/skill.u-ff.com/wp-content/uploads/2021/10/e8052608ea692dbdc23b6103c7d0d22e.png?resize=800%2C367&ssl=1)
Googleフォーム、無題のフォーム
「無題のフォーム」というのが開きます。
「無題のフォーム」「フォームの説明」と書かれた部分の「無題のフォーム」の方をクリックしましょう。
フォームのタイトルを設定
![Googleフォーム、タイトルを設定](https://i0.wp.com/skill.u-ff.com/wp-content/uploads/2021/10/32479041c2c3bd65940d770fb778ec1b.png?resize=800%2C371&ssl=1)
Googleフォーム、タイトルを設定
「無題のフォーム」の代わりに、「お問い合わせ」と入力します。
無題の質問
![Googleフォーム、無題の質問](https://i0.wp.com/skill.u-ff.com/wp-content/uploads/2021/10/cbb252029386ea76f46e7ec98917594a.png?resize=800%2C507&ssl=1)
Googleフォーム、無題の質問
「無題の質問」という部分をクリックすると、上記のような状態になります。
質問を設定(名前)
![Googleフォーム、名前・記述式・必須](https://i0.wp.com/skill.u-ff.com/wp-content/uploads/2021/10/279cf0b5f5cd6560b26b976ccfeafecf.png?resize=800%2C475&ssl=1)
Googleフォーム、名前・記述式・必須
「質問」欄に「名前」と入力、
「質問のタイプ」はプルダウンから「記述式」を選択、
「必須」の項目を「オン」にしましょう。
質問を追加
![Googleフォーム、質問を追加](https://i0.wp.com/skill.u-ff.com/wp-content/uploads/2021/10/b3a60a1f3396644387ec65459c02cc95.png?resize=800%2C458&ssl=1)
Googleフォーム、質問を追加
画面の右側にある「+」マークをクリックすると、「質問を追加」できます。
「質問」とは、お問い合わせ時にユーザーが入力する「回答」欄のことです。
サイト側は「あなたの『名前』は何ですか?」と「質問」する、
ユーザーは「『山田太郎』です」と「回答」する。
必要な項目の数だけ質問を追加していくことになります。
質問を設定(メールアドレス)
![Googleフォーム、メールアドレス・記述式・必須](https://i0.wp.com/skill.u-ff.com/wp-content/uploads/2021/10/cdbadab670d3dfc94a068cd2de061854.png?resize=800%2C590&ssl=1)
Googleフォーム、メールアドレス・記述式・必須
「質問」欄に「メールアドレス」と入力、
「質問のタイプ」はプルダウンから「記述式」を選択、
「必須」の項目を「オン」にしましょう。
質問を設定(メッセージ)
![Googleフォーム、メッセージ・段落・必須](https://i0.wp.com/skill.u-ff.com/wp-content/uploads/2021/10/f36c54ebadc623274a715128e3088480.png?resize=800%2C721&ssl=1)
Googleフォーム、メッセージ・段落・必須
「質問」欄に「メッセージ」と入力、
「質問のタイプ」はプルダウンから「段落」を選択、
「必須」の項目を「オン」にしましょう。
これでフォームの作成は完了です。
次は、このフォームをサイトに設置する方法です。
お問い合わせフォームをサイトに設置する方法
フォームを送信
![Googleフォーム、フォームを送信 > HTMLを埋め込む](https://i0.wp.com/skill.u-ff.com/wp-content/uploads/2021/10/017eea8f4ede744ee4bb9bdb8123a0bf.png?resize=800%2C414&ssl=1)
Googleフォーム、フォームを送信 > HTMLを埋め込む
Googleフォームの作成画面で、画面右上にある「送信」ボタンをクリック。
「送信方法」で「<>」マークを選択。
すると、「HTMLを埋め込む」と書かれた下に
<iframe src="https://docs.google.com/forms/d/e/xxx/viewform?embedded=true" width="640" height="677" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>
のようなコードが表示されます。
「コピー」をクリックすると、このコードをコピーできます。
iframeをサイトに貼り付け
![Googleフォーム、サイズが不適当だとスクロールバーが表示される](https://i0.wp.com/skill.u-ff.com/wp-content/uploads/2021/10/9eedbd5b91d2f970667501b409d1a100.png?resize=585%2C607&ssl=1)
Googleフォーム、サイズが不適当だとスクロールバーが表示される
コピーしたiframeのコードをサイトに貼り付けると、上記のように問い合わせフォームが表示されます。
ただし、フォームの横にスクロールバーが表示されて見栄えが悪いです。
フォームのサイズを調整する方法
![Googleフォーム、お問い合わせフォーム](https://i0.wp.com/skill.u-ff.com/wp-content/uploads/2021/10/2be02c8b432591caa9dfc2bd9bb99bef.png?resize=517%2C737&ssl=1)
Googleフォーム、お問い合わせフォーム、widthとheightを変更後
<iframe src="https://docs.google.com/forms/d/e/xxx/viewform?embedded=true"
width="100%" height="800"
frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>
iframeをサイトに貼り付けるときに、widthとheightの値を調整してやると、スクロールバーが表示されなくなり、見栄えが良くなります。
まとめ
「Googleフォーム」で「お問い合わせ」フォームを作るには、
- Googleフォームへアクセス
- 「新しいフォームを作成」で「空白」のフォームを作成
- タイトルを「無題のフォーム」から「お問い合わせ」に変更
- 「+」マークから「質問を追加」し、以下のような項目を作成
- 「名前」
- 「記述式」
- 「必須」
- 「メールアドレス」
- 「記述式」
- 「必須」
- 「メッセージ」
- 「段落」
- 「必須」
- 「名前」
作成したフォームをサイトに設置するには、
- 「送信」ボタンをクリック
- 「送信方法」 > 「<>」 > 「HTMLを埋め込む」から
iframeのコードを「コピー」 - iframeのコードをサイトに貼り付け
- iframeのwidthとheightを調整
上記の操作により、サイトにフォームを設置できます。
![](https://i0.wp.com/skill.u-ff.com/wp-content/uploads/2021/10/328464e4ebb87b7a5bf5d19ddb4a2d24.png?resize=320%2C180&ssl=1)
コメント