コトダマ

コトダマ

退屈と戦う。知識を深める

MENU

はてなブログにお問い合わせフォームを設置する方法 画像で解説

 

 はてなブログを書いている方で問い合わせを受け付ける場合にメールアドレスをそのままサイトに記載するには抵抗がある場合がある。

アドレスを公開することなくブログを見てくれた人からの意見や指摘などを受け付けたい。

そんな方にはお問い合わせフォームを設置することがおススメ。

 

はじめにどのようなフォームとなるかイメージを紹介しておきます。

 

【はてなブログでの問い合わせフォームの入り口】

f:id:turezurenaru:20170214144047j:plain

 

【お問い合わせフォーム】

f:id:turezurenaru:20170214144103j:plain

※問い合わせで入力された内容は指定のアドレスに転送する設定も可能。

 

 作成方法を以下にまとめる。

 

 目次

 

1.Google フォームで問い合わせフォームを作成

1-1.Googleから「Googleアプリ」を選択

※ブラウザはChromeを推奨。Internet Explorerの場合崩れて表示される事象がある。

f:id:turezurenaru:20170214125257j:plain

 

1-2.「googleアプリ」から「もっと見る」を選択

f:id:turezurenaru:20170214125632j:plain

1-3.「さらにもっと」を選択

f:id:turezurenaru:20170214125825j:plain

1-4.「フォーム」を選択

f:id:turezurenaru:20170214125919j:plain

1-5.「Googleフォームを使う」を選択f:id:turezurenaru:20170214125948j:plain

 

1-6.右下の丸で囲われた「+」(新しいフォームを作成)を選択

f:id:turezurenaru:20170214130052j:plain

 

1-7.必要項目を入力

 ①「無題のフォーム」を「お問い合わせ」などにする。

 ②「フォームの説明」に説明を記載。(任意)

 ここからがお問い合わせフォームの入力設定欄になる。

 ③「お名前」とし右の部品をデフォルトの「ラジオボタン」から「記述式」にする。

 ④項目を必須にする。 推奨は「必須」だが好きなほうを設定して問題ない。

  ●の位置が右が必須で左が任意

 ⑤+を押し項目を追加

f:id:turezurenaru:20170214130259j:plain

 「お名前」を追加した③~④と同じ手順で「メールアドレス」「件名」「お問い合わせ内容」を追加する。

 「お問い合わせ内容」は長文の場合もあるため部品は段落にする。

 

1-8.不要な項目を削除

  デフォルトで5つの項目の枠があるため、4項目を設定すると1項目余るので

  5つ目の項目は削除する。

f:id:turezurenaru:20170214131123j:plain

 

1-9.右上のカラーパレットを選択し背景色を設定

  デフォルトは紫となっている。変えたい場合には任意で変更をする。

f:id:turezurenaru:20170214131630j:plain

 

1-10.右上の「送信」ボタンを押下

   どこかに内容が送信されるわけではないので気にせず。

f:id:turezurenaru:20170214131818j:plain

 

1-11.「<>」を選択

f:id:turezurenaru:20170214131951j:plain

 

1-12.「HTMLを埋め込む」に記載されているアドレスをコピー

          このアドレスを後ほど「まとめブログ」で記載する。

f:id:turezurenaru:20170214132234j:plain

Googleフォームの設定は完了。これまでの操作で開いたブラウザは閉じて問題ない。

 

2.まとめブログの設定

2-1.記事の新規投稿

  タイトルは「お問い合わせ」などにする。

  そのまま投稿すると最新記事となるため、標準オプションを選択し「投稿日時」を

  任意の過去の日付に変更する。

f:id:turezurenaru:20170214132940j:plain

 

2-2.「HTML」編集とし1-12でコピーしたアドレスを貼り付け投稿

      「HTML」編集に変更するのを忘れるとフォームが正しく表示されないため

        気をつけること。

f:id:turezurenaru:20170214133524j:plain

 

2-3.投稿した記事を照会しURLをコピー

       記事一覧から投稿した記事を探して照会する。

       投稿日時を過去にして投稿したため最新記事ではなく過去の記事の方にある。

f:id:turezurenaru:20170214133850j:plain

 

 

2-4.「はてなブログ」のデザインを選択

      ここからブログのサイドバーに問い合わせのリンクを貼る設定になる。

f:id:turezurenaru:20170214134457j:plain

 

2-5.「カスタマイズ」→「サイドバー」を選択

f:id:turezurenaru:20170214134758j:plain

 

2-6.「リンク」の「編集」を選択

f:id:turezurenaru:20170214134945j:plain

 

2-7.リンク名とアドレスを記載し「適用」ボタンを押下

   リンク名は「問い合わせ先」など任意の名前で設定する。
   アドレスは2-3の手順でコピーしたアドレスになる。

f:id:turezurenaru:20170214135117j:plain

 

2-8.「変更を保存する」ボタンを押下

f:id:turezurenaru:20170214135619j:plain

これで「はてなブログ」の設定は完了。

 

3.問い合わせ内容の参照

3-1.Googleフォームから作成したフォーム(最近私用したフォーム)を選択

       Googleフォームを開く手順は1-1~1-6と同じ。

f:id:turezurenaru:20170214135940j:plain

 

3-2.「回答」を選択

  問い合わせが来ている場合ここで内容の確認が出来る。

f:id:turezurenaru:20170214140135j:plain

 

4.問い合わせ内容を指定したアドレスに転送

問い合わせを随時チェックするのが面倒な場合は転送する設定をしておくと便利。

 

4-1.フォームから画面右上のその他のアイコンを選択

  3-2の手順で回答のフォームを表示しそこから画面右上の

  その他を選択する。

f:id:turezurenaru:20170214140737j:plain

 

4-2.「スクリプトエディタ」を選択

f:id:turezurenaru:20170214141013j:plain

 

 

4-3.コード.gsに以下の内容を貼り付け転送先アドレスを修正

  var toにあるアドレスを転送したいアドレスに修正する。

f:id:turezurenaru:20170214141114j:plain

--ココから--------------------------------------------------------------------------------------------------------

function sendForm(e){
  var subject = "問い合わせがありました";  //件名
  var body = "問い合わせ内容\n------------------------------------------------------------\n\n";  //本文
  var to    = "yourmail@xxx.XXX";

  var res = e.response;
  var itemResponses = res.getItemResponses();
  for (var j = 0; j < itemResponses.length; j++) {
     var itemResponse = itemResponses[j];

     body += itemResponse.getItem().getTitle() + "\n";
     body += itemResponse.getResponse() + "\n\n";
  }
  MailApp.sendEmail(to, subject, body);   //メールを送信
}

--ココまで--------------------------------------------------------------------------------------------------------

 

4-4.「リソース」→「現在のプロジェクトのトリガー」を選択

f:id:turezurenaru:20170214141527j:plain

 

4-5.「OK」を選択

        プロジェクト名はそのままで大丈夫。

f:id:turezurenaru:20170214141632j:plain

 

4-6.「トリガーが設定されていません。今すぐ追加するにはここをクリックしてください。」を選択

f:id:turezurenaru:20170214141748j:plain

 

4-7.設定を以下にし「保存」を選択

f:id:turezurenaru:20170214141941j:plain

 

4-8.「許可を確認」を選択

f:id:turezurenaru:20170214141845j:plain

 

4-9.「許可」を選択

f:id:turezurenaru:20170214142537j:plain

以上で転送の設定は完了です。

設定の関係で開いていたブラウザはここで閉じて問題ない。

 

後は自分でお問い合わせフォームからの送信とその内容が受信および転送できているかお試してください。