元IT土方の供述

男の娘バーチャルブロガーがお絵描きしたり、深夜バスに乗ったり、旅行に行ったりするブログだぞ!

元IT土方の供述

Googleフォームを使用してお問い合わせフォームやアンケートを設置する方法を紹介しますの!

スポンサーリンク

スポンサーリンク

スポンサーリンク

f:id:UrushiUshiru:20191227163724j:plain

みんなー!うしるだよー☆

 

今回はねえ!Googleフォームを使用して、はてなブログにお問い合わせフォームを設置する方法を紹介するぞ!

 

刮目してみてね♡

 

 

Googleフォームとは

Googleフォームとは、Googleが無料で提供しているサービスで、お問い合わせフォームやアンケートを作成することが出来るツールで、これを使用すれば専門知識も不要で簡単に作ることが出来ます。

ちなみに、Googleフォームを使用するのにはGoogleアカウントが必要です。

 

つまり、なんかイイ感じのお問い合わせフォームが簡単に作れるツールってことなの!

 

Googleフォームの設置方法

ここでは、上記のようなお問合せフォームを設置する方法を紹介します。

 

f:id:UrushiUshiru:20191226172816j:plain

Googleフォームにアクセスし、「Googleフォームを使ってみる」をクリックします。

www.google.com

 

f:id:UrushiUshiru:20180429005438j:plain

クリックすると上記のような画面が表示されるので、「空白」をクリックします。

 

フォームの設定

f:id:UrushiUshiru:20191226011754j:plain

上記のような設定画面が表示されるので、①メールフォームのタイトルを「お問合せに」設定し、②質問に「お名前」と入力します。③のプルダウンメニューを記述式に設定します。最後に④必須にチェックを入れます。

ちなみに、設定項目は以下のようになっています。

  • ①「メールフォームのタイトル」
  • ②「質問」
  • ③「質問形式」
  • ④「質問の追加」

 

f:id:UrushiUshiru:20191226011917j:plain

「+」マークをクリックして質問事項を追加します。

 

f:id:UrushiUshiru:20191226012302j:plain

質問事項を追加したら、①質問に「返信用メールアドレス」と入力し、②のプルダウンメニュー記述式に設定し、③必須にチェックを入れます。最後に④「+」マークをクリックして質問事項を追加します。

 

f:id:UrushiUshiru:20191226012947j:plain

 質問事項を追加したら、①質問に「問い合わせ内容」と入力し、②のプルダウンメニュー段落に設定し、③必須にチェックを入れます。

以上でフォームの設定は終了です。

 

フォームカラーの設定

f:id:UrushiUshiru:20191226020722j:plain

次にフォームのカラーを設定します。

①ペイントマークをクリックし、②カラーを「ティール」に設定します。

次に、③背景色を「」に設定し、④フォントスタイルを「ベーシック」に設定します。

以上でカラーの設定は終了です。

 

f:id:UrushiUshiru:20191226013328j:plain

最後に、フォームを配信するため、右上の「送信」をクリックします。

 

f:id:UrushiUshiru:20191226021928j:plain

送信をクリックすると「フォームを送信」と言うポップアップが表示されるので、①<>マークをクリックし、②「コピー」をクリックして、表示されているHTMLコードをコピーします。

 

f:id:UrushiUshiru:20180429013325j:plain

はてなブログに移動して、記事のHTML編集にコピーしたHTMLを貼り付けます。

 

f:id:UrushiUshiru:20191226022201j:plain

記事を公開してメールフォームが作成出来たら完了です。

 

ほーら、簡単でしょ!

 

Googleフォームのインポート

ここでは、設定をインポートして、同じ設定のフォームを複数作成する方法を紹介します。

 

f:id:UrushiUshiru:20180429005438j:plain

新しいフォームを作成の「空白」をクリックします。

 

f:id:UrushiUshiru:20191226022747j:plain

フォームの設定画面が表示されるので、右端のインポートマークをクリックします。

 

f:id:UrushiUshiru:20191226023101j:plain

フォームを選択」と言うポップアップが表示されるので、①でインポートしたいフォームをクリックし、②選択をクリックしてインポートします。

f:id:UrushiUshiru:20191226023428j:plain

右端に「質問をインポート」と言うサイドメニューが表示されるので、①インポートしたい項目にチェックを入れ、②質問をインポートをクリックします。

 

f:id:UrushiUshiru:20191226023812j:plain

