お問い合わせフォーム、完成イメージ

Googleフォーム、お問い合わせフォーム
上記のようなものを作ります。
Googleフォームでお問い合わせフォームを作る方法
Googleフォームを開く
Googleフォームへアクセス。
Googleにログインしていない場合はログインする。
新しいフォームを作成

Googleフォーム、新しいフォームを作成
Googleフォームのホーム画面が開くので、「新しいフォームを作成」から「空白」を選びましょう。
無題のフォーム

Googleフォーム、無題のフォーム
「無題のフォーム」というのが開きます。
「無題のフォーム」「フォームの説明」と書かれた部分の「無題のフォーム」の方をクリックしましょう。
フォームのタイトルを設定

Googleフォーム、タイトルを設定
「無題のフォーム」の代わりに、「お問い合わせ」と入力します。
無題の質問

Googleフォーム、無題の質問
「無題の質問」という部分をクリックすると、上記のような状態になります。
質問を設定(名前)

Googleフォーム、名前・記述式・必須
「質問」欄に「名前」と入力、
「質問のタイプ」はプルダウンから「記述式」を選択、
「必須」の項目を「オン」にしましょう。
質問を追加

Googleフォーム、質問を追加
画面の右側にある「+」マークをクリックすると、「質問を追加」できます。
「質問」とは、お問い合わせ時にユーザーが入力する「回答」欄のことです。
サイト側は「あなたの『名前』は何ですか?」と「質問」する、
ユーザーは「『山田太郎』です」と「回答」する。
必要な項目の数だけ質問を追加していくことになります。
質問を設定(メールアドレス)

Googleフォーム、メールアドレス・記述式・必須
「質問」欄に「メールアドレス」と入力、
「質問のタイプ」はプルダウンから「記述式」を選択、
「必須」の項目を「オン」にしましょう。
質問を設定(メッセージ)

Googleフォーム、メッセージ・段落・必須
「質問」欄に「メッセージ」と入力、
「質問のタイプ」はプルダウンから「段落」を選択、
「必須」の項目を「オン」にしましょう。
これでフォームの作成は完了です。
次は、このフォームをサイトに設置する方法です。
お問い合わせフォームをサイトに設置する方法
フォームを送信

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フォーム、サイズが不適当だとスクロールバーが表示される
コピーしたiframeのコードをサイトに貼り付けると、上記のように問い合わせフォームが表示されます。
ただし、フォームの横にスクロールバーが表示されて見栄えが悪いです。
フォームのサイズを調整する方法

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を調整
上記の操作により、サイトにフォームを設置できます。

コメント