Web
Analytics

雨のち晴れ

思った事をノンジャンルで綴ります

雨のち晴れ

MENU

【はてなブログ】お問い合わせフォームの作り方

はてなブログ以外の方も

はてなブログでのお問い合わせフォームの作り方

こんにちは。今さらながらではありますが、自分にとっての備忘録とはてなブログを始めたばかりの方のために、お問い合わせフォームの作り方を載せておきます。

お問い合わせフォームとは?

お問い合わせフォームとは?

お問い合わせフォームは、読者の方が何か質問をしたい場合に質問を送ることができるブログパーツで、ブログを運営していく上で必要ではありませんが、あった方が良い機能です。

例えばコメント欄やはてなブックマークからでも意見を伝えることはできますが、その場合は他の方に見られてしまいます。

ブログの作者だけに伝えたい内緒の話?なんかは、このお問い合わせフォームが設置されていると読者の方は安心できると思います。

また、自分のメールアドレスをブログに載せてしまうと迷惑メールやいたずらメールが届く可能性もありますが、お問い合わせフォームの場合はメールアドレスを表示させないままメールを受け取ることができます。

すごく便利な機能ですよね。

私のブログでも使っていて、今までに3件程お問い合わせをいただきました。

いくつか無料で設置できるものがありますので、ご紹介したいと思います。

Googleフォーム

グーグルフォームの作成のやり方

こちらは定番の無料フォームになります。

私も使っていますが、設置が便利であることとカスタマイズがある程度できるので、作っていて楽しいです。

まずは、こちらからサイトに行きます。

では、早速お問い合わせフォームを作ってみましょう。

グーグルフォームでの設定の仕方

テンプレートもありますが、お問い合わせフォームの場合は空白で大丈夫です。

フォームのスタイルは空白をクリックします

クリックした後は、次のように入力していきます。

①~⑤まで設定していきます

①まず、タイトルを入力します。ここは「問い合わせフォーム」にしておきます。この下に「ご覧いただき、ありがとうございます。ご意見やご質問があれば、お気軽にお問い合わせください。」等の説明文を打ち込んでおくと分かりやすいです。

②質問の種類を選択します。ここでは、「記述式」を選んでください。

③次に無題の質問と書かれた部分に、例えば「お名前」と入力します。

④右下にある「必須」ボタンを選択しておきます。

⑤質問を追加します。

これで1つ目の質問を作ることができました。このような感じになります。

後は、必要な質問項目を同じ操作で増やしていけば、お問い合わせフォームが完成します。

質問内容は自由に決める事が出来ます。

私が設定した内容

①お名前:記述式(短文)※必須

②メールアドレス:記述式(短文)※必須

③件名:記述式(短文)※必須

④内容:記述式(段落)※必須

私は上記で設定しました。記述式(段落)は、記入量が多くなる場合で、「内容」の項目のみこれに設定しています。また、必須と書かれてある項目に関しては、読者が必ず入力をする必要がある項目になります。他に、ブログアドレス等を追加するのも良いかもしれません。

その後、上にある回答をクリックしてから、設定ボタンを押し、「新しい回答についてのメール通知を受け取る」にチェックを入れておきましょう。

メール通知を受け取るにクリック

設定が終われば、右上の送信ボタンをクリックします。

すると、次の様な画面になりますので、リンクか埋め込みかどちらかを選択してください。

リンクか埋め込みかを選びます

リンクの場合は作ったお問い合わせフォームに飛ぶことができ、埋め込みの場合はブログにそのままお問い合わせフォームを作ることができます。このような感じです。

お問い合わせフォームの完成イメージ

formrun(フォームラン)

formrunの設定のやり方

お問い合わせフォームとしてはGoogleフォームが便利で十分使うことができますが、もう少し機能が追加されて、デザイン性に富んだツールとしてフォームランがありあます。

いくつか用意されたテンプレートを使い、必要な項目や不必要な項目をクリックしながら追加・削除ができるので便利です。

また、そのデザイン性や機能性が評価され、2018年度グッドデザイン賞に選ばれています。

では、どのように作成していくか見ていきたいと思います。設定は簡単です♪

まずは、登録が必要です。

フォームラン登録の手順

ユーザー登録に各種情報を入力するか、またはGoogleのアカウントで連携することも可能です。

その後、チーム名を登録します。私の場合はブログアドレスの「meipapa」で登録しました。

