after work Labo

「好きなこと・興味がわいたこと」を時々「お勉強させて頂いてます!」

Googleフォームでお問い合わせフォームは簡単にできる!

はじめに

 

はてなブログを始めて1年10カ月(22カ月)経ちましたが、お問い合わせのページはあえて作ってませんでした。

 

理由は下手にメアドを公開したら、スパムメールがたくさん来るかも知れないと思ったからです。

 

ブログの記事で質問があればコメントを入力すれば良いのですが、非公開で質問をしたい場合があると思います。

 

しかし、はてなブログは管理者がコメントを承認したら公開となるので、こっそり質問することはできません。

 

まあ、こっそり質問するなんてあまりないと思いますが、Googleフォームを利用すると、メアドは非公開で簡単にお問い合わせフォームが作れることが分かったので、当ブログにも実装してみました。

 

前半はGoogleフォームでのお問い合わせフォームの作り方、後半にお問い合わせのページをブログに設定する方法を解説します。

 

お問い合わせフォームの設定方法がよくわからない、という方は是非参考にして下さい。

 

Googleフォームとは

 

GoogleフォームはGoogleが提供している無料サービスの一つですが、いろんなフォームが数分で超簡単にできちゃうツールです。

www.google.com

 

Googleフォームは何ができるのか

これから紹介する「お問い合わせ」フォームや、各種イベントのアンケート・投票をフォームで集計することができます。

 

集計したデータはリアルタイムで見れグラフにも表示でき、スプレッドシートを利用すると、更に詳しい分析もできる優れたツールです。

 

またGoogle Suiteのラーニングセンターには、Googleフォームのスタートガイドが用意されており、ここを見れば初心者でも簡単にフォームが作れるように環境が整ってます。

gsuite.google.jp

出典:Google ラーニング センター フォーム スタートガイド

 

それではお問い合わせフォームの作成手順を説明します。

 

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

「Googleフォームを使う」をクリック

 

新しいフォームを作成の「空白」をクリック

 

無題のフォームを「お問い合わせ」に

無題の質問を「お名前(ハンドルネーム)」に修正

 

「ラジオボタン」をクリック

 

「記述式」を選択

 

「必須」を選択し「コピーを作成」をクリック

 

「お名前(ハンドルネーム)」を「メールアドレス」に修正

 

「コピーを作成」をクリック

 

「メールアドレス」を「件名」に修正

 

「コピーを作成」をクリック

 

「件名」を「内容」に修正

 

「記述式」を「段落に変更」

段落に変更することで、内容は複数行入力できるようになります。

 

「設定」をクリック

 

「プレゼンテーション」を選択し「別の回答を送信するためのリンクを表示」のチェックを外す

 

「進行状況バーを表示」をチェックし、確認メッセージを入力

 

以上でお問い合わせフォームの作成は終了です。

 

なおヘッダー画像、テーマの色、背景色、フォントスタイルは変更可能なので、お好みのものに修正して下さい。ここではヘッダーを変更してみます。

 

「テーマをカスタマイズ」を選択し、「画像を選択」をクリック

 

お好みの画像を選択

 

ヘッダー画像を追加したことで、魅力的?なフォームになりました。

 

問い合わせフォームのブログへの設定方法

次にお問い合わせフォームをブログに設定する方法を説明します。

 

設定方法は2つあり、お問い合わせフォームのURLのリンクを置く方法とHTMLをブログに埋め込む方法があります。

 

お問い合わせフォームのURLのリンク取得

「送信」をクリックします

 

 リンクのアイコンを選択し、URLをコピー

 

サイドバーのリンクに追加します

 

別の使い方としてツイッターに貼り付けて、問い合わせ内容を送ってもらうことも可能です。

 

お問い合わせフォームのHTML埋め込み

はてなブログの無料版をご利用の方は、Aboutに埋め込むか、お問い合わせ専用の記事を作成し、記事の中にHTMLを埋め込んで下さい。

 

有料版のProをご利用の方は、固定ページを利用するのが便利です。

 

“あトん”は今年1月にProに変更したので、お問い合わせの固定ページを作成しました。作成方法は簡単で、

 

「固定ページ」を選択→アドレスを入力→「ページを作る」をクリック

 

Googleフォームを開き「送信」をクリック

 

HTMLのアイコンを選択しHTMLをコピー

画像の幅は使用しているブログのコンテンツ幅に応じて変更してください。

 

固定ページのHTML編集を選択→HTMLを貼り付け

 

固定ページのリンクは、サイドバーのプロフィール、フッター、記事下等、お好みの場所に置いて下さい。

 

作成した固定ページのリンクを貼っておきますので、興味がある方はご覧下さい。

www.heavy-peat.com

 

お問い合わせフォームの送信テスト

では、ちゃんとお問い合わせの内容が送信されるかテストしてみました。

 

今回はテストなので自分に送ってみます。

内容を入力して送信をクリックします。

 

無事送信されたようです。

 

お問い合わせフォームをクリック

 

回答が1件到着してます

 

「送信」をクリック

 

メーッセージを書き送信

 

無事回答が到着してました。

更に質問がある場合は、メールの中で記入・送信できます。

 

Googleフォームから自動返信させる方法

ausnichtsさまが、下記サイトで自動返信スクリプトを公開されております。

 

当ブログでは、まだ1件もお問い合わせがないので、まだ実装してませんが、問い合わせが多いサイトは凄く便利だと思いますので、興味がある方は自己責任で利用されると良いと思います。

 

www.imuza.com

www.imuza.com

 

まとめ

今回お問い合わせフォームを設定したもう一つの理由は、はてなブログのヘルプに、お問い合わせフォームの設置とお問い合わせを固定ページとして設置する方法が推奨されていたからです。

help.hatenablog.com

 

実際やってみたら、Googleフォームを使うとお問い合わせフォームが超簡単に作れることが分かり、固定ページを利用すると、作成したフォームをブログの中に簡単に置くことができることが分かりました。

 

まだお問い合わせのページを設けてない方は、簡単に作れるので是非試してみて下さい。

 

今後どんなお問い合わせが来るかドキドキしますが、楽しみに待ちたいと思います。きれいなお姉さんからの質問は大歓迎です。(笑)

 

それでは今回の記事はこれでおしまい。

 

 

<追伸> 

プライバシーポリシーの固定ページもついでに作ってみました。興味がある方は下記記事をご覧ください。

www.heavy-peat.com