日常の最中に、

ちょっとした楽しみを。

たった5分!Googleフォームでブログの問い合わせフォームを作る方法

f:id:saichu:20170615093324p:plain

 

毎日更新するといったな……アレは嘘だ。

 

どうもー、もなかです。

 

 

お問い合わせフォーム、設置してますか?

僕はまだ設置してませんでした!

 

でもなんか設置した方が良いらしいですよ奥さん!

いざ設置してみたら意外と簡単でなんでもっと早く設置しなかったのか不思議なくらい。

 

 

大丈夫、みんな設置してるから。

ホラお金とかもかかんないし。

逆にイマドキ設置してないなんて言ったら笑われちゃうよ?

スグに出来るから試してみて?

 

ホント、5分だけでいいから。
セッチしよ。

お問い合わせフォームの作り方

まずは完成品として当ブログのお問い合わせフォームが以下です。

どしどし問い合わせてね!

お問い合わせはコチラまで - 日常の最中に、

最低限の項目のみです。必要であれば後から追加も出来るのでひとまずこれで良いかと。

 

Googleフォームにアクセス

Google フォーム - アンケートを作成、分析できる無料サービス

とにかくまずはアクセス!
タブを一個開いてー。開いた?

f:id:saichu:20170614162829p:plain

魅力的なフォームを作ろう

いや作るけどさ。その謎の食べ物なに? 美味いの?

 

【Googleフォームを使う】をクリックします。

新しいフォームを作成

以前に作ったフォームがあればここに表示され、再編集できます。

f:id:saichu:20170614163320p:plain

右下の赤い〇を押すとフォームの作成画面になります。

f:id:saichu:20170614163604p:plain

初期画面はこんな感じ。

各項目の作成

「お名前」「返信用メールアドレス」「お問い合わせ内容」の項目を作成します。

f:id:saichu:20170614182334p:plain

タイトルとなる「無題のフォーム」に「お問い合わせ」

一つ目の項目「無題の質問」に「お名前」と入力していきます。

次に「返信用メールアドレス」の項目を追加するために
右側の【質問を追加】アイコンをクリック。

「お問い合わせ内容」も同様に追加します。

回答方法を選択

続いては回答方法を変更します。f:id:saichu:20170614181532p:plain
初期画面で【ラジオボタン】と表記されている部分をクリックすると複数の項目が現れます。

 

今回使用するのは【記述式】と【段落】のみです。

回答が短い「お名前」、「返信用メールアドレス」は【記述式】
回答が長い「お問い合わせ内容」は【段落】を選択します。

全ての項目を回答必須にする

名前、返信用アドレス、内容のどれが欠けても問い合わせフォームとして成立しなくなってしまうので全ての項目を必須項目とします。

f:id:saichu:20170614184724p:plain

各項目を選択した時、下に【必須】のスイッチがありますのでこれを3項目すべてONにします。

デフォルトなら紫色になればONの状態です。
また、各項目名の右側に【*】のマークが付くことでも確認できます。

この時点でお問い合わせフォームとしては完成です。

自分のブログに合わせてカスタマイズ

テーマカラーやサイズに合わせて調整します。

f:id:saichu:20170614185452p:plain

画面上部のパレットアイコンでカラーの変更ができます。
僕はブログに合わせてオレンジを選択しました。

その隣の目力がすごいアイコンでは完成したフォームがプレビューできます。

 

各項目を入力し、カラーを変更したフォームのプレビューがコチラ。f:id:saichu:20170614170544p:plain

バッチリですね! これをブログに設置します。

ソースコードを取得

画面上部の【送信】ボタンをクリック。

f:id:saichu:20170614190513p:plain

【フォームを送信】の画面になります。

f:id:saichu:20170614173417p:plain

送信方法がメールになっているので【<>】を選択し、コピーをクリックすると自動でクリップボードにコピーされます。

ここで幅、高さの調整が出来ますが、まずはそのまま取得してブログに貼ってみます。

これでひとまずGoogleフォーム上での操作は完了です。

はてなブログでの操作

ここからはご自身のブログ上で操作します。

新記事を作成しコードを貼る

いつも通り【記事を書く】から新記事を作成し、【HTML編集】タブを開きます。

そこに先ほどコピーしたコードを貼り付けます。

f:id:saichu:20170614204441p:plain

 

【プレビュー】で確認してみます。
このサイズだとフォーム全体が表示できず、スクロールしなくてはいけません。

f:id:saichu:20170614205810p:plain

サイズの調整と投稿日時設定

サイズを修正して全体を表示します。

再び【HTML編集】に戻り、以下の数字を調整します。

僕の場合は、『幅760×高さ950』としました。 

f:id:saichu:20170614180724p:plain

再び確認して問題がなければ、投稿日時を過去の日付に設定して投稿します。

f:id:saichu:20170614180716p:plain

記事のリンクを使って動線を作る

あとは作成した記事にトップページなどから直接アクセス出来るようにリンクを貼りつければ完成です!

僕の場合はPCサイドバーのプロフィール

f:id:saichu:20170614212048p:plain


スマホのグローバルナビ

f:id:saichu:20170614212220j:plain

以上2箇所に表示しています!

 

この辺はカスタマイズも途中なので変わるかもしれません。
しかし必要な時に探す手間がかかってしまうと意味がないのでアクセスしやすい場所に配置しましょう。

おわりに

以上です。
今回は本当に最低限の項目のみで作成しましたが、もしも問い合わせが増えるようなことがあれば
項目を増やして使い勝手を良くすることもできますし、まずはこんなもんかと。

 

いらないんじゃね? っていうのと手間がかかりそう、っていうイメージで設置が今頃になったんですが
思ったより簡単だったのでとりあえず設置しとけばいいと思います。

 

 

まだ設置していないアナタも
是非セッチしてください!

 

以上、もなかでした。