Googleフォームで作成した問い合わせフォームをBloggerで表示する

Google フォームを使って作成した問い合わせフォームを、ブログのページやサイドバーなどに表示することができます。ここでは Google フォームで作成した問い合わせフォームを Blogger で表示する手順について解説します。

(2022 年 04 月 12 日公開 / 2022 年 06 月 10 日更新)

問い合わせフォームを作成する

最初に Google フォームを使って問い合わせフォームを作成します。その後で作成した問い合わせフォームを Blogger で作成したページに貼り付けます。 Google フォームは次の URL へアクセスしてください。

https://docs.google.com/forms/

問い合わせフォームを作成する(1)

今回はテンプレートを使用しません。「空白」をクリックしてください。

問い合わせフォームを作成する(2)

新しく作成するフォームの編集画面が表示されます。

問い合わせフォームを作成する(3)

最初に「無題のフォーム」と表示されているところをクリックして作成するフォームの名前を入力します。今回は「お問い合わせ」としました。

問い合わせフォームを作成する(4)

次に質問を作成していきます。すぐ下の部分を一度クリックしてください。

問い合わせフォームを作成する(5)

質問の編集が行えるようになります。

問い合わせフォームを作成する(6)

右側のラジオボタンと表示されているところをクリックしてください。

問い合わせフォームを作成する(7)

フォームに表示する項目の種類を選択できますので「記述式」をクリックしてください。

問い合わせフォームを作成する(8)

「無題の質問」と書かれていた個所を「お名前」に書き換えてください。

問い合わせフォームを作成する(9)

問い合わせフォームを作成する(10)

これで一つ目の質問が完成です。質問を追加するために右側に表示されている「+」をクリックしてください。

問い合わせフォームを作成する(11)

新しい質問が追加されました。

問い合わせフォームを作成する(12)

今度はフォームに表示する項目の種類を「段落」に変更してください。

問い合わせフォームを作成する(13)

「無題の質問」と書かれていた個所を「ご意見をどうぞ」に書き換えてください。

問い合わせフォームを作成する(14)

これで問い合わせフォームの作成は完了です。

画面右上のプレビューアイコンをクリックすると、問い合わせフォームのプレビューを確認できます。

問い合わせフォームを作成する(15)

問い合わせフォームを作成する(16)

それでは作成した問い合わせフォームの埋め込み用コードを取得します。画面右上の「送信」をクリックしてください。

問い合わせフォームを作成する(17)

表示された画面で埋め込みコードのタブをクリックし埋め込み用コードをコピーしてください。

問い合わせフォームを作成する(18)

これで準備は完了です。

問い合わせフォームをページに貼り付ける

次にブログでページを作成し、先ほどコピーした埋め込み用コードを貼り付けます。管理画面左側に表示されている「ページ」をクリックしてください。

問い合わせフォームをページに貼り付ける(1)

「ページ」画面が表示されます。

問い合わせフォームをページに貼り付ける(2)

「新しいページ」をクリックしてください。

問い合わせフォームをページに貼り付ける(3)

新しいページの作成画面が表示されます。

問い合わせフォームをページに貼り付ける(4)

ページのタイトルを入力したあと、「HTML」をクリックして HTML ビューに切り替えてください。

問い合わせフォームをページに貼り付ける(5)

問い合わせフォームをページに貼り付ける(6)

コピーしておいた Google フォームの埋め込み用コードを貼り付けてください。

問い合わせフォームをページに貼り付ける(7)

画面右上の「公開」をクリックしてページを公開してください。

問い合わせフォームをページに貼り付ける(8)

確認ダイアログが表示されるので「確定」をクリックしてください。

問い合わせフォームをページに貼り付ける(9)

これでページの作成と公開は完了です。

問い合わせフォームをページに貼り付ける(10)

作成したページをブログに表示するにはブログにページガジェットを追加して設定する必要があります。詳しい手順は「ページガジェットをブログに追加する」をご参照ください。「ページ」ガジェットの設定画面で、先ほど作成したページを表示するようにチェックしてから「保存」をクリックしてください。

問い合わせフォームをページに貼り付ける(11)

これで全ての準備が完了しました。

それではブログをブラウザで表示したあと、「お問い合わせ」をクリックしてください。

問い合わせフォームをページに貼り付ける(12)

Google フォームで作成した問い合わせフォームが表示されました。

問い合わせフォームをページに貼り付ける(13)

送信されたメッセージの確認

それではこの問い合わせフォームから送信されたメッセージを確認してみます。次のように問い合わせフォームに入力したあと「送信」をクリックしました。

送信されたメッセージの確認(1)

メッセージが送信されました。

送信されたメッセージの確認(2)

送信されたメッセージを確認するには Google フォームへアクセスしてください。問い合わせフォーム用に作成したフォームが表示されているのでクリックしてください。

送信されたメッセージの確認(3)

フォームの編集画面が表示されたら、画面上部の「回答」タブをクリックしてください。

送信されたメッセージの確認(4)

問い合わせフォームから送信されたメッセージを確認することができます。

送信されたメッセージの確認(5)

-- --

oogle フォームで作成した問い合わせフォームを Blogger で表示する手順について解説しました。

( Written by Tatsuo Ikura )

広告
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。