炭酸せんべい

気になったことを適当に。 MacやiPhoneのこと多め、DIYも。

MENU

はてなブログ お問い合わせフォームの作成と設置方法



 

f:id:ypmemo:20170521111516j:plain

 

オーブ足らん、どうもナカニシ(@tssb26)です。

ブログのカスタマイズを日々ちょこちょことしているのですが

何かあったときに私へのコンタクト手段が無いなぁと

無いことはないんです

TwitterのDMでも連絡はできるんですけど、知らない人にはわかりにくいですよね

メールアドレスをばーんと載せるのも時代遅れっぽいしスパムも嫌なので

簡単に作れるサービスがありましたので、メールフォームを作ってみました

 

 

 

「Googleフォーム」で作成

 

こちらの記事を参考にさせていただきました、ありがとうございました!

www.mutant-tetsu.com


尚、Googleアカウントが既にあることを前提として書いてます

 

 

作成手順

 

Google「Googleアプリ」から「Googleフォーム」

Googleにログインして矢印のルービックキューブみたいなマーク「Googleアプリ」をクリック

Google

 

「もっと見る」と表示がありますので、もっと見てください

f:id:ypmemo:20170521111744p:plain

 

さらにもっと見てください

f:id:ypmemo:20170521111754p:plain

 

画面が切り替わったら、どんどん下へスクロール

f:id:ypmemo:20170521111806p:plain

 

↓この紫の「Googleフォーム」のアイコンを探してクリック
小さい上に地味なアイコンなので、下へスクロールしながら見逃しがち

f:id:ypmemo:20170521111822p:plain

 

「Googleフォーム」の設定

フォームの作成です「Googleフォームを使う」をクリック
ってTomって誰やねん(お約束)

f:id:ypmemo:20170521111924p:plain

 

画面右下の「+」マークをクリックして「新規メールフォーム」を作ります
2つ目以降のメールフォームを作る場合もここをクリックで量産可能

f:id:ypmemo:20170521111941p:plain

 

タイトル入力

① フォームのタイトル
② 簡単な説明を記述できます

f:id:ypmemo:20170521112008p:plain

 

入力項目の追加と設定

① 「+」ボタンで入力項目を追加できます
② 記述式、ラジオボタン、プルダウンなどの属性選択
③ 入力必須なら右へスライドしてオンにする
④ サブメニューから項目の説明欄の追加ができます

項目削除はゴミ箱ボタン

f:id:ypmemo:20170521112033p:plain

 

仕上げ

① 背景色を選べます
② フォームメールのプレビュー

プレビューしながら修正してください

f:id:ypmemo:20170521112058p:plain

 

お知らせ設定

タブ「回答」を開いてもらって「新しい回答についてのメール通知を受け取る」のところにチェックを入れることで
問い合わせがあればログインしているアカウントのgmailに通知が届くようになります

f:id:ypmemo:20170521112133j:plain

 

埋め込みコード取得

できあがったら右上の「送信」を押して下さい
誰にも送信されませんのでご安心ください

f:id:ypmemo:20170521112228p:plain

 

<> 」(①)を押すと埋め込みコード(②)が表示されますのでまるごとコピー

f:id:ypmemo:20170521112319p:plain

 

これでフォームが完成しましたので、あとはブログに貼り付けるだけ


深呼吸してマミー飲んでハッピーターンでも食べておもむろにブリッジでもして休憩してください


あともうちょいです

 

 

ブログへ貼り付ける 

 

過去日付で記事を書く

普通に記事を書いて下さい、タイトルは「お問い合わせ」などとして
HTML編集」モードに切り替えて、先ほど作成したメールフォームの埋め込みコードをペーストしてください

ここで一旦プレビューしていただいて、縦にスクロールバーが出ている場合は下線の「height="数字"」の数字の部分を大きくしてください
(私はスクロールバー出てるのが嫌なので調整しました)

f:id:ypmemo:20170521112435j:plain

 

編集オプション」から投稿日時を過去の日付にして記事を投稿してください

私はブログ開設時の日付にしました
こうすることで、新着ブログとして表示されるのを回避します
こっそりしれーっとアップするんです、あたかも存在したかのように

f:id:ypmemo:20170521112502j:plain

 

 

リンク設定

あとは、投稿した記事のアドレスを好きなところに貼り付けてもらえばいいんですが
私は↓こんな風にサイドバーのプロフィール欄に貼り付けました

f:id:ypmemo:20170521112714j:plain

 

この方法でよければ下記コードをコピペして使ってください
[作ったメールフォームのアドレス]に先ほど投稿した問い合わせフォームブログのアドレスを入れて下さい

 

<p><i class="blogicon-mail"></i> お問い合わせはこちらまで<br />
<a href="[作ったメールフォームのアドレス]" style="text-decoration: underline; font-weight: bold; color: #008080;">メールフォーム</a>
</p>

 

固定ページを使った方法

はてなブログには、アドレスを固定してページを作成することができる「固定ページ」機能があります
この方法でも同じことができますので、手順を掲載しておきますね

 

固定ページ作成

場所は「ダッシュボード」→「固定ページ」です

f:id:ypmemo:20180412111154j:plain

 

アドレスを決める

固定ページのアドレスを決めます、とりあえず「otoiawase」と入れてみました
この場合、出来上がる固定ページのアドレスが「ドメイン+otoiawase」になります

当ブログの場合「www.tssb26.com/otoiawase」これが固定ページのアドレスになります

アドレスが決まれば「ページを作る」を押します

f:id:ypmemo:20180412111232j:plain

 

ページ作りこみ

いきなりページ作成モードに入ります
作り込みといっても、タイトルは「お問い合わせフォーム」とかにして本文にGoogleフォームのコードを入れるだけです

コードを貼り付ける場合、編集モードをhtmlかmarkdownにして貼り付けて下さい

プレビューとかみながらええ感じになれば下の「公開する」を押してください

f:id:ypmemo:20180412111307j:plain

 

完成

こんな感じに、固定ページができました
ここから編集モードに入れます
削除は編集モードに入ると一番下に削除ボタンがあります

f:id:ypmemo:20180412111338j:plain

 

あとは、できあがった固定ページのアドレスを貼り付けたいところに貼り付ければOK

ブログの一記事にしてしまうと、関連ページに表示されたりすることもありますので、固定ページでこしらえたほうがいいかもしれません

 

最後に

お疲れ様でした、一度テスト送信しておくのをお忘れなく

お問い合わせフォームつけよっかなぁと考えてらっしゃる方の参考になればいいかなぁと思います


何かご質問などございましたらこちらのメールフォームまで

お問い合わせフォーム

 

ほら、こんな風にさりげなくかっこよくさわやかに案内ができるわけです


「お問い合わせはこちらのメールアドレスまで→abc ※ untara.com(※マークを半角アットマーク@に変えて下さい)」


この時点でめんどくさくてメール送信やめよっかなと思う人は思うはず

何パーセントかはメール逃してるはず

お仕事依頼だったらもったいない話ですよ

手順はだらだらと長いですが、難しいことはしてませんのでのんびり作ってみてください

ってことで、お仕事依頼お待ちしております

 → お問い合わせフォーム

 

 

 

モデル : 河村友歌|ぱくたそフリー写真素材