クリックすると設定画面に質問項目がインポートされます。

なお、カラーはインポートされないので、前項の「フォームカラーの設定」通りに設定してださい。

 

はてなブログのサイドバーに設置

ここではGoogleフォームをはてなブログのサイドバーに設置設置する方法を紹介します。

 

f:id:UrushiUshiru:20191226135045j:plain

Googleフォームにアクセスし、サイドバーに設置したいフォームをクリックします。

なお、フォームを新規に作成したい場合は、前項の「Googleフォームの設置方法」の手順で作成してください。

 

f:id:UrushiUshiru:20191226013328j:plain

Googleフォームを作成したら、右上の「送信」をクリックします。

 

f:id:UrushiUshiru:20191226135806j:plain

送信をクリックすると「フォームを送信」と言うポップアップが表示されるので、①<>マークをクリックします。

②幅のピクセルを「325ピクセル」に設定し、はてなブログのサイドバーのサイズに合わせます。

最後に、③「コピー」をクリックして、表示されているHTMLコードをコピーします。

 

f:id:UrushiUshiru:20180721031418j:plain

はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「サイドバー」の「②モジュール追加」をクリックします。

 

f:id:UrushiUshiru:20191226134418j:plain

モジュール追加のポップアップが表示されるので「①HTML」をクリックすると、右側に白枠が表示されます。

②の空欄に「お問合せフォーム」と入力し、③の空欄コピーしたGoogleフォームのコードを貼り付けます。

貼り付けたら④適用をクリックしてサイドバーの設定を保存します。

最後に「変更を保存する」をクリックしてブログの設定を保存します。

 

f:id:UrushiUshiru:20191226134339j:plain

ブログに移動して貼り付けられていれば、サイドバーの設置完了は完了です。

実物は以下のブログにアクセスするとことで確認できます。

 

ちなみに、ログインパスワードはシャルたんの身長だぞ!みんなはもちろん知ってるよね?

 

アンケートの設置方法

ここでは、Googleフォームを使ったアンケートの設置方法を紹介します。

 

f:id:UrushiUshiru:20180429005438j:plain

新しいフォームを作成の「空白」をクリックします。

 

f:id:UrushiUshiru:20191226174407j:plain

フォームの設定画面が表示されるので、①アンケートのタイトルを入力し、②質問項目を入力します。

そして、②のプルダウンメニューラジオボタンに設定し、回答項目を入力します。

 

f:id:UrushiUshiru:20191226175234j:plain

回答項目には画像が設定できます。

設定する場合は、右側の画像アイコンをクリックします。

 

f:id:UrushiUshiru:20191226174723j:plain

ここに画像をドラッグに挿入したい画像をドラッグします。

 

f:id:UrushiUshiru:20191226175415j:plain

この手順を繰り返して回答項目を増やしていきます。

 

f:id:UrushiUshiru:20191226180346j:plain

回答項目を設定を全て終えたら必須にチェックを入れます。

 

f:id:UrushiUshiru:20191226013328j:plain

チェックを入れたら、右上の「送信」をクリックします。

 

f:id:UrushiUshiru:20191226182157j:plain

送信をクリックすると「フォームを送信」と言うポップアップが表示されるので、①<>マークをクリックします。

②幅と高さのピクセルを適宜設定します。

最後に、③「コピー」をクリックして、表示されているHTMLコードをコピーします。

 

f:id:UrushiUshiru:20191226182121p:plain

 

f:id:UrushiUshiru:20180429013325j:plain

はてなブログに移動して、記事のHTML編集にコピーしたHTMLを貼り付けます。

 

 記事に貼り付けると、このような感じになります。

 

もちろん、みんなはうしるきゅんに投票するよね!?

 

おい!あのヘルメットおじさんまで投票に加えるなんて卑怯だぞ!

 

もちろん、この私に投票しますよね?しないならただで済むと思わない方がいいですよ・・・

 

ふん!当然1位はこの私に決まってるよね!

 

何を申しておる!1位は妾に決まっておるじゃろ!

 

まとめ

ほーら、Googleフォームをブログに貼り付けるのも、サイドバーに設置するのも簡単だったでしょ!

 

サイドバーに設置・・・

 

サイドバー・・・

 

サイ・・・

 

 

 

 

 

f:id:UrushiUshiru:20190831224921j:plain

はい!サイド・チェストォオオオオオオオ!!

 

 

最後まで読んでいただきありがとうございました♡