お役立ちアフィリエイト

アフィリエイトに役立つ情報をあなたに

【図解】Googleフォームではてなブログにお問い合わせフォームを作成する方法

こんにちは、サクです。

今日は、はてなブログにお問い合わせフォームを設置する方法を解説していきます。

 

 

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

お問い合わせフォームとは
読者の方や企業の方から連絡をもらう時に必要なもので
こちらで用意した項目に入力してもらいメールで連絡をしてもらうというものです。

自分のメールアドレスをブログやウェブサイトに載せなくても

メールを送ってもらうことができる便利なものなんです。

アフィリエイトをするなら必須の機能ですね!

 

今回はGoogleフォームではてなブログに設置する方法を記載していきたいと思います。
Googleアカウントが必要なので
まだ持っていないという方は

こちらの記事から作ってみてくださいね。

oyakudachiafi.hatenablog.com

 

フォーム作成手順

Step1 Googleフォームトップページ

まず、Googleフォームにアクセスします。

Googleフォームのトップページはこちら

Googleフォーム トップページ

トップページの「Googleフォームを使ってみる」ボタンをクリックしてください。

 

Step2 新規作成

f:id:oyakudachiafi:20181116232253j:plain

フォームの新規作成を行います。
左上の「+」となっている空白という項目をクリックしてください。

 

Step3 フォームの項目作成

f:id:oyakudachiafi:20181116232331j:plain

フォームで使う項目を作成していきます。
「無題のフォーム」を「お問い合わせ」に変更してください。
ここがフォームのタイトルとなります。

 

f:id:oyakudachiafi:20181116232357j:plain

相手に入力してもらう項目を作成していきます。
「無題の質問」を「お名前」に変更してください。
右側にある、現在「ラジオボタン」となっている箇所をクリックしてください。
ここで、入力形式を選ぶことができます。
「お名前」を入力してもらう場合は「記述式」にしておきましょう。

 

f:id:oyakudachiafi:20181116232418j:plain

右側の枠外にあるナビゲーションの一番上の「+(質問を追加)」をクリックすると
項目を増やすことができますので、クリックしてください。

 

f:id:oyakudachiafi:20181116232456j:plain

先ほどと同じように、「メールアドレス」「件名」「本文」の項目を追加します。

  • メールアドレスは「記述式」
  • 件名は「記述式」
  • 本文は「段落」

で設定をします。
また、右下の「必須」という箇所をクリックすると、選択している項目を入力必須項目にすることができます。

 

Step4 フォームの設定

f:id:oyakudachiafi:20181116232548j:plain

次にフォームの設定をしていきます。
右上にある歯車のマークをクリックしてください。

 

f:id:oyakudachiafi:20181116233255j:plain

設定の画面が開きますので
プレゼンテーションのタブをクリックしてください。
「別の回答を送信するためのリンクを表示」のチェックははずしてください。
「確認メッセージ」は送信が終わった後に表示するメッセージのことです。
「お問い合わせいただきありがとうございました。」など、送信してもらったお礼の文章にしておくといいかと思います。
設定が終わったら右下の「保存」ボタンをクリックしてください。

 

Step5 テーマの変更

テーマの変更

フォームのテーマを変更する事もできます。
先ほどの設定の近くにあるパレットのアイコンをクリックしてください。

 

f:id:oyakudachiafi:20181116234430j:plain

右側に「テーマオプション」が出てきたと思います。
ここから「ヘッダー」「テーマの色」「背景色」「フォントスタイル」の項目を変更することができます。
特に変更がなければそのままでも大丈夫です。

 

f:id:oyakudachiafi:20181116234458j:plain

テーマの色を藍色に変更してみました。

 

Step6 回答設定

f:id:oyakudachiafi:20181116234525j:plain

最後に回答の設定を行います。
「質問」タブから「回答」タブに切り替えてください。
右側にある縦になった三点リーダーをクリックしてください。

 

f:id:oyakudachiafi:20181116234555j:plain

「新しい回答についてのメール通知を受け取る」をクリックしてチェックしてください。
これで回答があればメールで通知がくるようになります。

 

はてなブログへの設置方法

Step1 タグを取得

f:id:oyakudachiafi:20181116234649j:plain

右上の「送信」ボタンをクリックしてください。

 

f:id:oyakudachiafi:20181116234709j:plain

「フォームを送信」という画面が出てきたかと思います。
その中の「<>」というタブをクリックしてください。
右下の「コピー」ボタンをクリックするとコードがコピーできます。

 

Step2 はてなブログに貼り付ける

f:id:oyakudachiafi:20181116234745j:plain

はてなブログの「記事を書く」から「HTML編集」のタブをクリックしてください。
そこに先ほどコピーしたコードを貼り付けます。
そして、編集オプションからカスタムURLを「contact」にしておきましょう。
最後に「公開する」をクリックすれば完了です。

はてなブログProの方は固定ページで作るといいですね。

 

まとめ

フォームの作成おつかれさまでした。

実際に公開できましたでしょうか。

私も同じようにお問い合わせフォームを作ってみましたので

何かありましたらご連絡ください。

 

oyakudachiafi.hatenablog.com