Webサイトを作る時に、ほぼ必須と言ってもいいぐらい必要な機能が「お問い合わせ機能」です。
ページを公開している会社や組織に対する疑問や質問、
何かしらの注文を受け付ける問い合わせ対応、
他にもアンケートや、単なるご意見箱などにも使われます。
ホームページを公開している以上、表示しっぱなしというのは、全くホームページの存在意義が無いので、閲覧者、利用者などのユーザーからのアクションは必要最低限受け付けなければいけません。
ちなみに、今回構築するホームページのお見積りシステムでは、お見積りをメールで受け取ったり、お見積りを行った人の履歴をGoogleSpreadSheetにロギングしたり、見積もりを行ったタイミングでリアルタイムにお知らせを受け取るという、仕組みを考えています。
しかも、無料で手軽に誰でも構築できるという、
GoogleFormです。
以前にも、GoogleFormを使ってお問い合わせフォームを作る方法は何度かブログに書いたことがありますが、今回はそれを少しバージョンアップしたやり方で行いたいと思います。
以前の記事 :
これは便利、CGIを一切使わずにformデータが収集できる、Google form活用方法
GoogleFormをお問い合わせに使う方法（おさらい）
GoogleWorkspaceでも使えますが、無料のGmailアカウントでも問題なくセットできる方法です。
1. GoogleFormで、新規のフォームを作成
https://docs.google.com/forms
Gmailアカウントでログインしている状態で、上記のURLに行くと、新しくGoogleFormを作ることができます。
お問い合わせに必要な項目を、その名称を付けて作っておきます。
※項目の個数は何個作っても問題なく対応できます。
【注意点】
基本的にここでの装飾は一切関係ないので、「項目名」とその「種別」のみを登録していきます。
そして、ラジオボタンやチェックボックスなどは使わずに「記述式」と「段落」のみを使用してください。
記述式はinput type="text"タグで、
段落はtextareaタグに相当します。
※ラジオボタンやチェックボックスを使いたい場合は、value値の値が取れるようになるので、checkboxの複数回答の場合のみjavascriptで操作する必要があります。※このやり方は別の機会に解説したいと思います。
2. スプレッドシートにリンクする
回答タブをクリックすると、右上に「スプレッドシートにリンク」という文字がアイコンと共にあります。
それをクリックすると、新規でスプレッドシートにリンクをするか、既存のスプレッドシートにJOINするかを選べます。
オススメは、新規にして、シート単体で1フォームを管理するのが便利です。
※複数のフォームを効率的に管理する場合は、JOIN方式が便利な場合もあります。
3. 入力プレビューを開いて必要情報をメモする
次に画面右上の「プレビュー」アイコンをクリックすると、フォームの入力画面が開きます。
プレビュー画面が開いたら、F12キーを押してブラウザのデバッグコンソール画面を開きます。
※画面は、GoogleChromeで操作しています。
そして、右側のデバッグコンソール画面のElementで「entry.」（ドットを入れるのがミソ）と検索をすると、下の画像の様に項目名が取得できます。
このentry.***というのが、先程登録した項目のname値として使うため、メモしておきましょう。
あと、プレビュー表示しているURLも同時にメモしておけば、GoogleFormでの作業は終了です。
4. 入力画面の構築
簡単な入力画面に先ほどメモした内容を元にformタグ、inputタグ、textareaタグを設置します。
簡単なフォームサンプルを用意しておくので、コピペして使ってくだされ。
<form class="demo" method='post'
action='https://docs.google.com/forms/d/e/1FAIpQLSdJcaFX89Z8x7_FRlACdciwHy9wA77rgaT4OxWaunmCIZIAcQ/formResponse' target="complete" onsubmit="submitted=true">
<p>何に関するお問い合わせですか？</p>
<select name="entry.664214585">
<option value="サイトについて">サイトについて</option>
<option value="疑問・質問">疑問・質問</option>
<option value="その他">その他</option>
</select>
<p>名前</p>
<input type="text" name="entry.1570939787" />
<p>メールアドレス</p>
<input type="text" name="entry.756098877" />
<p>お問い合わせ内容</p>
<textarea name="entry.400379748"></textarea>
<button type="submit">送信</button>
</form></blockquote>
<script type="text/javascript">
window.submitted = false;
</script>
<iframe
id="complete"
name="complete"
style="display:none;"
onload="if(submitted){alert('送信しました。')/*window.location='contact_thanks.html'*/}"></iframe>
【解説】
・formタグのactionには、プレビューURLの最後の/viewformという文字列を、/formResponseに変更してセットする。
【デモ】
※実際に送信できます。
入力フォームのデザインはサイト側でお好きなCSSでセットできるので、GoogleFormを使っているとは、ソースを見ないと気が付かないでしょう。
そして、上記送信したスプレッドシートも惜しまず公開しておきます。
送信後のデータが溜まるスプレッドシートは
こちら
フォームが送信されたらお知らせをメールで受け取る方法
上記の設定ができたら、スプレッドシートの上部メニューの「ツール」-「通知設定」-「通知を編集」を選択すると、お問い合わせが送信されたら、自分のGmailアカウントにメールを飛ばすことができます。
ちなみに、通知設定は、次の設定が一番いいでしょう。
でも、この方法では、自分のGmailにしかメールが送信されません。
もっと便利にしたい場合、次の方法で好きなメールに送信することができます。
GASを使って任意のメールアドレスに飛ばす
GASの詳細説明は、ここでは避けますが、一言で説明すると、スプレッドシートをプログラムで操作することができる便利機能の事です。
GAS(AppScript)画面を起動
上部メニューの「拡張機能」-「App Script」を選択します。
すると次のようなエディタ画面が立ち上がります。
その画面の右側のエディタ部分に次のプログラムをまるっと上書きします。
function sendmail(e) {
const recipient = 'yugeta@myntinc.com' // 送信先メールアドレス
const subject = '【ホームページ】 お問い合わせを受信しました。'
const body = get_body(e)
const options = {
name: 'test送信', //送信者の名前
// cc:'test@example.com',
// bcc:'sample@example.com',
noReply: true,
}
GmailApp.sendEmail(recipient, subject, body, options);
}
//本文
function get_body(e){
const vals = []
for(const key in e.namedValues){
const val = e.namedValues[key][0] || ""
vals.push(`${key}\n\t${val}`)
}
return vals.join("\n\n") + "\n"
}
そして、上部にある、プロジェクトを保存アイコンをクリックします。
送信メールアドレスは、送信をしたいメールアドレスを記載しておきましょう。。
トリガーの設定
画面左のメニューに、「トリガー」というのがあるので、それをクリック。
この機能は、スプレッドシートのいろいろなイベント（トリガー）に対して、GASを実行させる事ができます。
画面右下の「トリガーを追加」ボタンを押して次の様にセットをします。
そして保存ボタンを押します。
Googleの認証確認を行う
画面に認証画面が表示されるので、自分のGmailアカウントを選択。
次になんだかエラー画面が表示されますが、慌てなくても大丈夫です。
左下の、「Advanced」をクリックすれば何の問題もありません。
そして、「Go to プロジェクト名」をクリック
さらに「Allow」を選択。
これで登録が完了されました。
実際に入力フォームで送信すると、スプレッドシートにも書き込まれるし、指定したメールアドレスにもメールが届いているハズです。
あとがき
スプレッドシートのGASを使ったメール送信ですが、これはホームページを作って納品する時に、クライアントから「お問い合わせがあったら、自分のメールに送るようにしてください」と言われるので、これまでは、スプレッドシートの通知設定を促していたんですが、GASを使うことで任意のメールに送信できるようになるので、非常に便利にホームページ制作をして納品できるようになります。
そして、これを利用していろいろな事ができると思いません？
ちょっとしたアンケートや、何かしらのWebでのチェック項目などのロギングをすることもできるし、
今回の目的のホームページのお見積りをやった履歴と、その結果を該当のメールに送付することも可能です。
もはや立派なWebシステムに使える方法でもありますね。
そして、どれもサーバー管理はGoogle社が行っているという安心感。
サーバーダウンなどの管理をこちらで行わなくてもいいし、何より無料でできてしまうというコスパの良さ。
コレ使わない手はないで！
