【2019年最新版】これさえ読めば誰でもわかる!はてなブログに問い合わせフォームを設置する方法

スポンサーリンク

f:id:Big-PaPa:20190807172142j:plain
【2019.08.13】

Big-papaです。今回はブログを初めて1週間の私がはてなブログに問い合わせフォームを作る方法」を紹介します。

初心者が自分でも分かるように書いた記事ですので、この記事を読めば誰だって同じことができると思います。

1、はじめに

問い合わせフォームを作成していく前に、私が作成した時の条件です。
この条件が揃っていれば、今回の手順を踏むことで全く同じことが可能です。

問い合わせフォームを作った時の条件

  1. はてなブログProへ加入中
  2. Googleアカウント所持
  3. いくばくかのやる気

はてなブログProには加入していなくても構いませんが、問い合わせフォームは固定ページにおいた方が良いと思いますので、Proを推奨します。

今回の問い合わせフォームはGoogleの無料サービスを使用して作成していくのでGoogleアカウントだけは必須です。

2、問い合わせフォームについて

問い合わせフォームは、ブログを運営している者へ連絡する際に使用します。
(「GoogleAdSense」も問い合わせフォームを設置していないと審査に通るとか通らないとか。)

3、Googleフォームを使用して作成

問い合わせフォームは「Google フォーム – アンケートを作成、分析できる無料サービス」を使用して作成していきます。

もともとはアンケートや情報の収集分析に使用するサービスです。

1、Googleフォームにログインする

上記のリンクを開くとGoogleフォームのページに移動します。
そこからまず、Googleフォームを使う」をクリックする。

f:id:Big-PaPa:20190807172034p:plain

2、新しいフォームを作成する

新しいフォームの作成から、一番左側の「空白」を選択する。

f:id:Big-PaPa:20190807173136p:plain


フォームの作成画面へ移動するので、「質問」が選択されていることを確認し「無題のフォーム」を作成したいフォーム名に変更します。

今回は問い合わせフォームを作りますので、「問い合わせ」「お問い合わせ」「お問い合わせ窓口」「連絡はここから」などなど、好きな名前に変更しましょう。

フォームの説明は特段入力しなくて問題ないです。

f:id:Big-PaPa:20190807175100p:plain


次に入力項目を作成します。
画面右側のラジオボタンとなっているタブをクリックします。

f:id:Big-PaPa:20190808133932p:plain

選択項目が出てくるので「記述式」を選びます。

f:id:Big-PaPa:20190808134905p:plain


記述式を選んだ後に画面左側の「無題の質問」を変更します。

ここで作成するのは氏名入力の項目ですので、「お名前」や「氏名」と入力しましょう。

入力が完了したら、「必須」の項目にチェックを入れます。

f:id:Big-PaPa:20190808145153p:plain


次に、その他の入力項目を順次、作成していきます。
今回は「質問を追加」3回クリックします。

f:id:Big-PaPa:20190808145739p:plain

質問の内容をそれぞれ、以下のように設定していきましょう。

◯「メールアドレス」
記述式に変更し、「メールアドレス」と入力します。
「返答先」とかの名称にしてもいいと思います。
この項目は、「必須」にチェックをいれます。

f:id:Big-PaPa:20190808151747p:plain

◯「件名」
記述式に変更し、「件名」と入力します。

f:id:Big-PaPa:20190808152211p:plain

◯「本文」
段落に変更し、「本文」と入力します。
記述式との違いは、長文の入力が可能となる点です。
この項目は、「必須」にチェックをいれます。

f:id:Big-PaPa:20190808152913p:plain

今回は、上記の3項目だけ設定しましが、必要に応じて、「会社名」や「年齢」「性別」などの項目を作成してもいいと思います。

次からは、設定を変更していきます。

3、設定

フォーム作成画面の右上にある、設定のボタンをクリックします。

f:id:Big-PaPa:20190808154411p:plain

設定は「全般」「プレゼンテーション」「テスト」の3項目です。
これも、以下のように設定すればOKです。

◯「全般」
特段、変更する箇所はありません。

f:id:Big-PaPa:20190808160520p:plain

