スマホで可能！お問い合わせフォームの作成とはてなブログに設置する方法！
みなさんこんにちは、A汰です。
まだまだ初心者に近いブログを運営すること1年、やっと自分のページに問い合わせフォームとプライバシーポリシーを設置致しました！
僕は普段サラリーマンを本業にしつつ、はてなブログのアプリを利用して記事を書いていますので、パソコンを開くことは滅多にありません。
なので、この2つの作業も仕事の合間や休憩中を利用して全部スマホで済ませちゃいました。
やり方や知識がほぼゼロだったのですが、ネットの情報やブログを見て調べながら実践してみると意外とできるもんですね。
パソコンとスマホはどっちが操作しやすいかと言われるともちろんパソコンです。
しかし、どうしても時間がなかったり、外出が多くて自宅でパソコンを使う手間を考えると、スキマ時間に設置作業ができる点で言えば大きなメリットと言えるでしょう。
実際に僕がスマホ1台でフォームの作成と設置の方法をご紹介したいと思います。
■準備
GoogleアカウントとはてなブログProへの登録が必須です。
今回は以下のアプリを利用しました。
■まずは問い合わせフォームを作成する
出典：Google フォーム - アンケートを作成、分析できる無料サービス
インターネットから「グーグルフォーム」にアクセスすると、このようなページになるので「Googleフォームを使う」を押してフォーム作成ページに移動しましょう。
・お問い合わせ欄の作成
このような画面になったら、「無題のフォーム」にカーソルを合わせて削除してしまいましょう。
写真のように「フォームのタイトル」の場所へ「お問い合わせ」と入力し、下の「フォームの説明」の欄に読者向けのメッセージを入れましょう。
文言はネット上にたくさんありますし、ほかのブログを参考にするのも良いかと思います。
僕は
「当ブログへのご質問・ご意見がございましたらお問い合わせくださいませ。」
と書きました。
良ければコピペしてくださいね。
ちなみにここは空欄にすることも可能です。
後から変更することもできますので、とりあえず何かしら入力しておくと良いでしょう。
「お名前」「メールアドレス」「お問い合わせ内容」の3つの欄を作成していく
・お名前
さきほどのお問い合わせ欄より下にある「無題の質問」を削除して「お名前」と入力します。
次は「ラジオボタン」の三角マークを押して、「記述式」にしましょう。
するとこのような感じに仕上がりますので、右下にある「必須」を押します。
色が付くのでこれでオッケー。
「必須」とはどういう仕組みなのかと言いますと、「僕のブログに問い合わせる時は名前の入力がないと受け付けてまきませんよ」っていう意味です。
画面下のほうにある「＋」のボタンを押すと次の入力画面が出てくるので、「お名前」の手順と同じように「メールアドレス」を作成していきましょう。
・メールアドレス
まずは「質問」を削除。
「メールアドレス」と入力し「ラジオボタン」から「記述式」を選択、そして「必須」を押します。
次は青文字部分の「メールアドレスの収集設定を有効にする」を押すと、「設定を変更」というボタンに変わるのでクリックします。
「別の回答を送信するためのリンクを表示」の左にはチェックマークが入っているので、これを解除しましょう。
「確認メッセージ」下部にある「回答を記録しました」の欄には、問い合わせを受けた際の自動メッセージを入力して、右上の「保存」を押します。
「お問い合わせありがとうございます。内容を確認後返信致します。」
よろしければこのように書いてください。
コピペどうぞ。
・お問い合わせ内容
「質問」に「お問い合わせ内容」と入力し、ラジオボタンを「段落」にしてください。
最後に必須ボタンをお忘れなく。
・設定作業
お問い合わせフォームっぽくなってきましたね！
ここで一度、きちんと問い合わせが届くための設定を行います。
これまでの作業は「質問」のページで行っていました。
右の「回答」を押すとこの画面に移ります。
緑色の右にある点が3つ縦に並んだボタンから別ページを開きます。
このような画面が出てくるので「新しい回答についてのメール通知を受け取る」を押して、左のほうにチェックを入れましょう。
次は緑のボタンを押して「スプレッドシート」を作成しましょう。
新しくページが表示されますので「新しいスプレッドシートを作成」に印を入れ、右上の「作成」を押すとスプレッドシートのアプリにファイルが追加されます。
「質問」ページに移動し、今度は作成したフォームをGoogleドライブアプリへ保存します。
保存方法はとても簡単です。
画面左上の「左矢印」を押すと、保存先のアカウント選択のタブが出てくるので、選択するとGoogleドライブに保存されます。
最後に画面上部の「縦3つ並んだ点」のボタンを押してプレビューを開くと、完成したお問い合わせフォームが確認できます！
とりあえずお疲れ様でした。
次はお問い合わせフォームをブログに張り付ける作業へ入ります。
■はてなブログのページに問い合わせフォームを入れる
※ここからはスマホでPC画面を開く作業がほとんどですので、スマホ画面をスクロールする動作が必須になります。
アプリ経由でもネットから直接開いてもどちらでも構いませんので、まずは自分の「ダッシュボード」を開きましょう。
まずは「固定ページ」を開き、URLの欄に「otoiawase」と入力して進めます。
自分が分かりやすいものであれば正直なんでも構いません。
これがお問い合わせフォームへのURLです。
僕の場合は
「https://www.a-asoblog.com/otoiawase」
がお問い合わせフォームのURLになります。
これは後ほど貼り付けしないといけないので、すぐに分かる状態にしておくか、あらかじめメモにコピーしておきましょう！
「ページを作る」を押して編集画面を開きます。
今度は、Googleドライブから先ほど作成したGoogleフォームを開きましょう。
◯で囲ったボタンから「フォームを送信」するページに移動します。
◯で囲った部分を押すと、「HTMLを埋め込む」と書かれた下に意味が分からない英語がずらっと表示されます。
これがお問い合わせフォームのタグですのでコピーしましょう。
さきほどの、はてなブログ固定ページを開き「HTML編集」ボタンを押して、本文入力スペースへコピーしたタグを貼り付けてください。
貼り付けた後は、左の「編集 見たまま」を押して一度確認して頂き、タイトル欄に「お問い合わせ」と入力しましょう。
これで問題がなければ下部の「公開」を押すと問い合わせページが完成しました！
たまに貼り付けができない時がありますが、そういう場合はタブを変えたりしているとうまく動作します。
次はお問い合わせページをブログに表示させる作業を行いますので、「ダッシュボード」に戻り「デザイン」のページへ移動。
画面左側をスクロールすると、このようなアイコンが並んでいます。
「工具のようなアイコン」を押して「サイドバー」を開きます。
下の「モジュールを追加」を押すと「モジュールを編集」のページに移動しましょう。
写真と同じように「タイトル」「リンク」「URL」を入力します。
ここで、さきほどのお問い合わせページのURLを貼り付けて、3つ入力したら「適用」を押してください。
そしたら「このブログについて」のバーが完成しました！
最後に必ず画面上部の「変更を保存する」ボタンを押しましょう。
ちなみに、タイトルやリンクは後から何度でも変更ができますので、ほかのブログを参考にして別の文言でもいいかと思います。
■正常に問い合わせが受け付けできるか確認してみる
では、完成した問い合わせページを貼り付けたブログを見てみましょう。
ずっと下のほうへ見ていくと・・・
ありました！！
さっそく開いてみます。
きちんとできていました！
さっそくテストとして「メールアドレス」に自分のものを入力し、適当に「お名前」「お問い合わせ内容」の欄を「テスト」とでも入れて、下の送信ボタンを押しましょう。
正常に送信が完了したら、以前作成した画面が出てましたね。
次はメールが届いているはずなので自分のGmailを開いてみます。
問題なく届いていました。大成功です！
「概要を表示」からフォーム画面に移動します。
すると1件のメールが届いています。
さきほどスプレッドシートアプリに保存されたファイルを開いてみましょう。
エクセルのようなページが出てきましたね。
このスプレッドシートの役割は、エクセル形式で過去の問い合わせを確認することができるのです。
これで自分のブログに「お問い合わせフォーム」の作成から設置まで完了しました！
お疲れ様です！
