フォームメーラーを使ってはてなブログに問い合わせフォームを設置する方法、使い方

はてなブログにお問い合わせフォームを設置する場合、ほとんどの場合はGoogleアカウントとGoogleフォームを使って作成すると思います。

しかし、この方法だと、メールアドレスに直接送られてこないので、別にスプレッドシートを用意して確認しないといけなくなります。

送られてきたお問い合わせ自体を一覧で見ることができるので便利ではあるのですが、いちいち自分で確認しないといけなくなりますよね。

これ、結構面倒なんですよね。

できれば送られてきたお問い合わせをメールで確認できるようにしたいなって思っていて、いろいろ探してみました。

そしたら、「フォームメーラー」というサービスがあるのを見つけました。

これは、簡単な設定をするだけでメールにお問い合わせが送られてくることになるので、確認がタイムリーにできるようになります。

そんな便利なもののやり方を紹介しますね。

ちょっと長いので、根気強くやってみてください(笑)

フォームメーラーに登録しよう

早速ですが、フォームメーラーは、会員登録をしないとサービスを利用することができません。

フォームメーラーはこちら⇒https://www.form-mailer.jp/

フォームメーラーのトップ画面はこんな感じです。

まずは、右上の新規登録をクリックしましょう。そうすると、登録画面に移動します。

フォームメーラーは有料なの？

フォームメーラーは、有料で使えるものではあります。しかし、機能は限定されますが、無料で使うこともできます。

無料だと作れるフォームは5つまで、設定可能な項目は7つまで、対応コードも有料に比べて少ないです。

しかし、今回はお問い合わせフォームを作成するだけなので、無料版でも問題ありません。また、一つしか作らない上に使用する項目は最低限しか使用しないので数が少なくてもOKです。

なので、この画面の赤のフリーの新規登録をクリックしましょう。

メールアドレス登録画面へ

新規登録をクリックするとメールアドレス入力画面が出てきます。

ここで入力するメールアドレスは、今後お問い合わせが来た時に送られてくるアドレスになるので、届いてほしいメールアドレスを入力しましょう。

私はGメールアドレスを入力しました。

登録が完了するとメールが届く

送信をクリックすると登録に使用したメールアドレスに登録申請メールが送られてきます。

今回は、Gメールアプリから確認しました。

登録申請メールには、登録に使用したアドレスと、アクセスするためのURLが書かれています。

そのメール内のURLは必ずタップしてください。

登録が完了したらログインできる

ここからは、フォームメーラーでのお問い合わせフォームの作成になります。

ログインするとこんな画面になります。

この画面は、スマホでログインした時も同じ画面が出ます。なので、スマホからも作ることができますが、ちょっと大変なので、できればパソコン画面から作りましょう。

この画面になったら「一般フォームを作成」をクリックしてください。

注文フォームは有料でしか使えません。一般フォームでお問い合わせフォームが作れるので、こちらで問題ありません。

クリックすると以下の画面が出てきます。

ここに、「お問い合わせ」と入力し、フォーム説明には「お仕事などのお問い合わせはこちらから受け付けています。」などを書いておくといいでしょう。

入力が完了したら「設定を保存する」をクリックしてください。

そうすると先ほどの画面の下に「お問い合わせ」という項目が作成されます。

はい！画像作成ミスってしまったのに後で気が付いたので全部の設定が完了した後に画像取りました汗

なので、お問い合わせの横に公開中が二つ並んでますけど、本来は作りたては非公開になっています・・・。

お問い合わせフォームを作る

ここまでできたらお問い合わせフォームを作っていきます。

まずは、「入力項目編集」というところをクリックしてください。

クリックするとこんな画面が出てきます。

この画面が出てくると、お問い合わせとなっていて、色んな項目がすでにデフォルトで設定されていますけど、必要なのは以下の3つ又は4つです。

• 名前
• メールアドレス
• 問い合わせ内容
• 連絡先

連絡先は最悪なくてもOKですが、この辺はお好みで良いでしょう。

不要な項目は画像のようにカーソルを合わせると黄色くなります。

黄色くなると小さくメニューが表示されていると思うので、赤い×ボタンで消していくことができます。

追加したいのは左の基本パックというところにあるテキストエリアから選択できます。

欲しい項目にカーソルを合わせてドラッグアンドドロップで右側の欲しい位置に合わせておくだけで簡単に追加できます。

画像のようにするとすっきりしていて良いでしょう。

