ウーロンぷらいず

ウーロンぷらいず

楽するためにがんばる人の雑記ブログ

お問い合わせフォーム作成!Googleフォームをはてなブログに設置する方法

f:id:oolongprize:20181121162629j:plain

ちゃお!ウーロンです。

今回はお問い合わせフォームの作成・設置をできるだけ分かりやすく紹介します!

ブログ運営には必要な「お問い合わせフォーム」。読者と連絡するためのツールとなります。質問を受付け、不具合・問題の指摘、仕事の依頼などができるようになるため、ブログの信頼性が上がります。

また、アフィリエイトGoogleアドセンスなどでブログを収益化したい方は必須のツールです。

 

今回はGoogleフォームというサービスを利用して「お問い合わせフォーム」を設置します。Googleフォームを利用するには、Googleアカウントが必要です。もし、アカウントを持っていない方は、こちらを参考にして作成しましょう。

 

oolongprize.hatenablog.com

 

それではスタート!!

 

 

Googleフォームにログイン

まずは、Googleフォームのトップページにアクセスします。

 

Google フォーム のトップページはこちら

 

下のように表示されます。「Googleフォームを使う」 をクリックします。

 

f:id:oolongprize:20181120174332p:plain

 

 下のように表示されます。「メールアドレス」を入力して、「次へ」をクリックします。

 f:id:oolongprize:20181121102515p:plain

 

下のように表示されます。「パスワード」を入力して、「次へ」をクリックします。

f:id:oolongprize:20181121103418p:plain

Googleフォームの作成

 

下のように表示されます。新しいフォームを作成の中の「+」をクリックします。

 

f:id:oolongprize:20181121104218p:plain

 

下のように表示されます。必要項目を入力していきましょう。

 

f:id:oolongprize:20181121110435p:plain

 

①無題のフォーム

フォームのタイトルを入力します。何でもOKですが、無難に「お問い合わせ」がいいと思います。

 

②フォームの説明

フォームの説明を入力します。何でもOKです。入力しなくても大丈夫です。

 

 

次に質問の内容などの情報を入力していきます。

 

f:id:oolongprize:20181121114132p:plain

③無題の質問

質問の内容です。まずは「お名前」や「氏名」がいいでしょう。

 

ラジオボタン

回答の形式を選択できます。ここでの質問は「名前」なので「記述式」を選択します。

 

⑤必須

質問者が必ず回答する項目にするか選択できます。必須にしたい場合はチェックします。

 

 

次に「コピーを作成」をクリックします。今作成した質問内容などをコピーできます。次の質問を作成するときに便利です。

 

f:id:oolongprize:20181121114307p:plain

 

下のように表示されます。同じように「メールアドレス」「件名」を作成します。

 

f:id:oolongprize:20181121115458p:plain

 

下のように表示されます。最後は「本文」を作成します。まずは「コピーを作成」をクリックします。

f:id:oolongprize:20181121115810p:plain

 

下のように表示されます。質問には「本文」を入力し、表示形式は「段落」を選択します。

 

f:id:oolongprize:20181121125946p:plain

これでフォームは完成です。

 

設定

次に、最初にやっておきたい設定を行います。

 

確認メッセージ

まずはページ右上の「設定」をクリックします。

 

f:id:oolongprize:20181121130623p:plain

 

下のように表示されます。「プレゼンテーション」をクリックします。

 

f:id:oolongprize:20181121131115p:plain

下のように表示されます。

 

f:id:oolongprize:20181121131509p:plain

①別の回答を送信するためのリンクを表示

チェックをはずします。

 

②確認メッセージ

フォーム送信後に表示されるメッセージです。なんでもOKです。
例文:「お問い合わせありがとうございます。確認後、返信させていただきます」

 

 

最後に「保存」をクリックします。

 

お問い合わせ内容の記録

お問い合わせ内容の一覧をスプレッドシートで記録する設定です。

