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

広告

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

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

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

https://www.google.com/intl/ja_jp/forms/about/

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

「パーソナル」の中にある「Googleフォームを使ってみる」をクリックしてください。

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

新しいフォームの作成画面が表示されます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

先ほどと同じ手順でフォームに表示する項目の種類を「記述式」に変更し、「無題の質問」と書かれていた個所を「メールアドレス」に書き換えてください。

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

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

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

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

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

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

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

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

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

最後の質問は、右下に表示されている「必須」の項目をスライドさせて必須の質問としました。

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

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

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

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

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

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

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

表示された画面で、(1)埋め込みコードのタブをクリックし、(2)幅と高さを調整し、(3)最後に埋め込み用コードをコピーしてください。

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

これで準備は完了です。

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

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

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

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

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

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

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

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

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

ページのタイトルを入力したあと、「HTML」をクリックして HTML モードに変更してください。

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

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

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

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

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

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

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

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

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

それではブログへアクセスしてみます。

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

「問い合わせ」タブをクリックしてください。

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

問い合わせフォームが貼り付けてあるページが表示されました。

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

Google フォームで作成した問い合わせフォームを Blogger のブログで表示することができました。

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

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

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

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

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

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

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

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

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

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

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

-- --

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

( Written by Tatsuo Ikura+ )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

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