ここまで登録できれば、フォームを作ることができます。

フォームクリエイターで簡単作成をクリック

簡単作成をクリックします

すると必要性に応じたお問い合わせフォームの、各種テンプレートがずらりと並べられているのがお分かりいただけると思います。

フォームテンプレートの例

これはGoogleフォームにもありますが、こちらの方が様々なテンプレートが用意されていますので、見るだけでも勉強になります。

例えば、「大会へのエントリー」のフォームでは、血液型や緊急連絡先の方のお名前なども最初から設定されています。万が一怪我をしたときのためでしょうか?

「体験学習のお申込み」のフォームでは、ご希望の受講スタイル、学習目的などの項目が入っています。

こういったテンプレートがあると、フォーム作成時の項目ミスを減らすことができますよね。

テンプレートは全部で25種類ありますので、参考になりそうなものを探してみてください。

もちろん自分で好きな項目を増やしたり減らしたりすることが可能です。入力のやり方はGoogleフォームと同じように設定できます。

テンプレートを変更して、保存ボタンを押せばリンクが表示されます。

完成した後は、リンクか埋め込みかを選びます

こちらをコピーすれば、Googleフォームと同じようにリンクが作れます。

また、下にあるiframe埋め込みフォームを設置すれば、埋め込み型のお問い合わせフォームを作ることができます。

さらに、formruの場合は、お問い合わせフォームの作成だけでなく、問い合わせ対応を管理したり、顧客管理をしたりすることも一括して行うことができますので、便利です。

2つのお問い合わせフォームについてご紹介しました。どちらを使うか決まりましたか?

それでは、これらをはてなブログで設定していきましょう。

はてなブログでの設定

はてなブログでの設定のやり方

どちらのお問い合わせフォームもリンクか埋め込みの好きな方を使うことができます。また、今回はGoogleフォームの場合で説明しますが、formrunの場合も全く同じやり方になります。

リンクを貼る場合

まずは、リンクの方から説明します。

まず、ダッシュボードを開いて、「デザイン」をクリックします。

はてなブログでの設定方法、まずはデザインをクリック

次に、「スパナのマーク」をクリック

スパナのマークをクリックします

サイドバー」をクリック

サイドバーをクリックします

下に「+モジュールを追加」とありますので、それをクリックすると「リンク」という項目があるので、それをクリックします。

上のタイトルは「このサイトについて」、下のタイトルは「お問い合わせ」でどうでしょうか。その横のリンクに先ほどGoogleフォームでコピーしたリンクを貼り付けます。

各項目に入力をします

その後、左下の「適用」を押してから、「変更を保存する」を押して完了となります。

保存し忘れないようにしましょう

サイドバーにこのような感じで完成しました!

完成したお問い合わせフォームのリンクのイメージです

では、次に埋め込み型の場合の設定の仕方です。

埋め込み型の場合

上に書いたように「サイドバー」→「+モジュールを追加」までは同じです。

その後下にスクロールをすると、「</>HTML」とありますので、そちらをクリックします。

タイトルは「お問い合わせフォーム」、その下の<p>…</p>の部分に埋め込み用のアドレスをコピーして貼り付けます。しかし、このままではサイドバーからはみ出てしまう可能性がありますので、幅を360にしてみてください。

埋め込み型の場合の設定の仕方です

これで大丈夫です。左下の「適用」を押してから、「変更を保存する」を押して完了です。

サイトでは、このように表示されます。

完成した埋め込み型のお問い合わせフォーム

どうしても縦に長くなってしまいますので、スクロールバーができてしまいますが、リンクを踏まずにお問い合わせすることができます。

この辺りは好みに分かれますが、私は埋め込み型ではなく、リンクで表示させるほうが見栄えがいいと思います。

さいごに

さいごに

いかがでしたでしょうか?

お問い合わせフォームは他にも種類があるようですが、私がおすすめするのはこの2つになります。

グーグルアドセンスに合格した後は、設置が必須となりますので、まだ合格されていない方も事前に設定しておいた方がいいと思います。

アドセンスを使っていない方でも、問い合わせフォームがあったほうが何かしらの連絡やオファーが来ることもありますので、設置をおすすめします。

先日、私のようなブログでも広告設置のオファーを受けました。お問い合わせフォームがなければ、そういう機会にも出会えなかったかもしれません。

是非、設置がまだの方はこの機会にお問い合わせフォームを試してみてください。

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