鉛筆ボタンで編集できる

黄色い鉛筆ボタンで編集ができるので、クリックしてみましょう。

そうすると上記のような画面が表示されるので、赤枠で囲った入力必須の項目にチェックを入れておきましょう。

これを入れておくことで、お問い合わせの際に入力をしないと送れないようになります。

私は表示させる項目全てにチェックを入れました。

テキストエリアを編集しよう

追加したテキストエリアを編集しましょう。

編集画面を開きましょう。

開いたら、項目名を「お問い合わせ内容」に編集して、入力必須にチェックを入れましょう。

それ以外は特に触らずに「設定を保存する」をクリックすれば編集は完了です。

環境設定を編集しよう

ここまでできたらフォームの項目設定は完了です。

次に環境設定をしましょう。

入力項目編集の隣にある「環境編集」をクリックしてください。

この画面になるので、公開設定の「PC」と「スマートフォン」の項目を公開するにチェックを入れてください。

携帯は公開してもしなくてもOKだと思います。

完了したら「設定を保存する」をクリックしましょう。

一度確認してみよう！

ここまでできたら一度確認しましょう。

お問い合わせの環境設定の下にあるURLをクリックすると、設定したお問い合わせフォームができています。

こんな感じになっていると思います。

確認できたら一度フォームメーラーに戻りましょう。

各種画面設定を行う

フォームメーラーに戻ったら「環境設定」⇒「各種画面設定」と進みます。

「完了画面設定」内の「完了メッセージ」の項目にコメントを書きます。

お問い合わせが完了した際に表示される文章を設定します。

例文

「お問い合わせありがとうございます。

内容を確認して、折り返しご連絡差し上げます。」

など、書いておくと良いでしょうね。

書き終わったらその他の部分は触らずに画面下の「設定を保存する」をクリックしましょう。

各種メール設定を行おう

続いて、メール設定をしましょう。

これは、登録があった時に、自分に連絡がきたときに知らせるメールの設定です。

画像のように、「各種環境設定」の下の「各種メール設定を」クリックしてください。

ここでは、「管理者宛メールの件名」と「管理者宛メールの送信先アドレス」に自分のアドレスと「お問い合わせ」と書いて設定を完了しましょう。

そしたら、そのまま画面をスクロールしていきましょう。

「自動送信メール」は使用するにチェックして、

自動送信メールの件名よ本文には、お問い合わせした相手に自動で送信されるメール内容を書きましょう。

件名には「お問い合わせありがとうございます」と書いておくと良いでしょう。

本文には、自動で送信したい内容を書きましょう。

できたら設定を保存しておきましょう。

最後にデザインを設定しよう

ここまでできたらお問い合わせ内容の設定は終わりました。

最後にデザインを少し変更しましょう。

デザインの選択で画面の色味を選択できたり、フォームやレイアウト、文字サイズ、入力補助などが設定できます。

ここは好きなものを選択しましょう。

完了したら設定を完了しましょう。

ブログにお問い合わせフォームを設置するなら

ここまでの設定ができたら、ブログにお問い合わせフォームを設置しましょう。

設置は簡単で、先ほど確認に使ったURLをブログにリンクさせて貼ればOKです。

はてなブログだと、「デザイン」⇒「カスタマイズ」でサイドバー又は、グローバルメニューなどの好きなところに設置してください。

はてなブログでサイドバーに設定するなら「モジュール追加」⇒「リンク」と進みます。

リンクで作成するのは、設定したURLを自動でリンクしてくれるように設置してくれるからです。

作ったお問い合わせはHTMLコードを生成することもできるので、これを使って設置することもできます。

好きな方法でやってみましょう。

私はサイドバーに設定しました。

クリックすると設定したお問い合わせフォームが開きます。

開くとこんな感じになります。

まとめ

今回は、フォームメーラーを使ったお問い合わせフォームの設定方法を紹介しました。

Googleフォームでお問い合わせフォームを作成するのはとても簡単ですが、その代わりメールで受け取ることができません。

フォームメーラーは、設定がとても大変ですが、メール通知で問い合わせを確認することができます。

好みで設定すると良いですね。

はてなブログのカスタマイズに関しては、専用の本がありますので、そちらで詳しく見てみましょう。

www.yurimani.xyz

はてなブログの本では、Googleフォームでお問い合わせを設定する方法が書かれていますので、手に取ってみると良いでしょうね。