【全行程写真付き】お問い合わせフォームの設置方法・はてなブログ・初心者でも簡単にできる！

「はてなブログを始めたばかりでお問い合わせフォームの作り方がわからない！」

という私のような初心者さんでも簡単にできるお問い合わせフォームの作り方をまとめました^^

お問い合わせフォームはグーグルアドセンス審査対策として行う人が多い印象ですね。

設定前にすること

• グーグルアカウントを取得
• グーグルクロームを閲覧可能な状態にする

ブログ執筆中の方なら既にしている方がほとんどだと思いますが、念のため🌹

手順説明

手順をまとめると、以下のようになります。

1. 「Googleフォーム」で検索
2. Googleフォームにログイン
3. 「パーソナル」を選択
4. 「新規作成」を選択
5. お問い合わせフォームを各自の好みで作成する
6. お問い合わせフォームのhtmlをコピー
7. はてなブログの設置したい場所に貼り付け
8. 動作を確認する

「Googleフォーム」で検索

検索窓に「googleフォーム」と入力して検索します。

Googleフォームにログイン

検索すると、おそらく一番上に

「Googleフォーム - アンケートを作成、分析できる無料サービス」

が出てくるので、それをクリックします。

「パーソナル」を選択

パーソナルとビジネスの選択肢があるので、「パーソナル」を選択します。

「新規作成」を選択

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

お問い合わせフォームを各自の好みで作成する

ここからは、各自の好みのお問い合わせフォームに設定していきます。

設定方法なのですが、

「＋」のマークを押すと、質問項目を増やすことができます。

また、初期設定では「ラジオボタン選択式」になっていると思うので、記述式にしたい場合は、その隣にある「▼」のボタンを押して、記述式に変更しましょう。

必ず答えてほしい設問には、「必須」ボタンを押しておきましょう！

画像は必須にできていない状態で、この部分を押すと色が変わります🌹

ちなみに、このブログのお問い合わせフォームはこんな感じです⇩

「お問い合わせ内容」の項目を設定する場合、

「記述式テキスト　（長文回答）」

にしておきましょう！「▼」のボタンを押して、「段落」を選択すると設定できます。

お問い合わせフォームのhtmlをコピー

お問い合わせフォームが完成したら、右上の方にある「送信」ボタンをクリック。

送信ボタンを押したら、送信方法で　<>　を選択してください。

この時、お問い合わせフォームの幅と高さも設定できますので、それぞれを設定してからhtmlをコピーしましょう。

このブログのお問い合わせフォームは

幅　640、　高さ　840

に設定しています。参考にしたい方は一度見てみてください^^

はてなブログの設置したい場所に貼り付け

はてなブログの場合、お問い合わせフォームの設置場所は2種類あります。

1. プロフィール欄にある、自分のはてなIDをクリックしたら表示されるようにする
2. サイドバーに「お問い合わせ」のバーを設置する

それぞれで設置場所が異なりますので、順番に説明していきます。

はてなブログ無料版の方は１の設定方法、

はてなブログProの方は１と２の設定方法が行えます🌹

はてなIDをクリックした先に設置する（無料版/Pro）

プロフィール欄のはてなIDをクリックした際に表示したい場合は、

レンチマークの「設定」を選択した後、下にスクロールして、

「aboutページ編集」をクリックします。

aboutページ編集のhtmlモードの「自由記述欄」に、先ほどコピーしたお問い合わせフォームを貼り付けます。

私の場合は自己紹介を長々と表示するスペースにしています^^

サイドバーに設置する(Pro)

私と同じくサイドバーに設置したい場合、

1. 「固定ページ」を選択する
2. 「ページを作る」のURLを好みのものに設定（informationなど、わかりやすいものがおすすめ）
3. 「ページを作る」ボタンをクリック
4. 記事タイトルを編集（「お問い合わせフォーム」など）
5. HTML編集画面に、コピーしたお問い合わせフォームコードを貼り付ける

という作業をまず行います。

ただし、これだけだと固定ページが存在するだけでサイドバーに表示されることになっていないので、サイドバーに表示する設定をこれから加えます。

1. ダッシュボード画面の「デザイン」を選択
2. 「サイドバー」をクリック
3. 「＋モジュールを追加」をクリック
4. 「リンク」を選択
5. サイドバーのタイトルとリンク名を編集（「このサイトについて」、「お問い合わせ」など）
6. 先ほど各自で設定した、お問い合わせフォームの固定ページのリンク（http://.....）を入力
7. 「適用」を忘れずにクリック

動作を確認する

はてなIDをクリックした先に表示される場合も、サイドバー設定の場合も、

設定した後、設置したとおりにお問い合わせフォームが出てくるか確認しておきましょう。

思ったよりお問い合わせフォームの大きさが小さい…

という場合は、グーグルフォームにもう一度ログインして、幅と高さを調整した後にhtmlをコピーして設定しなおしましょう。

まとめ

 初心者でも簡単にできる、はてなブログでのお問い合わせフォームの設置方法を紹介しました！

はてなブログで他のカスタマイズもやってみたいよ！という方は、こちらの記事も参考にしてみてください➡

【初心者向け】はてなブログ無料版のカスタマイズまとめ - Free Life Kyoka Blog

 最後まで読んでくださりありがとうございました🌹

 これからもはてなブログのカスタマイズ方法について詳しく知りたい！という方は、プロフィール欄から読者登録をお願いします♪