◯「プレゼンテーション」
「別の回答を送信するためのリンクを表示」のチェックを外します。
確認メッセージの部分に、送信者へ表示するメッセージを入力します。
私の場合は、「お問い合わせを受け付けました。」にしました。

f:id:Big-PaPa:20190808160541p:plain

◯「テスト」
特段、変更する箇所はありません。

f:id:Big-PaPa:20190808161110p:plain

全ての設定が終了したら保存をクリックします。

4、通知設定

作成した問い合わせフォームが実際に使用された際に、Gmailにメールが送られてくるように設定します。

フォーム作成画面の「質問」を「回答」へ切り替えます。
切り替えたら、画面右側のボタンをクリックします。

f:id:Big-PaPa:20190808162248p:plain

「新し回答についてのメール通知を受け取る」をチェックします。

これで、このフォームを作成しているGoogleアカウントのGmailに自動でメールが送られるようになります。

f:id:Big-PaPa:20190808162804p:plain

5、はてなブログ設定

作成したフォームを、はてなブログ側に設置したいと思います。
まず、Googleフォームの送信をクリックして「フォームを送信」画面から「< >」のタブを選択し、右下のコピーをクリックします。

f:id:Big-PaPa:20190808164149p:plain


ここからは、はてなブログ側での作業になります。
まず、ブログの管理画面から「固定ページ」を選択します。

f:id:Big-PaPa:20190809114503p:plain

作成画面を開いたら編集方法を「HTML」に変更します。

f:id:Big-PaPa:20190813113121p:plain

「タイトル」を入力し「本文」に先ほどGoogleフォーム側でコピーしたHTMLを貼り付けます。

貼り付けが正常に終わると、右側の「リアルタイムプレビュー」にフォームで作成した画面が表示されます。

リアルタイムプレビューに表示されている画面に問題がなければ、公開ボタンをクリックします。

f:id:Big-PaPa:20190813113947p:plain


固定ページは作成しただけではブログに反映されないため、アクセスするためのリンクをブログに設定していきます。

ブログの管理画面から「デザイン」を選択します。

f:id:Big-PaPa:20190813131101p:plain

デザインのページに移動したら、「カスタマイズ」→「サイドバー」→「モジュールを追加」の順で選択します。

f:id:Big-PaPa:20190813131245p:plain

モジュール作成画面が立ち上がるので、モジュールのタイトルを入力します。
問い合わせのモジュールを作成するので「問い合わせ」と入力。

次に、リンクのタイトルとURLを入力します。
タイトルは「お問い合わせ」として先ほど作成した固定ページのURLを入力し、最後に適用をクリックします。

f:id:Big-PaPa:20190813132750p:plain

ブログがプレビューされて、作成したモジュールがサイドバーに追加されていることが確認できると思います。

特段問題なければ、「変更を保存する」をクリックします。

f:id:Big-PaPa:20190813133311p:plain

これで、ブログのサイドバーに「問い合わせフォーム」が設置できました。

6、実際に使用してみた

作成した問い合わせフォームを実際に使用してみました。
まず、入力画面から必要事項を入力して、送信をクリックします。

f:id:Big-PaPa:20190813134931p:plain

送信が正常に終了すると、Googleフォームで作成した確認メッセージが表示されます。

f:id:Big-PaPa:20190813135157p:plain

あとは、Googleフォームを作成したアカウントのGmailに通知がきます。

f:id:Big-PaPa:20190813135520p:plain

メール本文中の「概要を表示」をクリックすると入力された内容が確認できます。

f:id:Big-PaPa:20190813135759p:plain

7、まとめ

最後にフォームの作成から設置までの流れをおさらいします。

  1. はてなブログProとGoogleアカウントを準備する。
  2. Googleフォームで新しいフォームを作成する。
  3. フォームの作成が終了したら、HTMLをコピーする。
  4. はてなブログの固定ページを作成する。
  5. はてなブログのデザインからサイドバーにモジュールを追加する。

全体の工程はこんな感じです。

フォームの作成から設定まで、30分程度で終えることができました。
簡単に設置できますので、是非みなさんも活用してみてください。

コメント

タイトルとURLをコピーしました