まずはフォーム上部の「回答」をクリックします。

f:id:oolongprize:20181121133341p:plain

下のように表示されます。右上の「スプレッドシートを作成」をクリックします。

 

f:id:oolongprize:20181121133821p:plain

下のように表示されます。「新しいスプレッドシート」または「既存のスプレッドシート」を選択します。新しいスプレッドシートを選択する方は、分かりやすいタイトルに変更しましょう。最後に「保存」をクリックします。

 

f:id:oolongprize:20181121134539p:plain

 

メール通知設定

次は新しいお問い合わせがあった場合に、Gmailで通知してくれる設定をします。

まずはフォーム上部の「回答」をクリックします。

f:id:oolongprize:20181121133341p:plain

下のように表示されます。右上の「設定」をクリックします。

f:id:oolongprize:20181121135132p:plain

下のように表示されます。「新しい回答についてのメール通知を受け取る」をクリックします。

f:id:oolongprize:20181121135323p:plain

 

 

埋め込みコード取得

ブログに設置するため、埋め込みコードをコピーします。

まずは、ページ上部の「送信」 をクリックします。

f:id:oolongprize:20181121142442p:plain

 

下のように表示されます。「HTML」をクリックします。

 

f:id:oolongprize:20181121142801p:plain

 

下のように表示されます。「HTMLコード」をコピーします。「コピー」をクリックします。

 

f:id:oolongprize:20181121143209p:plain

 

 

 これでGoogleフォームの作成は全て完了です。

 

ブログに設置

はてなブログのサイドバーにお問い合わせフォームを設置します。

記事の作成

まずは、はてなぶろぐのダッシュボードにアクセスします。

 

はてなブログ ダッシュボードはこちら

 

記事を作成します。左のサイドバーの「記事を書く」をクリックします。

 

f:id:oolongprize:20181121144025p:plain

 

下のように表示されます。「HTML編集」をクリックします。

 

f:id:oolongprize:20181121144908p:plain

 

下のように表示されます。先ほどコピーした「コード」を貼りつけます。

 

f:id:oolongprize:20181121145405p:plain

 

投稿日を過去の日付にしましょう。過去の記事にすることで、記事がみえづらくなります。「お問い合わせフォーム」を最新の記事にしてしまうと、読者がびっくりしますので・・・。

右サイドバーの「編集オプション」をクリックし、「投稿日時」を過去にします。

 

f:id:oolongprize:20181121151658p:plain

 

公開する」をクリックします。

f:id:oolongprize:20181121152028p:plain

 

サイドバーにリンクを設置

いま作成したお問い合わせフォーム記事のリンクをサイドバーに設置します。

まずは、ダッシュボードに戻ります。

 

左サイドバーの「デザイン」をクリックします。

 

f:id:oolongprize:20181121152910p:plain

 

下のように表示されます。「カスタマイズ」をクリックし、「モジュールを追加」をクリックします。

f:id:oolongprize:20181121153659p:plain

 

下のように表示されます。

 

f:id:oolongprize:20181121154542p:plain

 

①タイトル

なんでもOKです。「このサイトについて」などでいいでしょう。

 

②リンク

リンクのタイトルは何でもOKです。「お問い合わせ」でOKです。

リンクのURLは、先ほど作成したお問い合わせ記事のURLをコピーして貼り付けます。

 

入力が終わったら、「適用」をクリックします。

 

下のように表示されます。忘れず、「変更を保存する」をクリックします。

f:id:oolongprize:20181121155313p:plain

 

 

おめでとうございます!これでお問い合わせフォームの設置まですべて完了です!

 

まとめ

いかがでしたか?意外と簡単にお問い合わせフォームが設置できたと思います。

無事に設置できた方は一度はテストを行いましょう。ちゃんと問い合わせの送信・受信ができることを確認することはとても大事です。

お問い合わせフォームはブログ運営する上で重要ですので、みなさんもぜひ作成・設置してみてください。